Question

Do PartialViews used in conjunction with $(‘#container’).load() html updates work with webgrids? I have used PartialViews to make updates to a regular html table but I can’t get the following to work using a webgrid that is wrapped in a div.

Everything comes back from my action controller that returns a PartialView in the javascript() function in the form of an updated built using the webgrid but the div is not updating the webgrid table contents when I call load() within the javascript function.

Here are some code snippets:

Main Index View (this is being populated from an Index action with all rows in my model):
(Page contains a webgrid and a dropdownlist)

@model IEnumerable<Models.Person>
@Html.ListBox("CStatus", null, new { style = "width:104px;" })   @*Multiselect that invokes the filter*@
  <div id="gridview" class="gen">@Html.Partial("_Persons", Model)</div>  @*Main Webgrid

    <script type="text/javascript">
        $("select").multiselect({
            click: function (event, ui) {
                alert('hello');
                $.get('@Url.Action("Filter")', function (data) {
                    window.alert('New filtered data coming from action!');
                    window.alert(data);  @*This comes back with new <table>... html data*@
                    $('#gridview').load('@Url.Action("Filter")', data);  @*not updating table data*@                               
                });
            }
        });
</script>

Rendered Webgrid:

<div id="gridview">
    <table class="webgrid"><thead><tr class="head"><th scope="col">  <MORE COLUMN DEFS...then just basic html tr/td tags....
</table>
</div>

Controller Action:

   public ActionResult Filter()
    {
        IList<Person> cs = cs = db.Persons.OrderByDescending(x => x.Id).ToList();
        return PartialView("_Persons", cs);
    }

_Persons.cshtml Shared/Partial Template to dispaly webgrid :

@model IEnumerable<Models.Person>
@{           
    var grid = new WebGrid(source: Model,   
        rowsPerPage: 50);

}

    @grid.GetHtml(
        tableStyle: "webgrid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
        grid.Column("PersonId", "Id"),
        grid.Column("PersonName", "Name")
   )

Answer 1

Visit this below links:-

http://geekswithblogs.net/jdothoffman/archive/2011/04/01/mvc-3-updating-the-content-of-a-webgrid-revisited.aspx

http://evolpin.wordpress.com/2011/04/26/asp-net-mvc-partial-view-and-ajax-real-world-example/