HowTo: AJAX Actionlink & ASP.NET MVC 3

 

imageIn MVC framework there are some little helpers existing I´ve already written about in this blogpost – but in fact the functionality changed a little bit so here is an update for you.

 

Problem: AJAX Actionlink delivers new sides back

We have a standard MVC 3 Web Project and the following lines should create a link which is able to reload a view via AJAX and put it into the “Result”:

    @Ajax.ActionLink("Foobar load", "Foobar", "Home", new AjaxOptions() { HttpMethod = "Get", UpdateTargetId = "Result" })

image

After pressing the button normally the View has to be reloaded via AJAX but there is no request send by AJAX. Why?

image

Javascript libraries are missing

In the standard – masterpage jQuery is already linked but the AJAX library is still missing. In this case MVC3 offers the MS AJAX libraries but we don´t need them anymore.

For AJAX we need the jQuery.unobtrusive-ajax.js (or the min.js) file!

image

<!DOCTYPE html>
<html>
<head>
    ...
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>
...

Take a look into the HTML and you will find a little surprise!

image

If this looks different by everyone else: Important are also the following adjustments in the web.config (these are standard on every new project).

  <appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

Unobtrusive Javascript? What?

What is the whole “unobtrusive Javascript” about? In fact it´s about keeping the side operable and no JS Eventhandler for example is integrated at the a-Tag. It will be integrated via the data-attribute.

Here is a Screenshot from a great presentation about the subject:

image

Unobtrusive JavaScript with jQuery

View more presentations from Simon Willison

Pure jQuery

Of course you don´t need to use AJAX helper it will also work with the jQuery Standard tools:

$(function() {
    $('#mylink').click(function() {
        $('#AjaxTestDiv').load(this.href);
        return false;
    });
});

Like always a great help: Stackoverflow Smiley

[Download Sample Code]

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

About the author

Written by

Learn more about our team.

8 Responses

  1. Hi, im learning to put some Ajax requests, and coming under this issue when i click the link more than once, it does not make a request back to the server.
    Currently my link is updating a partial view which is being returned by one of the actions (returning a randomly created class with random values). However when i click on the link again, somehow the browser remembers the resposnse and auto populates the div.
    Is there some attribute required to force the browser to make a request?

    Reply
  2. Never mind, found this link which demystifies this issue.
    http://forums.asp.net/t/1681358.aspx/1?Disable+cache+in+Ajax+ActionLink+extension+method+in+asp+net+MVC

    Html.ActionLink will still be cached by IE and not FF.

    Reply
  3. Hey, you download link for sample code is invalid. The files to download is not found!

    Reply
  4. Thanks!! People as you made the world a better place

    Reply

Comment on this post

Recent Posts

  • How to access an Azure Website with the local IIS Manager

      Since the end of February it is possible to access an Azure Website with the IIS Manager. Although the Azure Management site offers some information’s there are more details visible at the IIS Manager.   For the connection you will need an IIS Manager and the IIS Manager for Remote Administration Extension. It’s also […]

  • image1929-570x143_thumb.png
    Create and validate own Json-Web-Tokens (JWTs)

    If you are interested in web authentication you probably have heard about JSON Web tokens (JWT). What is a JWT? Maybe I’m not using the correct security termination but however: JWTs are used to exchange claims between two systems. For example: You want to log on to a service (like Facebook, Twitter, etc.) and want […]

  • Micro-Optimization: how to shrink or „embed“ pictures

      I’m currently working on the “CodeInside Dashboard” and since the page structure isn’t that difficult it should be possible to fulfill all of Google Pagespeed or Yahoos YSlow recommendations. One of the rules was to optimize the 4 PNGs that are embedded on the page.   Before – without optimization: Below you can see […]

  • image1979-570x194.png
    Move to Windows Azure – VMs, Word Press Migration, DNS changes

    Since mid January this blogs runs on a WordPress installation in an Azure VM. Because I always thought that the subject is quite complicated this blogpost offers a view behind the scenes. Why this move? So far this blog (both German and English Version) runs on a hoster somewhere in Germany. The main problem with this […]

  • Windows Azure Active Directory – CRUD for users and groups

      Windows Azure Active Directory? If you are not informed about the subject I recommend you to have a look on this Azure Info site. Which resources are there? The Azure AD contains the following entities: - Users - Groups - Contacts - Roles Access to the directory or on the “directory graph” Although the […]

Support us