12 Using Ajax Action Links With Partial Views

1. Install Microsoft.JQuery.Unobtrusive.Ajax package using NuGet (if it is not already installed)
   Check the existance of the two files:
   /Scripts/jquery.unobtrusive-ajax.js
   /Scripts/jquery.validate.unobtrusive.js\

2. Add the jquery unobtrusive files to the script bundle
   Modify the code in /Add_Start/BundleConfig.cs as follows:
   Note: The jquery.unobtrusive-ajax is dependent on jquery, so it has to add after jquery.\

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js",
    "~/Scripts/jquery.unobtrusive-ajax.js"
    ));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.validate*",
    "~/Scripts/jquery.validate.unobtrusive.js"
    ));

3. Check that Unobtrusive JavaScript is enabled to true in App.config (It is enabled by default)

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

4. Change the target view to include the Ajax link and the div container
   /Views/Department/Index.cshtml

@Ajax.ActionLink("Faculties", "ListFaculties", new { id = item.Id }, new AjaxOptions { UpdateTargetId = "FacultyList", HttpMethod = "GET", InsertionMode = InsertionMode.Replace })
...
<div id="FacultyList"></div>

5. Implement the action method that returns the partial view
   /Controllers/DepartmentController.cs/ListFacultiesPartial()

// GET: /Department/ListFaculties/5
public PartialViewResult ListFacultiesPartial(int id)
{
    var users = db.Faculties.Where(d => d.DepartmentId == id).ToList();
    var model = new List<FacultyViewModel>();
    foreach (var user in users)
    {
        model.Add(new FacultyViewModel
        {
            Id = user.Id,
            Email = user.Email,
            FirstName = user.FirstName,
            LastName = user.LastName,
            Speciality = user.Speciality,
            Level = user.Level,
            Department = user.Department.Name,
        });
    }

    return PartialView(model);
}

6. Add the partial view
   Note: By conventions the partial view names end with Partial
   /Views/Department/ListFacultiesPartial.cshtml

@model IEnumerable<SchoolWebApp.ViewModels.FacultyViewModel>
@if (Model.Count() <= 0)
{
    <p>There are no faculties in this department</p>
}
else
{
    <h3>List of Faculties</h3>
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FirstName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LastName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Speciality)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Speciality)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", "Faculty", new { id = item.Id }, null) |
                    @Html.ActionLink("Details", "Details", "Faculty", new { id = item.Id }, null) |
                    @Html.ActionLink("Delete", "Delete", "Faculty", new { id = item.Id }, null)
                </td>
            </tr>
        }
    </table>
}