Render large portion of page using jQuery & AJAX

Question

I have an ASP.NET MVC application with a page that displays a large table of rows & columns of information.

I have a textbox at the top of the page allowing a user to filter the results in the table. I want the user to be able to start typing a word in the textbox and with each keypress, the results in the table to be updated based on the users filter text.

I've done similar things where I simply return a JsonResult response from my Controller, with a couple of small bits of data, but am not sure of the recommended approach if I want to essentially re-render my whole table (with the new data within it) upon each keypress?

I should also mention that the ViewModel I intend to use when the page is first loaded (prior to any ajax stuff happening) contains an IPagedList, as the table data needs to be paginated and sortable.

Answer 1

Take a look at the DataTables plug-in for jQuery. It may match your requirements and provide exactly what you need.

Answer 2

What I would do is to work with JQuery ajax API and also with partial views.

Have a look at following article. It displays how you can be able to manipulate your html seamlessly on ASP.NET MVC :

Working With JQuery Ajax API on ASP.NET MVC 3.0 - Power of JSON, JQuery and ASP.NET MVC Partial Views

http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views

Also, following question might help :

How to pass an array through in JQuery Ajax and how to concieve it in server side?

Answer 3

Have a look at http://knockoutjs.com/ it could be a very good fit for you

Answer 4

You can use the templates to render the html.

i.e Parametrized html + json = to be rendered html

MicroTemplates