[ASP.NET MVC] Unobtrusive Ajax [1] – Overview

The MVC framework includes unobtrusive Ajax. It is named “unobtrusive” because it does not require add JavaScript code for yourself. You can make use of “jQuery” library.

1. Enabling Unobtrusive Ajax

At first, you need to enable the “Unobtrusive Ajax” feature in “Web.config”

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

This setting is “True” by default. This setting is also used for the “unobtrusive client validation” feature.

 

2. Adding jQuery Libraries

You need to add 2 script files. In general, you are using the layout file.’

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

 

3. Using Unobtrusive Ajax Forms

Most commonly, Ajax is used with HTML forms. To creating an Ajax-enabled forms:

  • Create an “AjaxOptions” object
  • Create a form with “Ajax.BeginForm” instead of “Html.BeginForm

 

4. AjaxOptions Properties

AjaxOptions” provides the following properties:

  • Confirm: displays a message before making the Ajax request
  • HttpMethod: “Get” or “Post”
  • InsertionMode: “InsertAfter”, “InsertBefore”, and “Replace” (the default)
  • LoadingElementId: an HTML element that is displayed during the loading
  • LoadingElementDuration:  in milliseconds
  • UpdateTargetId: the target ID of the HTML element
  • Url: the request URL

 

5. Simple Ajax Request

Let’s start with the simplest example.

public class Product
{
  public int ProductID { get; set; }
  public string Name { get; set; }
}

The controller class has the following actions:

public class AjaxController : Controller
{
  public ViewResult ViewProduct()
  {
    return View();
  }

  [HttpPost]
  public ViewResult ViewProduct(int id)
  {
    return View("ViewProduct", id);
  }

  public PartialViewResult ProductDetail(int id)
  {
    // needs to get a product
    Product p = new Product { ProductID = id, Name = "Toy" };
    return PartialView(p);
  }
}

And the you need a main view “ViewProduct.cshtml”

@{
  ViewBag.Title = "ViewProduct";
  AjaxOptions ajaxOpts = new AjaxOptions {
    UpdateTargetId = "productDetail" };
}

<h2>View Product</h2>

@using (Ajax.BeginForm("ProductDetail", ajaxOpts))
{
  <div>
  Type the product Id: @Html.TextBox("id")
  </div>
  <div>
  To see the detailed information of the product:
  <input type="submit" value= "Click Me" />
  </div>

<div id="productDetail">
</div>

Finally, you need a view for Ajax result “ProductDetail.cshtml”

@model Mvc3App.Models.ProductModel.Product
<div>@Model.ProductID</div>
<div>@Model.Name</div>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s