WebGrid Ajax.. how to make it work with MVC 4 W/Razor

Question

I started working on WebGrid with MVC 4 and I able to display the paginating/sorting and its work as expected.... if i try to make it with with ajax then its doing the full post.

View: - Partial View: (_hostajax.cshtml)

@model IEnumerable<issoa_ef.host>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

    @{  
        var grid = new WebGrid(
            Model, rowsPerPage: 2,
            defaultSort: "HostFirstName", ajaxUpdateContainerId: "ajaxgrid");
    }

<div id="ajaxgrid">
    @grid.GetHtml(
                tableStyle: "gridTable",
                headerStyle: "gridHead",
                footerStyle: "gridFooter",
                rowStyle: "gridRow",
                alternatingRowStyle: "gridAltRow",
        columns: grid.Columns
        (
            grid.Column("HostFirstName", header: "First Name", format: @<text>@Html.ActionLink((string)item.HostFirstName, "Details", "Host", new { id = item.HostId }, null)</text>),
                            grid.Column("HostMiddleName", header: "Middle Name"),
                            grid.Column("HostLastName", header: "Last Name"),
                            grid.Column("HostEmailAddress", header: "eMail Address")
                        )
        )
</div>

Controller:

    public ActionResult Index()
    {
        var model = db.host.ToList();
        if (Request.IsAjaxRequest())
            return PartialView("_hostajax", model);
        else
            return View(model);
    }

Index page:

<h2>@ViewBag.Message</h2>
<p>
    @Html.ActionLink("Request Deployment", "CreateDeployment")
</p>
@Html.Partial("_hostajax", Model)

Answer 1

I've made a similar application. The grid was not using ajax, but just GET method to switch pages. This happened cos grid's javascript was breaking with "jquery is not defined" error. When I added the jQuery the grid started using ajax.

see MVC 4 WebGrid and Jquery produces two errors. JQuery is undefined and a sort error after ajax model change for the "jquery is not defined" error.