Link Yourself Rich with Navigation for ASP.NET

In my previous post I introduced a new way of building Single Page Applications for ASP.NET MVC. People asked ‘Is it just ASP.NET Ajax but for MVC?’ The answer’s a resounding ‘No’, but I can understand why they asked because both use Ajax to retrieve server rendered panels of HTML. Read on to see how my new approach embraces Hyperlinks in a way that makes it different not just from ASP.NET Ajax but from all of the other SPA-building frameworks clamouring for the attention of ASP.NET MVC.

A Refreshing Change

In ASP.NET MVC we build a Hyperlink from a route and data. To Navigation for ASP.NET, a Hyperlink returning to the same route is called a Refresh Link and we split its data into two kinds: current data and new data. The current data remembers how the page looks, before the new data comes along and changes it. We’ll revisit the Gmail navigation sample from my previous post to work out the current and new data required to open an email from the second page of the inbox.

Going to the second page

Going to the second page
To go to the second page we need the new start index. We also need the current folder, without which we’d forget we were browsing the inbox. We build the Hyperlink using the RefreshLink extension method passing the new and current data as the second and third parameters.

@Html.RefreshLink("Next", new NavigationData { { "start", 50 } }, "folder")

Opening an email

Opening an email
To open the email we need the new email id. We also need the current folder and start index so we can return to the correct page of our inbox when we close the email. This time, instead of passing the two pieces of current data, we’ll pass true as the third parameter to indicate we want to retain all the current data.

@Html.RefreshLink("Message", new NavigationData { { "id", 1 } }, true)

Get Rich Quick

By starting with the Hyperlinks we should end up with a fast, accessible page working on all devices and visible to all search engines. But how do we turn this page into a Rich Internet Application or SPA? It’s a simple matter of dividing our razor view into panels, indicating when they should be refreshed based on changes to the NavigationData, and letting Navigation for ASP.NET do the rest for us. Navigation for ASP.NET hijacks a Hyperlink’s click event and fetches the changed panels’ HTML over Ajax. It only does this in browsers supporting the HTML5 History API so that the back button and bookmarking still work.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s