interviews.dotnetthread.com

↑ Grab this Headline Animator

Tuesday, February 10, 2009

Enabling browser back button for GridView Paging and Sorting in Ajax 1.1 and 3.5 (using Visual Studio 2005/ Visual studio 2008)

Introduction:

Generally we use browser back button frequently to go to back/previous page importantly its useful when we are searching using search controls (Textbox's, dropdowns, button..), or using Paging, Sorting etc.

In all these case when there is a post back, the browser is updated with the information of the page visited and hence the back button gets enabled automatically. However if we are updating page using AJAX asynchronous requests, updating browser history is not taken care automatically.

We need to do some tweaks to achieve this and enable browser back button by storing the state into browser history.

Description:

In a normal web page developed using ASP.NET browser history is updated for every post back i.e. when user clicks on the paging links or sorting links or search buttons etc. Hence user can easily check the previous records by clicking on browser back button.

In an AJAX enabled web page where we have GridView inside an update panel browser history does not get update as post back happens asynchronously which browser is not aware of.

In ASP.NET AJAX 3.5

In .Net Framework 3.5 we have AJAX extensions like ScriptManager and UpdatePanel using which we develop AJAX enabled web pages.

In ASP.NET SP1 we have History control which allows us to add history points to our AJAX Enabled page’s post backs and hence enable back button navigation for the users.

Enabling Browser back button for GridView Paging and Sorting using History points in ASP.NET 3.5 SP1.

1. Set the property EnableHistory=”true” for the ScriptManager

2. GridView Paging:

  1. Handle the OnPageIndexChanged event of the GridView with an event handler   (ex: OnPageIndexChanged = ”GridView1_PageIndexChanged”)

  2. Add the following handler code in the code behind as follows:


protected void GridView1_PageIndexChanged(object sender, GridViewPageEventArgs e)
{
// To check if post back is Asynchronous
if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating)
{
//To add History point with gridview selected page index value.
ScriptManager1.AddHistoryPoint("PageIndex", GridView1.PageIndex.ToString());
}
}


  3. Handle the OnNavigate event of the ScriptManager with an event handler
  (ex: OnNavigate="ScriptManager1_Navigate")

  4. Add the following handler code in the code behind as follows:


protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
// Get GridView PagIndex from history
string pageIndex = e.State["PageIndex"];
if (string.IsNullOrEmpty(pageIndex))
{
GridView1.PageIndex = 0;
}
else
{
GridView1.PageIndex = Convert.ToInt32(pageIndex);
}
}


  5. Now we can navigate across the pages with enabled back button.

  6. In the above case PageIndex is stored in the URL in encrypted format (Page   state is encoded in the querystring of the browser, meaning that visitors   can bookmark a particular state of an AJAX application). If you make   EnableSecureHistoryState = “false” then its directly visible in the URL as http://localhost/Sample/Default.aspx#&&PageIndex=1.

3. GridView Sorting:

  1. Handle the OnSorting event of the GridView with an event handler (ex: OnSorting="GridView1_Sorting")

  2. Add the following handler code in the code behind as follows:


protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
// Create the history state for Direction and Expression
ScriptManager1.AddHistoryPoint("SortExpression", e.SortExpression);
ScriptManager1.AddHistoryPoint("SortDirection", e.SortDirection.ToString());
}


  3. Handle the OnNavigate event of the ScriptManager with an event handler (ex: OnNavigate="ScriptManager1_Navigate")

  4. Add the following handler code in the code behind as follows:


protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
if (!string.IsNullOrEmpty(e.State["SortExpression"]))
{
string sortExpression = e.State["SortExpression"];
SortDirection sortDirection = (SortDirection)Enum.Parse(typeof(SortDirection), e.State["SortDirection"]);
// Sort the grid according to the sort information in the history state
GridView1.Sort(sortExpression, sortDirection);
}
}


  5. In the above case SortExpression and SortDirection is stored in the URL in encrypted format (Page state is encoded in the querystring of the browser, meaning that visitors can bookmark a particular state of an AJAX application). If you make EnableSecureHistoryState = “false” then its directly visible in the URL as http://localhost/Sample/Default.aspx#&&SortDirection=Ascending&SortExpression=SectorName.

Enabling Browser back button for GridView Paging and Sorting in ASP.NET 2.0 (AJAX 1.1) using nikhils UpdateControls.


1. Download Nikhils UpdateControls here

2. Create Ajax enabled website in ASP.NET 2.0.

3. Add reference to UpdateControls.dll

4. Register tagprefix

<%@ Register Assembly="nStuff.UpdateControls" Namespace="nStuff.UpdateControls" TagPrefix="uc" %>

Then add UpdateHistory control below ScriptManager.

<uc:UpdateHistory ID="UpdateHistory1" runat="server" OnNavigate="ScriptManager1_Navigate">
</uc:UpdateHistory>


5. GridView Paging and Sorting.

  1. Handle GridView Sorting and PageIndexChanged events as below where we will add an entry to history with PageIndex or SortExpression and Direction.

     
protected void GridView1_PageIndexChanged(object sender, GridViewSortEventArgs e)
{
// Create the history state for new page index
UpdateHistory1.AddEntry("PageIndex="+ GridView1.PageIndex.ToString());
}

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
// Create the history state for Direction and Expression
ScriptManager1.AddHistoryPoint("SortExpression", e.SortExpression);
ScriptManager1.AddHistoryPoint("SortDirection", e.SortDirection.ToString());
}


6. Finally we need to handle OnNavigate Event of UpdateHistory control to get the PageIndex and SortExpression and set to gridview. This OnNavigate event is fired when the user tries to navigate using browser back and forward buttons.


protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
string entryName = e.EntryName.ToString();
if (e.EntryName.Contains("SortDirection") && e.EntryName.Contains("SortExpression"))
{
string[] splitter = new String[1];
splitter[0] = "&&";
string[] text = e.EntryName.Split(splitter, StringSplitOptions.None);
string sortExpression = text[1].Replace("SortExpression=", "");
string strSortDirection = text[0].Replace("SortDirection=", "");
SortDirection sortDirection = (SortDirection)Enum.Parse(typeof(SortDirection), strSortDirection);

// Sort the grid according to the sort information in the history state
GridView1.Sort(sortExpression, sortDirection);
}

// Get GridView PagIndex from history
string pageIndex = string.Empty;
if (e.EntryName.Contains("PageIndex"))
{
pageIndex = e.EntryName.Replace("PageIndex=", "");
}
if (string.IsNullOrEmpty(pageIndex))
{
GridView1.PageIndex = 0;
}
else
{
GridView1.PageIndex = Convert.ToInt32(pageIndex);
}
}



Enable browser back and forward button support for Gridview paging and sorting in ASP.NET AJAX using jQuery.

To enable browser back and forward button support for GridView paging and sorting in ASP.NET AJAX using jQuery History plugin. jQuery is popular and widely used Javascript library and will take care of browser compatibility for our script.

Read the full article on this Here Enable browser back and forward button support for Gridview paging and sorting in ASP.NET AJAX using jQuery.

We can also achieve the same functionality using the following libraries.

1. SWFAddress

2. History Event: jQuery Plugin
(Ex:http://interviews.dotnetthread.com/2009/02/enabling-browser-backforward-button.html)


3. RSH (Really Simple History - EX: http://www.justise.com/2009/01/26/enabling-the-back-button-in-ajax-applications/

4. HistoryManager: Mootools Plugin


Dowload Source Code

For AJAX 3.5 using ASP.NET 3.5 SP1 Download Here

For AJAX 1.1 using ASP.NET 2.0 and nikhils UpdateControls Download Here

Note: You have to change connection string in Web.config and also configure sqldatasource with local db table for running the sample application.
Also Update the code to use GridView PageIndexChanged instead of PageIndexChanging.

Happy coding with AJAX…..

Submit this story to DotNetKicks

7 comments:

Anonymous said...

Thanks for explaining enabling browser back button both in Ajax 1.1 and 3.5

sandhya said...

nice article

Anil Kumar Reddy said...

I have updated the code to use GridView PageIndexChanged instead of PageIndexChanging.

Please do the same if u download the source code...

Anonymous said...

Where is the sample database? Why didn't you just use Northwind, it's so ubiquitous. WTF?

Anonymous said...

good article

Anonymous said...

A Fantastic way to do both paging and sorting.
thanks.

I use the following to connect to the Northwind DB

KS said...

How does the gridview sorting history work when your scriptmanager is in the masterpage?

Thanks,


KS

Post a Comment

Post your comments/questions/feedback for this Article.

 

Latest Articles