Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

ASP.NET MVC 4 SPA Navigation with Sammy.js

, 28 Jan 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
I am learning from John Papa's Single Page Apps with HTML5, Web API, Knockout and jQuery

I am learning from John Papa’s "Single Page Apps with HTML5, Web API, Knockout and jQuery" on Pluralsight. The course outlines building an application called "Code Camper".  The "Code Camper" sample is very effective at showing an end to end SPA design.  It leverages a bunch of open source libraries and can be a lot to take in all at once.  One of the libraries used is called Sammy.js.  I decided it would beneficial to focus on just Sammy.js library which is the focus of this blog post.

If you are like me then you are also new to Single-Page Applications.  I find it helpful to start with a simple definition.  Wikipedia defines SPA as a "web application…that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.  In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from the web server, usually driven by user actions."

ASP.NET MVC versus Single Page Application

Suppose you have a HTML, JavaScript and CSS application loaded in a browser.  If you look at the home page source, you might notice a series of anchor elements containing hypertext links to other areas within your application such as an "About" page.  If you build a SPA version of this application versus a traditional ASP.NET MVC version, it would be difficult to tell them apart by inspecting the HTML only.  The anchor tags would look very very similar if not identical.

In a standard MVC application, when the User clicks on the "About" hyperlink, MVC’s routing would find the server-side controller which would create a HTML page on the server and navigate the browser to this new page.

In a SPA, when the User clicks on the "About" hyperlink, the client side HTML is dynamically manipulated all within the client’s browser using standard HTML, JavaScript and CSS.  Since a costly server trip is avoided, the result is typically "a more fluid user experience".  To pull this off, typically a SPA loads more data in memory upfront to enable the application to stay on the client.

Sammy.js is an open source library that Code Camper leverages to help pull off the SPA behavior but at the same time keep all the good things the browsers do for us such as history management, etc.   Its pretty slick.

For me, the following question captures one of the cool features of Sammy.js:  "How can I create a standard HTML anchor tag that when the user clicks, instead of requesting a resource on the server, I can intercept the request on the client and call a JavaScript function?"  Let me show you an example that answers this question.  This example is a modified version of the example provided in the following blog post.

http://mikehadlow.blogspot.com/2010/11/sammyjs.html#/ My version mimics how Code Camper works as well.  Thanks Mike Hadlow for this very simple example.

Step by Step

Create a new ASP.NET MVC4 Internet Application Project called "MVC4Sammy or download the finished code here.

Right click on References and click on "Manage NuGet Packages…".  search for Sammy.js and click "Install"

In the root of the project, add a "MVC 4 View Page (Razor) called "Index.cshtml".

image

  1: <!DOCTYPE html>
  2: <html>
  3: <head>
  4:     <meta name="viewport" content="width=device-width" />
  5:     <title>Sammy Test</title>
  6:     <script src="Scripts/jquery-1.8.2.js"></script>
  7:     <script src="Scripts/sammy-0.7.2.js"></script>
  8:     <script src="Scripts/sammy_test.js"></script>
  9: </head>
 10: <body>
 11:     <div id="header">
 12:             <h1>Sammy Test</h1>
 13:             <a href="#/one">one</a>
 14:             <a href="#/two">two</a>
 15:             <a href="/#three">three</a>
 16:             <a href="HtmlPage1.html">HtmlPage1</a>
 17:             <a href="http://www.promodel.com">ProModel</a>
 18:         </div>
 19:         <div id="main">
 20:             <section class="main">
 21:                 @RenderPage("Views/Partial1.cshtml")
 22:                 @RenderPage("Views/Partial2.cshtml")
 23:                 @RenderPage("Views/Partial3.cshtml")
 24:             </section>
 25:         </div>
 26: </body>
 27: </html>
 28:

Delete all the files from "Views" folder.  Right click on the empty "Views" folder and Add a partial "View" called Partial1.

image

Put the following code in Partial1.cshtml.

<section id="partial1-view" class="view">
    <div>Hello from Partial 1</div>
</section>

Repeat for Partial2 and Partial3 but change the section ids.

image

Add a new "JavaScript file" in the "Scripts" folder called "sammy_test.js".  Put the following code:

  1: (function ($) {
  2:
  3:     var app = $.sammy('#main', function () {
  4:
  5:         this.get("#/one", function (context) {
  6:             $(".view").hide();
  7:             $("#partial1-view").show();
  8:         });
  9:
 10:         this.get("#/two", function (context) {
 11:             $(".view").hide();
 12:             $("#partial2-view").show();
 13:         });
 14:
 15:         this.get("/#three", function (context) {
 16:             $(".view").hide();
 17:             $("#partial3-view").show();
 18:         });
 19:     });
 20:
 21:     $(function () {
 22:         app.run('#/');
 23:     });
 24:
 25: })(jQuery);

Modified root Web.Config webpages:Enabled to true.

image

Add a new "Html Page" to the root called "HtmlPage1".  Put any text in the body.

Set Index.cshtml as Start Page and Run.

Highlights

Similar to Code Camper, this example MVC4 SPA creates a root view called "index.cshtml" containing a series of @RenderPage calls against some partial views.  The partial views represent the various modules within an application.  Each partial view is declared within a "Section" element with a unique id and a shared class called "view".

image

In the "sammy_test.js" file, you will see code registering "get" routes with JavaScript functions such as:

image

When the user clicks on a link that goes to "#/one", that function will be called instead of requesting a resource from the server.  The JavaScript code hides any element with a class called "view" then immediately shows any element with a id value of "partial1-view".

There are probably a million ways to do this but this example shows how the client is dynamically manipulated without going to the server.


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DapperDanH
Chief Technology Officer PROMODEL Corporation
United States United States
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionNice Article PingroupSuraj Sahoo Mindfiresolutions20-Apr-14 1:05 
QuestionIs '#/' compulsary in the url PinmemberAaditya parcha19-Mar-14 20:58 
GeneralMy vote of 5 PinmemberMohammad Sepahvand26-Apr-13 5:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 28 Jan 2013
Article Copyright 2013 by DapperDanH
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid