If you want to know a little more about AJAX History have a look at this video on MSDN Screencasts (used to be MSDN .Net Nuggets) Managing Browser History with ASP.NET AJAX and the ASP.NET 3.5 Extensions Preview it is slightly out of date in that some of the properties have been renamed but its essentially correct and a good foundation for AJAX History’s use. There is a second article Managing Browser History on the Client with ASP.NET AJAX and the ASP.NET 3.5 Extensions Preview which may be of interest for some.
The Problem
To appreciate the solution you need to understand the problem. So here’s what happens you have a standard ASP.Net Dynamic Data V1 website with several filters on each list page, there are two things that will irritate your users to do with AJAX partial post back:
1. You make several selections and click back you will go to the previous page not the last selection (try it with and without partial render enabled in site.master EnablePartialRendering="true" see Listing 1).
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Dynamic Data Site</title> <link href="~/Site.css" rel="stylesheet" type="text/css" /> </head> <body class="template"> <h1><span class="allcaps">Dynamic Data Site</span></h1> <div class="back"> <a runat="server" href="~/"><img alt="Back to home page" runat="server" src="DynamicData/Content/Images/back.gif" />Back to home page</a> </div> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
Listing 1 – the default Site.master
2. You click a link from a List page on which you have made several filter selections view the sub page and then click back you reach the page with no filtering applied.
Both of these issues can be really irritating for the user, because A it’s not the expected behaviour and B it’s a pain to have to redo all those filters (after all users are really lazy 
)
Have you watched the video? well if you have no prior knowledge of AJAX History I strongly suggest you have a look at the video after all it's only 13mins 27secs long.
The Solution
First of all this is only my first attempt at this I think once I get into the Dynamic Data V2.0 Preview/Release I will redo this as a class that inherits from UserFilterControlBase to easily give this functionality in filter templates.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" EnableSecureHistoryState="false" EnablePartialRendering="true"/>
Listing 2 – the ScriptManager on Site.master alterations
As you can see from the Listing 2 enabling AJAX History is quite easy you just need to add the EnableHistory="true" property to the control. The other property is to disable encryption of the history information that is added to the URL EnableSecureHistoryState="false" this is one of the methods that have been renamed for the RTM version.
Now we need to edit the ~/DynamicData/Content/FilterUserControl.ascx.cs file see Listing 3 for the code all alteration are in BOLD italic.
using System; using System.Collections.Specialized; using System.Linq; using System.Web.UI; using System.Web.UI.WebControls; public partial class FilterUserControl : System.Web.DynamicData.FilterUserControlBase { // global variable for holding the History Point value private String HistoryPointValue; public event EventHandler SelectedIndexChanged { add { DropDownList1.SelectedIndexChanged += value; } remove { DropDownList1.SelectedIndexChanged -= value; } } public override string SelectedValue { get { return DropDownList1.SelectedValue; } } protected void Page_Init(object sender, EventArgs e) { if (!Page.IsPostBack) { PopulateListControl(DropDownList1); // Set the initial value if there is one if (!String.IsNullOrEmpty(InitialValue)) DropDownList1.SelectedValue = InitialValue; } // add event handler to capture history point. this.SelectedIndexChanged += ThisSelectedIndexChanged; // Add OnNavigate handler to restore History points. var scriptManager = ScriptManager.GetCurrent(Page); if (scriptManager != null) scriptManager.Navigate += ScriptManagerOnNavigate; } protected void ThisSelectedIndexChanged(object sender, EventArgs e) { var filterRepeater = this.GetParentFilterRepeater(); if (filterRepeater != null) { // add History point for the curret state of // all filters so we can restore them later. var scriptManager = ScriptManager.GetCurrent(Page); if (scriptManager != null && scriptManager.IsInAsyncPostBack) { var nvcHistory = new NameValueCollection(); var filterControls = filterRepeater.GetFilterControls(); if (filterControls.Count() > 0) { foreach (var filter in filterControls) { var f = filter as FilterUserControl; if (f != null) nvcHistory.Add(f.DataField, f.SelectedValue); } // if we get some filter states add the history point. if (nvcHistory.Count > 0) scriptManager.AddHistoryPoint(nvcHistory, Page.Title); } } } } protected void ScriptManagerOnNavigate(object sender, HistoryEventArgs e) { HistoryPointValue = e.State[DataField]; if (e.State[DataField] == null || e.State[DataField] == "") DropDownList1.SelectedIndex = 0; else if(HistoryPointValue != null) { // check if history point is in the DDL and set History Point value ListItem item = DropDownList1.Items.FindByValue(HistoryPointValue); if (item != null) DropDownList1.SelectedValue = HistoryPointValue; } } }
Listing 3 – FilterUserControl.ascx.cs file
And finally here are the extension methods use in Listing 3.
using System.Collections.Generic; using System.Linq; using System.Web.DynamicData; using System.Web.UI; using System.Web.UI.WebControls; /// <summary> /// Summary description for ExtensionMethods /// </summary> public static class ExtensionMethods { /// <summary> /// Get the parent FilterRepeater of the control it's used on. /// </summary> /// <param name="control">The control to find the parent FilterRepeater of.</param> /// <returns>The parent FilterRepeater.</returns> public static FilterRepeater GetParentFilterRepeater(this Control control) { var parentControl = control.Parent; while (parentControl != null) { var FilterRepeater = parentControl as FilterRepeater; if (FilterRepeater != null) return FilterRepeater; else parentControl = parentControl.Parent; } return null; } /// <summary> /// Get a List of FilterUserControlBase filters from the FilterRepeater. /// </summary> /// <param name="filterRepeater">The FilterRepeater to get a List of filter from</param> /// <returns>returns a List of type FilterUserControlBase.</returns> public static IEnumerable<UserControl> GetFilterControls(this FilterRepeater filterRepeater) { var filters = new List<UserControl>(); foreach (RepeaterItem item in filterRepeater.Items) { var filter = item.Controls.OfType<UserControl>().FirstOrDefault(); filters.Add(filter); } return filters.AsEnumerable(); } }
Now when you skip back and forth through pages you should find it works just like you and your users were expecting.
14 comments:
Very nice!
All that remains now is to keep the value of the filters when the user inserts or updates as well. I am using Dynamic Data Entities for a CMS and well... there is A LOT of content :)
Yep well thats another thing, there was a post on the forums a while back and I will do something to wasily facilitate this in the future. I'm currently working on an advanced version of the Cascading FiledTemplates from an earlier post (that works with the preview) and also a cascading filter for the preview, after that I'll get an article on AJAX History for the Preview and cover this also.
Steve :D
Thanks for a wonderful article. A quick question here is, in which case ScriptManager.GetCurrent(Page) can be null?
Nyoti
It's probably just a precaution, although I have found that some of these controls are called morethan once and the first time the ScriptManager is not found and so the test stops an exception :D
Steve
Do you have example on using the AJAX history for DynamicFilterRepeaters. For Example if is use contains filter or equal filter i need the history to be retained after coming back from editing the records.
I'm sorry I don't but it could be easily adapted.
Steve :D
Can you give more details on how to use the extension modules?
Hi David, do you mean C# Extension Methods? if so try this C# Extension Methods Video by Mike Taulty on MSDN.
Steve :D
Hi steve,
I've done what you have mentioned but still dynamicfilter is set to 'ALL' if I updated anything for event and its not set to what I've selected from dropdownlist. Please help on this what might be the issue?
Cheers,
Naidu
Hi Naidu, I'll try and add a sample to this post for you to download and try :)
Steve
Hi Steve, I am using dynamic data website to build the form dynamically from metadata. Can you pls help me out what I am facing. my prob is that when I clicked on checkbox, I need either enable/disable another textbox.
Hi there, is this question about Ajax History?
If not just send me an e-mail direct, my address is in the top right of the page.
Steve
Is this still the current solution?
yes as far as I know Miscrosoft have not removed Ajax History from Asp.Net and so it should still work, I now however use session to store the history as my users seem to wany it to remember the last set of filter each time they return to the page.
Steve
Post a Comment