I think your best option will be to create a controller action that returns a partial view which contains your table. The partial view can contain any JavaScript based table/grid you want. This solution has no dependency at all on any specific grid/table implementation.
For instance, let's say you have a strongly typed partial view of type ViewUserControl<IEnumerable<Foo>> named FooList.ascx
You would then define some action in your controller that rendered this partial
// For paging support, you would probably need to modify this action to accept
// a parameter that could be used to tell which records to retrieve.
// This would also require the appropriate route. However, this is beyond
// the scope of this example.
public PartialViewResult List()
{
// get the collection of stuff that you want to display
var items = this.itemRepository.GetItems();
// return the partial
return PartialView("FooList", items);
}
In your view where this partial is going to be used, you will want to have something like the following...
<!-- this <div> will contain the partial, which we will be able to update via AJAX -->
<div id="FooList">
<%-- this assumes a collection of "items" is available in Model.Items --%>
<% Html.RenderPartial("FooList", Model.Items); %>
</div>
<!-- use an AJAX ActionLink to update the table -->
<%=
Ajax.ActionLink
(
"Click Me to Update the Table using AJAX!",
"List",
new AjaxOptions()
{
HttpMethod = "GET",
LoadingElementId = "FooList"
}
)
%>
All we're doing here is using the ASP.NET MVC AJAX Helper to create a link that will generate an AJAX GET request to the List action in your controller. Also, by defining the LoadingElementId property in the AjaxOptions object, we have told the helper that we want to replace the inner contents of <div id="FooList"> with the results of the AJAX request.
When a user clicks that link, an AJAX request will cause your List action to be invoked. Your list action simply returns the rendered contents of the partial view FooList.ascx. The existing contents of the div with id="FooList" will be replaced by the contents that were retrieved from the AJAX request. In the above example, the controller action will always select the same data, which is not really what you want. In a real scenario, you would have to modify the controller action to retrieve the appropriate data for your partial view. I couldn't suggest an effective way for you to handle that without knowing the details for your implementation.
If you don't want to use a link, then just look at the HTML and JavaScript that is generated by the Ajax.ActionLink helper and adapt it to your own needs. For instance, build your own custom helper, or just manually write out the JavaScript.
Lastly, don't forget to include the MVC AJAX JavaScript source files. I recommend including them in your master page. For example:
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>