Asp.Net MVC Ajax refresh of table contents

Question

Currently I have a table on my page which I need to refresh using Ajax. I was intending to render the table in a partial view and then just call an MVC render-partial update, which would have been nice and simple.

However, I've since added a bunch of sorting/filtering controls in the header of the table. I would now like to refresh the content of the table without losing this information in the header rows.

I'm not sure what the cleanest solution to this is. My table will probably contain around 500 rows. Could someone offer some advice? Thanks

Answer 1

I use ajax calls to actions that return json data, and deal with the rendering on the client with jquery or some simular librery. i think that this is the best way to work with MVC

Answer 2

First, make your table a partial view and put the table in a div and give an ID (something like "mytablediv")

In your view, refer to the partial view using Html.RenderPartial

In the javascript when you need to refresh the portion call something like this: (I assume jquery is available)

$('#mytablediv').load(url /* of the partial view*/);

This will get the updated html from your partial view and replace it with what you had.

Answer 3

I think that javascript template's may be a workable solution here.

The following may be of assistance.

1. http://stackoverflow.com/questions/170168/jquery-templating-engines
2. http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

Another option is to to server side rendering to render the tr's and update the tbody element only of the table assuming you have a table with a tbody section and a thead section that contain your filters. The ajax function setup will need to have a UpdateTargetId = "tbody-id"