Ajax'ing

Our thingamabob collection is now at our fingertips but the web app needs a bit of Ajax pizzazz. Paging through the list would be smoother if we returned the next set of thingamabobs using Ajax. We mustn't lose the ability to bookmark pages and for search engines to see our thingamabobs.


Ajax

With just a smattering of Navigation for ASP.NET UI code we can turn a normal request into an Ajax one. Code outside of the UI doesn't change because the navigation data is identical before and after. Navigation for ASP.NET uses HTML5 History to make Urls we can bookmark and keeps the original hyperlinks for search engine visibility.

With the addition of a panel and a script, Navigation for ASP.NET will turn a refresh navigation into an Ajax request.

MVC

We build the panel using an AjaxHelper extension method.

@Ajax.RefreshPanel("panel", "",
	@<div>
 		<!-- Content -->
	</div>)

We add the script from the Scripts folder.

<script src="~/Scripts/navigation.mvc.js"></script>

Web Forms

Before adding the panel and the script we must make each refresh navigation issue a post back.


<asp:HyperLink NavigateUrl="{RefreshPostBack page?int=2}"/>
<nav:NavigationHyperLink Direction="Refresh" PostBack="true" ToData="page?int=2"/>

The panel's an ASP.NET UpdatePanel that contains a HistoryNavigator Control.

<asp:UpdatePanel ID="panel" runat="server">
	<ContentTemplate>
		<div>
 			<!-- Content -->
		</div>
		<nav:HistoryNavigator runat="server" />
	</ContentTemplate>
</asp:UpdatePanel>

We add the script to the ScriptManager as a ScriptReference.

<asp:ScriptReference Name="Navigation.HTML5History.js" Assembly="Navigation" />

Last edited Jul 11, 2014 at 1:16 PM by GrahamMendick, version 4