Question

I have a grid that contains Contacts. It automatically shows contacts when people go to the /contacts/ URL. In a separate box, people can filter those by different criteria. I want to refresh only the grid, not the entire page, whenever different criteria are applied.

In order to achieve this, would I put the Contacts Grid by itself in a partial view, and somehow return the partial view via AJAX later?

Please give me a hint in the right direction. Thank you:)

Answer 1

The most straightforward method is probably to use the jQuery AJAX API to request the method. You then use the Request.IsAjaxRequest() property in your controller to see if the request was made with AJAX – if so, you return only the PartialView from the Controller action.

---

Some code examples:

In your view, you could have the following markup:

<div id="gridContainer">
    <% Html.RenderPartial("ContactsGrid", ViewData.Model); %>
</div>

(assuming your contacts are contained in the Model object, and the view is strongly typed…)
You then have the following javascript code called when you want to update the grid:

$('#gridContainer').load('/contacts/', { filterParameter: andItsValue });

You could also append the filter parameter in the URL, if your routes support that.

In your controller action, you do the following check before returning:

if(Request.IsAjaxRequest()) {
    return PartialView("ContactsGrid", contacts);
}
return View(contacts);