C# MVC: Search Grid as Partial View to enable AJAX Return?

Question

Hi, 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);

Answer 2

I generally don't like to just post links, I like to code up quick samples, but this CodeProject article I think does the job just right: http://www.codeproject.com/KB/aspnet/JQueryPartial.aspx.

Answer 3

Something I put together a while ago...

I think this will get you started in the right direction. It's a simple search people form using AJAX and a UserControl.