Question

I’m trying to callback into my ViewResult Index() controller action from an ajax call to update the page contents based on a dropdown select but my view is not re-updating (re-rendering).

I have set breakpoints and the index() action in the controller is being executed as invoked from the ajax ‘get’ and the model is being passed off to the view (breakpoints are being hit in the view as well).

View:

  @* Contains code to build a webgrid and display data based on the model passed in... *@
  @* Contains a couple of dropdowns for filtering *@
  @* 
     Catch the select event from a dropdown and call back into the view to re-update page contents
     for filter requests.
  *@
    <script type="text/javascript">
        $("select").multiselect({
            click: function (event, ui) {
               $.ajax(
               {   type: "GET",
                   url: '@Url.Action("Index","Data")',
                   data: { FilterRequest: (ui.checked ? 'checked' : 'unchecked') },
                   success: function () {
                   alert('hello again');
               }
             })
            }
        });
</script>

Controller:

// GET: /Data/
public ViewResult Index(string FilterRequest)
{
    IList<DataModel> dataResult;
    if (FilterRequest == null)
    {   // Not a filter request so just update grid with full contents
        dataResult = db.DataObjs.OrderByDescending(x => x.id).ToList();
    }
    else
    {   // Filter request so update grid with filtered data
        dataResult = db.DataObjs.Where(/*Build some filtered stuff here*/).OrderByDescending(x => x.id).ToList();
    }            

    // Build some sub totals based on the resultset from above result set to display
    // Other business logic number mashing here to display in other grids on the same view

    return View(dataResult);
 }

Answer 1

You’re not doing anything with the response of the $.ajax call.

Something like this:

$.ajax(
{   
   type: 'GET',
   url: '@Url.Action("Index","Data")',
   data: { FilterRequest: (ui.checked ? 'checked' : 'unchecked') },
   dataType: 'html',
   success: function (html) {
      $('#somecontainer').html(html);
   } 
});

Also, you can’t return a full view (e.g a HTML page) from your action method – you need to either return a PartialView, or a JsonResult which you can iterate over and manualy bind the contents.

For a partial view, you need something like this:

return PartialView(dataResult);

It all depends on what your trying to re-render. If the HTML you require to re-render is complex, then use a partial view. If it’s simply a bunch of data that is to be shoved into an input element (e.g a dropdown list), you should save on the HTTP payload over the wire and use JsonResult.