Ajax ActionLink HTML Helper in MVC3 Razor

Home » Ajax MVC3 » HTML Helper » MVC 3 » Ajax ActionLink HTML Helper in MVC3 Razor

Ajax ActionLink HTML Helper in MVC3 Razor

Posted by 20Fingers2Brains on Tags: Ajax MVC3 , HTML Helper , MVC 3

AJAX helpers are available through the Ajax property inside Razor view.
Like HTML helpers, most of the methods on this property are extension methods.
The ActionLink method of the Ajax property creates an anchor tag with asynchronous behaviour.
When the link is clicked, the action method is invoked asynchronously by the Javascript.
Ajax ActionLink helper is useful in scenarios where you want to display some information or details on the page without any postback or rediecting to new page.

Demo

Asp.net MVC3 Razor has 12 overload of AJAX ActionLink helper. We will see some of the important ones.

In order to use the Ajax features we need to reference jquery.unobtrusive-ajax.min.js file in the Layout or in the view itself.

Example 1:

View

        @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<div id="myDiv">This is Div element.</div>


@Ajax.ActionLink("Click",
    "AjaxActionLinkDemo",
    new AjaxOptions
    {
        UpdateTargetId = "myDiv",
        InsertionMode = InsertionMode.InsertAfter,
        HttpMethod = "GET"
    })

In the above view we have used AJAX ActionLink helper. The first parameter is the link text to be displayed on UI. The second parameter is the name of the Action method to call. The third parameter is the AjaxOptions parameter. The Ajax options parameter specifies how to send the request, and what will happen with the result the server returns. When clicked the AjaxActionLinkDemo action method will be called and result returned by it will be updated to the element ID specified for UpdateTargetId property.

Controller

        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Web;
        using System.Web.Mvc;

        namespace AjaxHelpers.Controllers
        {
            public class AjaxHelpersController : Controller
            {
                //
                // GET: /AjaxHelpers/

                public ActionResult Index()
                {
                    return View();
                }


                public ActionResult AjaxActionLinkDemo()
                {
                    return View();
                }

            }
        }

The Index is the Action method that renders the view and the link. The AjaxActionLinkDemo is the action method which is called on click of the link.

Snapshot : Before click

Snapshot : After click

The HTML of the View returned by the Action method is rendered on the view from where the Ajax link is clicked asynchronously.

Example 2 : ActionLink with Route values

View

        @Ajax.ActionLink("Click",//link text
    "AjaxActionLinkDemo",//Action method to call
    new {id="1"},//route value
    new AjaxOptions//Ajax options
    {
        UpdateTargetId = "myDiv",
        InsertionMode = InsertionMode.InsertAfter,
        HttpMethod = "GET"
    })

In the above example. we are also passing one parameter to the Action method.

Controller

        public ActionResult AjaxActionLinkDemo(int id)
        {
            return View();
        }

The Action method accepts one parameter which will send from view by ActionLink helper as route value.

Example 3: Passing RouteValueDictionary

View

        @{
            ViewBag.Title = "Index";
            Layout = "~/Views/Shared/_Layout.cshtml";
            RouteValueDictionary dic = new RouteValueDictionary();
            dic.Add("id", 1);
            dic.Add("value", "hello world");
    
}

<h2>Index</h2>
<div id="myDiv">This is Div element.</div>


@Ajax.ActionLink("Click",
    "AjaxActionLinkDemo",
    dic,
    new AjaxOptions
    {
        UpdateTargetId = "myDiv",
        InsertionMode = InsertionMode.InsertAfter,
        HttpMethod = "GET"
    })

In the above example, we have created a collection of type RouteValueDictionary. In short, we will be passing id and value as parameter to the Action method.

Controller

        public ActionResult AjaxActionLinkDemo(int id,string value)
        {
            return View();
        }

The Action method accepts two parameters as per the dictionary defined on the view. You need to make sure that the names of the parameter matches the keys added to the dictionary.

Example 4: Passing the HTMLAttributes

View

        @Ajax.ActionLink("Click",
    "AjaxActionLinkDemo",
    new {id="1"},
    new AjaxOptions
    {
        UpdateTargetId = "myDiv",
        InsertionMode = InsertionMode.InsertAfter,
        HttpMethod = "GET"
    }, new { style = "font-family:comic sans ms;font-size:20px;" })

In the above example, we are passing htmlAttributes as well. We are setting the style property of the anchor.

Snapshot

The link style is changes as specified in the htmlAttributes object.

Summary

AJAX ActionLink method renders an anchor element. When the user clicks the link, MVC asynchronously invokes the specified action method via an HTTP POST request.
The response of that action method can be used to update a specified DOM element, depending on which AjaxOptions are specified.