title: mvc 3 postback does not refresh screen
body: <p>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.</p>
  
  <p>/* Controller actions */</p>
  
  <pre><code>public ShopsController()
  {
      ViewBag.PageList =
      new SelectList(new[] { 10, 15, 25, 50, 100, 1000 }
          .Select(x =&gt; 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);
  }
  </code></pre>
  
  <p>The View uses JSON to update the data in the grid so it can be paged using the technique Malcolm Sheridan <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=618" rel="nofollow">blogged about here</a>. I've snipped code for brevity.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(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() );
              });
          });
      });
  &lt;/script&gt;
  @Html.BeginForm();
      // this is the DDL that when changed, I want the view to refresh using the new value
      &lt;div class="rlinks" style="float:right;"&gt;Display&amp;nbsp;
           @Html.DropDownList("RowsPerPage", ViewBag.PageList as SelectList, 
             new{onchange= "this.form.submit();"})&amp;nbsp;Items per page
      &lt;/div&gt;
      &lt;div id="grid" class="gridWrapper"&gt;
          &lt;!-- the grid get inserted here by the JSON callback
      &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>