Question

I’m new to MVC so have some conceptual issues. I have a WebGrid that populates with data from a viewmodel, and with that is a DropDownList that the user can select how many records to return (50, 100, etc.), which is also a property on the VM. I have set the DDL’s onchange client side event to fire this.form.submit() and my controller action gets the POST. The trouble is logic for refreshing the view doesn’t fire. The View simply updates the selected value in the DDL.

/* Controller actions */

public ShopsController()
{
    ViewBag.PageList =
    new SelectList(new[] { 10, 15, 25, 50, 100, 1000 }
        .Select(x => new { value = x, text = x }), "value", "text");
}

[HttpGet]
public ActionResult Index()
{
    var model = new ShopsViewModel();
    return View(model);
}
[HttpPost]
public ActionResult Index(int RowsPerPage)
{
    var model = new ShopsViewModel();
    TryUpdateModel(model);
    return View(model);
}

The View uses JSON to update the data in the grid so it can be paged using the technique Malcolm Sheridan blogged about here. I’ve snipped code for brevity.

    <script type="text/javascript">
    $(function () {
        // fire JSON request to initially fill grid
        $.getJSON("/Shops/ShopsPager", null, function (d) {
            $("#grid").append(d.Data);

            $("#DataTable tfoot a").live("click", function (event) {
                event.preventDefault();
                OnPageClick($(this).text() );
            });
            $("#tLinks a").live("click", function (event) {
                event.preventDefault();
                OnPageClick($(this).text() );
            });
        });
    });
</script>
@Html.BeginForm();
    // this is the DDL that when changed, I want the view to refresh using the new value
    <div class="rlinks" style="float:right;">Display&nbsp;
         @Html.DropDownList("RowsPerPage", ViewBag.PageList as SelectList, 
           new{onchange= "this.form.submit();"})&nbsp;Items per page
    </div>
    <div id="grid" class="gridWrapper">
        <!-- the grid get inserted here by the JSON callback
    </div>

So what happens is the page loads and the JSON call fetchs the WebGrid with the number of rows currently specified in Model.RowsPerPage property. Change it from say 25 to 50 the submit() fires and the Index() POST action gets called. The parameter is correct and TryUpdateModel() correctly updates the value of RowsPerPage. The action returns the default view with the updated model, but the View does not refresh, it does not perform the JSON call. Since I’m not really really sure how this routing and AJAX works together this is probably something simple.

Answer 1

Since you are trying to Postback the page, in which Postback is eliminated in MVC, you are just trying to refresh the page, but what actually refreshes your grid is your $.getJSON call to /Shops/ShopsPager. Instead, don’t postback your page, just call the getJSON again on DDL onchange event.

Assuming your /Shops/ShopsPager accepts a parameter RowsPerPage like your Index.

$(document).ready(function(){
    // Fires Initially.
    GetPage(null);
});

function GetPage(data) {
    var passedData;
    if(data == null)
        passedData = null;
    else {
        passedData = $(data).val();
    }

    // Assuming called action accepts RowsPerPage parameter.
    $.getJSON("/Shops/ShopsPager", { "RowsPerPage" : passedData }, function (d) {
        $("#grid").append(d.Data);

        $("#DataTable tfoot a").live("click", function (event) {
            event.preventDefault();
            OnPageClick($(this).text() );
        });
        $("#tLinks a").live("click", function (event) {
            event.preventDefault();
            OnPageClick($(this).text() );
        });
    });
}

and your DDL onchange just call GetPage()

<div class="rlinks" style="float:right;">Display&nbsp;
     @Html.DropDownList("RowsPerPage", ViewBag.PageList as SelectList, 
       new{onchange= "GetPage(this);"})&nbsp;Items per page
</div>