MVC Framework Ajax Support - MVC Framework

How the Ajax supports MVC framework?

Ajax is a well-known shorthand for Asynchronous JavaScript and XML. MVC Framework consists built-in support for unobtrusive Ajax and users can use helper methods for defining Ajax features without adding a code throughout all the views. This feature in MVC is based on the jQuery features.

For enabling unobtrusive AJAX support in MVC application, open Web.Config file and set the UnobtrusiveJavaScriptEnabled property inside appSettings section, using below code. If the key is already present in your application, ignore this step.

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

After this, open the common layout file _Layout.cshtml file located under Views/Shared folder. Add references to the jQuery libraries here using below code

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript"> </script> <script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript"> </script>

Create an Unobtrusive Ajax Application

In the example shown below, create a form which displays a list of users in the system and place a dropdown which has 3 options: Admin, Normal, and Guest. After selecting one of these values, it displays a list of users belonging to this category using unobtrusive AJAX setup.

Step 1 − Create a Model file Model.cs and copy below code.

using System; namespace MVCAjaxSupportExample.Models { public class User { public int UserId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateTime BirthDate { get; set; } public Role Role { get; set; } } public enum Role { Admin, Normal, Guest } }

Step 2 − Create a Controller file named UserController.cs and create two action methods inside that using below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using MVCAjaxSupportExample.Models; namespace MVCAjaxSupportExample.Controllers { public class UserController : Controller { private readonly User[] userData = { new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin}, new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin}, new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal}, new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal}, new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest} }; public ActionResult Index() { return View(userData); } public PartialViewResult GetUserData(string selectedRole = "All") { IEnumerable data = userData; if (selectedRole != "All") { var selected = (Role) Enum.Parse(typeof (Role), selectedRole); data = userData.Where(p => p.Role == selected); } return PartialView(data); } public ActionResult GetUser(string selectedRole = "All") { return View((object) selectedRole); } } }

Step 3 − Now create a partial View named GetUserData with below code. This view will be used for rendering a list of users based on the selected role from the dropdown.

@model IEnumerable<MVCAjaxSupportExample.Models.User> <table> <tr> <th> @Html.DisplayNameFor(model => model.FirstName) </th> <th> @Html.DisplayNameFor(model => model.LastName) </th> <th> @Html.DisplayNameFor(model => model.BirthDate) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td> @Html.DisplayFor(modelItem => item.BirthDate) </td> <td> </td> </tr> } </table>

Step 4 − Now create a View GetUser with below code. This view will asynchronously get the data from the previously created controller's GetUserData Action.

@using MVCAjaxSupportExample.Models @model string @{ ViewBag.Title = "GetUser"; AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "tableBody" }; } <h2>Get User</h2> <table> <thead> <tr> <th>First</th> <th>Last</th> <th>Role</th> </tr> </thead> <tbody id="tableBody"> @Html.Action("GetUserData", new {selectedRole = Model }) </tbody> </table> @using (Ajax.BeginForm("GetUser", ajaxOpts)) { <div> @Html.DropDownList("selectedRole", new SelectList( new [] {"All"}.Concat(Enum.GetNames(typeof(Role))))) <button type="submit">Submit</button> </div> }

Step 5 − lastly, change the Route.config entries to launch the User Controller.

Defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

Step 6 − Run the application which looks like below screenshot.

If Admin is selected from the dropdown, it will go and fetch all the users with Admin type. This is happening via AJAX and does not reload the entire page.