interviews.dotnetthread.com

↑ Grab this Headline Animator

Thursday, February 26, 2009

Enabling Browser Back/Forward Button Support for ASP.NET AJAX using jQuery.

Introduction:
The Article will demonstrate how to enable browser history thus enabling browser back and forward support for ASP.NET AJAX Update Panel using jQuery using the location hash fragment method. Now a day’s jQuery is widely used as it is a fast, lightweight JavaScript library and no need to worry about browser compatibility of our script.


You May also want to read "
Enable browser back and forward button support for Gridview paging and sorting in ASP.NET AJAX using jQuery."

Description:
Let’s see how to maintain browser history when we are using AJAX update panel in a web page using jQuery History plug-in which allows dynamic pages to create page states and easily recall them when user navigation (through browser back or forward event) occurs.

Before starting please download jQuery library from here and jQuery History plug in from here.

• Create new Ajax Enabled Website using Visual Studio templates.

• Add a new folder to in solution explorer name it “jQuery” and add jQuery library and History plug in JavaScript files to this folder. You can name these files as you like.


• Add reference to both JavaScript files (jQuery.js and history.js) into Default.aspx page under head tag.



<script type="text/javascript" src="jQuery/jquery.js"></script>

<script type="text/javascript" src="jQuery/history.js"></script>



• Add update panel to .aspx page and include dropdown list inside it. For each time dropdown list selection changed we will maintain previous selected value of list to the browser’s history via jQuery History plug in.


<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="updatepanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<div>
<asp:Label runat="server" ID="lblSelectedValue" Text="Select Category" Font-Size="30px"></asp:Label>
</div>
<br />
<div>
<asp:DropDownList ID="ddlValues" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlValues_SelectedIndexChanged">
<asp:ListItem Text="Select Category" Value="0"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="1"></asp:ListItem>
<asp:ListItem Text="AJAX" Value="2"></asp:ListItem>
<asp:ListItem Text="Silverlight" Value="3"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="4"></asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>



• In Page_Load method add ‘onchange’ attribute to the dropdownlist control to call Javascript function “onSelectionChange”.


protected void Page_Load(object sender, EventArgs e)
{
ddlValues.Attributes.Add("onchange", "javascript:onSelectionChange();");
}



• In the onSelectionChange Javascript function write the following code to add a new history point with dropdown list selected value as hash key, To save an event (selection change) in history with the current state (selected value) of the object .


<script type="text/javascript">
function onSelectionChange()
{
//Add a history point using jQuery history puligin
$.history.add( $("#ddlValues").val() );
}
</script>



• Now browser back button will be enabled when user makes selections in the dropdown list, and user can now navigate using browser back and forward buttons.

• Importantly now we need to catch this navigation and get the related hash key(to set back dropdown value based on the previous selection), You must declare a callback function to be fired upon forward or back button being clicked to handle the new incoming stored history object. Add the following jQuery code for call back function and in the call back function we will set back the dropdown list selected value based on the History value.


<script type="text/javascript">
$(document).ready(function()
{
//get the value from history
$(window).history(function(e, hash)
{
if(hash == "")
{
$("#ddlValues").val("0");
}
else
{
$("#ddlValues").val(hash);
}
//To get dropdownlist selected text using jQuery and set to a label.
$("#lblSelectedValue").text($("#ddlValues").find('option').filter(':selected').text());
});
});
</script>




• Set AutoPostback property of Dropdownlist to true and In the DropdownList OnSelectedIndexChanged event handler in which we can get the selected value and use it display other data.

• Just run the application and test it, you will find that browser back and forward buttons are enabled when users makes selection changes in the dropdownlist and selected value is maintained in the URL as hash value(http://localhost:51615/jQueryHistory/Default.aspx#1). And if you navigate using browser back and forward buttons drop down value is set from the history.


Download the Source Code for this article here.



You May also want to read "Enable browser back and forward button support for Gridview paging and sorting in ASP.NET AJAX using jQuery."

Stay tuned for more on jQuery...

Submit this story to DotNetKicks

No comments:

Post a Comment

Post your comments/questions/feedback for this Article.

 

Latest Articles