MVC4 WebGrid in dialog hangs in IE and no pagination in Chrome

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>