learned/learning/to learn RSS 2.0
# Sunday, 26 February 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.

<head>
    <title>@ViewBag.Title</title>
    <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>
</head>   


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

[HttpGet]
public ActionResult GetDiamond()
{
    return PartialView("Diamond");
}

[HttpGet]
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;
    }

</script>

Run the application.

image

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

image

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

image

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, 26 February 2012 21:11:27 (GMT Standard Time, UTC+00:00)  #    Comments [0] -
.NET
Comments are closed.
Navigation
Archive
<2017 June>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
About the author/Disclaimer

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

© Copyright 2017
Gokulnath
Sign In
Statistics
Total Posts: 41
This Year: 0
This Month: 0
This Week: 0
Comments: 47
Themes
Pick a theme:
All Content © 2017, Gokulnath
DasBlog theme 'Business' created by Christoph De Baene (delarou)
The new movement has made a number of changes. First, precise instantaneous jump calendar display tag heuer replica large switching time is scheduled for midnight. The power required for this process will slowly build up within hours. Furthermore, LANGE 1 escapement now available eccentric balance weight balance wheel and homemade free omega uk watch sprung. Means provided in the hand-carved balance wheel splint omega replica underneath, 21,600 vibrations per hour. This table also hublot replica retains the reliable double-barrel, power reserve of 72 hours.