learned/learning/to learn RSS 2.0
# Sunday, February 26, 2012

Some of the disadvantages of using MVC AJAX ActionLinks returning partial views are:
1.    We cannot bookmark the pages with AJAX returned content, as AJAX calls don’t change the URLs. For eg., say we have an AJAX actionlink on the home page called “contact”, and  when we click it returns a partial page that gets loaded inside a div tag. If the page is bookmarked, the URL is just going to render the home page without the contact information.
2.    If we want our users to view the AJAX actionlink returned content by directly entering the URL, then we have to create a full view, and in the controller we have to check whether it is an AJAX request (Request.IsAjaxRequest), and if so, return the partial view; else, return the full view.
3.    Browser back/forward button clicks will not do anything.

We can overcome all these problems using hash tags. Gmail is a very good example of an AJAX application; each and every left menu click event just changes hash tag and loads content asynchronously.

Say we are supposed to build a website to render shapes like circle, diamond and star asynchronously, and users should be able to use all the features mentioned above.

How to do?
1.    Create a MVC Application (I’m using MVC 3).
2.    Include jquery.js and jquery.unobtrusive-ajax.js files on the layout page.
3.    Download jQuery history plugin from
here, and include it too.

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.history.js")" type="text/javascript"></script>

Create 3 actions in the controller that returns 3 partial views based on the action.
public ActionResult GetCircle()
    return PartialView("Circle");

public ActionResult GetDiamond()
    return PartialView("Diamond");

public ActionResult GetStar()
    return PartialView("Star");

Add 3 views circle.cshtml, diamond.cshtml and star.cshtml. To keep things simple, just add a div tag in each view with appropriate css class.

Circle.cshtml file’s content:
<div class="circle"></div

Diamond.cshtml file’s content:
<div class="diamond"></div>

Star.cshtml file’s content:
<div class="star"></div

Get the styles from
here and add it to your layout page.

Now, add 3 action links:

@Ajax.ActionLink("Render Circle", "GetCircle", null, 
    new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('circle')" }, 
    new { @id = "circle" })

@Ajax.ActionLink("Render Diamond", "GetDiamond", null, 
    new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('diamond')" }, 
    new { @id = "diamond" })

@Ajax.ActionLink("Render Star", "GetStar", null, 
    new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "divContent", OnSuccess = "AddHashTag('star')" }, 
    new { @id = "star" })

These actionlinks will call the action methods on the controller, and replace the div tag “divContent” (should be added on the page) content with the returned content. These actionlinks will also call javascript method AddHashTag if the AJAX calls get executed successfully.

Add the script block mentioned below. The AddHashTag function adds “hashTag” parameter as the hash tag to the url. The other function (from jquery history plugin) checks for hash tag, and if found, triggers click event. In this example, I’m just passing the tag’s id to the AddHashTag function.

<script type="text/javascript">

    $(function () {
        $.history.init(function (hash) {
            if (hash.length > 0) {
                $("#" + hash).click();
        { unescape: ",/" });

    function AddHashTag(hashTag) {
        window.location.hash = hashTag;


Run the application.


When we click “Render Circle” link, circle.cshtml partial view will be returned and hash tag “circle” will be appended to the url.


To render star, we can click “Render Star” or enter http://localhost:60129/#star, which will render:


We can bookmark these links and use browser back/forward buttons.

We are done with the application, you can modify the AddHashTag function or the AjaxLinks according to your needs.

Please let me know if you have any questions.

Here is the source code -

Sunday, February 26, 2012 9:11:27 PM (GMT Standard Time, UTC+00:00)  #    Comments [0] -
<February 2012>
About the author/Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2020
Sign In
Total Posts: 41
This Year: 0
This Month: 0
This Week: 0
Comments: 47
Pick a theme:
All Content © 2020, Gokulnath
DasBlog theme 'Business' created by Christoph De Baene (delarou)