MVC4 WebGrid in dialog hangs in IE and no pagination in Chrome - asp.net-mvc-4

Question

MVC4: I am new to using WebGrid with MVC. Code below produces WebGrid inside dialog, but pagination does not work in Chrome ( blank page displayed) and in IE : dialog with WebGrid shown , but IE hangs (seem to be doing something and then hangs, no chance to try pagination even).
What is wrong with my code?
Thank you
HomeController.cs
public ActionResult MyReport (int id) // get here on click in SelectList
{
List<MyLocation> myl = MyLocation.GetAllLocations(31); // static method in MyLocation model
return View(myl);
}
public ActionResult MyLocationDetails (int id)
{
LocationDetails ld = new LocationDetails();
List<LocationDetails> model = ld.GetTestLocationDetails(); //model has 20 records
return PartialView(model); // MyLocationDetails partial view to be displayed in Dialog
}
MyReport.cshtml View that should display dialog
#model IEnumerable<MyLocation>
#Html.ActionLink("Location Details", "MyLocationDetails", null, new { id = 234 }, new { #class = "LocDetails" })
<div id="LocDetails-dialog"></div>
<script type="text/javascript">
$(function () {
$('#LocDetails-dialog ').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$('.LocDetails').click(function() {
$('#LocDetails-dialog ').load(this.href, function() {
$(this).dialog('open');
});
return false;
});
});
</script>
MyLocationDetails.cshtml
#model List
<div>
#if (Model != null)
{
if (Model.Count != 0)
{
<div id="divLocDetails">
#{WebGrid grid = new WebGrid(source: Model,
rowsPerPage: 5,
canPage: true
);
grid.SortDirection = SortDirection.Ascending;
}
#grid.GetHtml(
htmlAttributes: new { id = "LocDetails" },
mode: WebGridPagerModes.All,
firstText: "First",
previousText: "Prev",
nextText: "Next",
lastText: "Last",
columns: new[] {
grid.Column("city", header: "City", canSort: true),
grid.Column("country", header: "Country", canSort: false)
}
)
</div>
}
else
{
<label>No results</label>
}
}
</div>