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.

  • http://shashidotnet.wordpress.com Shashi

    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?

  • http://shashidotnet.wordpress.com Shashi

    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.

  • Pingback: Blue Ray Plus - Latest Technology News

  • Pingback: Ajax.Pager not working in MVC4

  • http://twitter.com/jeanlopes Jean Lopes

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

    • http://code-inside.de/blog-in Code Inside Team

      Oh sorry – the link should be fixed now.

  • http://twitter.com/jeanlopes Jean Lopes

    Thanks!! People as you made the world a better place

  • Pingback: Ajax.Pager not working in MVC4 - ASP.NET Solution - Developers Q & A

Recent Posts

  • Time-controlled Azure WebJobs – Azure as easy as it get‘s

        While still in development the Azure WebJob SDK offers some cool features for procession and supply of information. A good example is the sample that observes the Azure Queue and processes an item as soon as it spots one.   Scenario: time-controlled activities – without queue and so on My scenario was quite […]

  • image2021-570x194_thumb.png
    HowTo: Create RSS Feeds with ASP.NET MVC

    I’ve already written about how to consume RSS or Atom Feeds with the SyndicationFeed (in German, sry) but todays post is about how to create or publish an own feed. Beside the age of the feed standard and the much defamation from Facebook, Twitter and Google on RSS/Atom I consider this easy to consume API […]

  • image1997-311x194_thumb.png
    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 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 possible to […]

  • 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 […]

Support us