Ajax.ActionLink and Html.ActionLink in MVC

Ajax.ActionLink is much like the Html.ActionLink counterpart, it also creates the hyperlink <a href="">Click here</a> but when the user clicks it and has a JavaScript enabled browser, Ajax.ActionLink sends the asynchronous request instead of navigating to the new URL. With the Ajax.ActionLink we specify what controller's action method is to be invoked and also specify what to do with the response coming back from the action method.

Let's create an Ajax.ActionLink helper that will send an asynchronous request to the action method and will update the DOM with the result. Look at the demo GIF screen and then follow the steps from here to develop it.

You can see, I have selected some text and then clicked on the links to prove it is really an async link.

Step 1

At first we need an Ajax.ActionLink that will send the async request, so here we go:

<h2>Customers</h2>  
@Ajax.ActionLink("Customer from Germany", // <-- Text to display  
                 "Germany", // <-- Action Method Name  
                 new AjaxOptions  
                 {  
                     UpdateTargetId="CustomerList", // <-- DOM element ID to update  
                     InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element  
                     HttpMethod = "GET" // <-- HTTP method  
                 })  
@Ajax.ActionLink("Customer from Mexico", // <-- Text to display  
                 "Mexico", // <-- Action Method Name  
                 new AjaxOptions  
                 {  
                     UpdateTargetId="CustomerList", // <-- DOM element ID to update  
                     InsertionMode = InsertionMode.Replace, // <-- Replace the content of DOM element  
                     HttpMethod = "GET" // <-- HTTP method  
                 })  
<div id="CustomerList"></div>  
@section scripts{  
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")  
} 

In the code above, you can see that I have created two Ajax.ActionLinks, one to display the list of customers from Germany and another to display the list of customers from Mexico, all will be called asynchronously. We have not specified which controller to access, so by default it will look in the same controller. Here is the generated HTML by both Ajax.ActionLink.

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#CustomerList" href="/Home/Germany">Customer from Germany</a>

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#CustomerList" href="/Home/Mexico">Customer from Mexico</a>

The unobtrusive jQuery uses the data-ajax prefix for JavaScript to invoke action methods on the server rather than intrusively emitting inline client scripts.

When we will click the link it will make a GET HTTP method call and the returned result will be updated to a DOM element by Id "CustomerList".

Always remember to place a reference of the jquery.unobtrusive-ajax.js library file after jquery-{version}.js file references, we can use bundling also. If you don't include the jquery.unobtrusive-ajax.js or do it incorrectly, then when you click the link to the view list of countries, an async result will be opened on the new browser tab.

Also, ensure that the unobtrusive JavaScript is enabled in your web.config (it should be by default).

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

Step 2

Now, let's go ahead and implement the "Germany" and "Mexico" action methods that will return a PartialView.

NorthwindEntities db = new NorthwindEntities();  
public PartialViewResult Germany()  
{  
    var result = from r in db.Customers  
                    where r.Country == "Germany"  
                    select r;  
    return PartialView("_Country", result);  
}  
public PartialViewResult Mexico()  
{  
    var result = from r in db.Customers  
                    where r.Country == "Mexico"  
                    select r;  
    return PartialView("_Country", result);  
}

So, in both of the PartialViewResult methods I have used a LINQ query that will filter records on country and then pass the results to a partial view page "_Country.cshtml". I have placed this file in the "Shared" folder so that any view can access it. Let's move on to see the partial view page "_Country.cshtml".

Step 3

I made this view page strongly typed by using @model and then iterated through the model data to create a nice tabular format.

@model IEnumerable<MvcActionLink.Models.Customer>  
<table>  
    <tr>  
        <th>  
            @Html.DisplayNameFor(model => model.ContactName)  
        </th>  
        <th>  
            @Html.DisplayNameFor(model => model.Address)  
        </th>  
    </tr>  
@foreach (var item in Model) {  
    <tr>  
        <td>  
            @Html.DisplayFor(modelItem => item.ContactName)  
        </td>  
        <td>  
            @Html.DisplayFor(modelItem => item.Address)  
        </td>  
    </tr>  
}  
</table>

Now, you all set to run the application.

Hope this helps.