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

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.