MvcContrib Ajax Sorting and Paging with jQuery
I started a new project at Codeplex for the MvcContrib/jQuery tinkering I’ve been doing. You can find it here, and it’s titled “MvcContrib Ajax Sorting and Paging with jQuery”. I created a jQuery plugin that wraps around the MvcContrib Grid and Pager outputs (no more extending MvcContrib), and utilizes jQuery.ajax() to offers server-side paging and sorting. In addition, I created some new tidbits:
- a new HtmlHelper I wrote outside of MvcContrib, entitled PageDropDown, that gives a “page x of y” dropdown.
- a scrollable grid with fixed headers that is about 90% complete (separate issues in Firefox and IE)
My good friend Chris made me realize that I don’t need to extend MvcContrib at all — by utilize jQuery, I can augment the MvcContrib library output and convert the grid header and pager items into links. As long as the user utilizes the right controller signature, everything works excellently.
I invite everyone to check out my project “MvcContrib Ajax Sorting and Paging with jQuery”, and let me know what you think.
I was quite interested to see how you’ve done the sorting using the MvcContrib Grid as this is something I’ve been trying to include in my project. Unfortunately it looks like the sample project that you have here doesnt work properly. Is there a more complete sample I could try?
The sample at http://mvcajax.codeplex.com/ isn’t working for you? What error are you getting?
Make sure you read the readme.txt, and modify the .js file appropriate to match the routes you’re using.
Thanks, I’ve got it working now, and it works really well. The old RTFM story eh?
How would I go about altering it so that all the html/javascript code all sits in the aspx page? We have a lot of tabular data that we need to display on our site, and I would prefer to have it all contained in one aspx, rather than creating a partial for each of them.
I’m not sure how I would need to alter this line if I remove the PeepsGrid partial.
$(“#awesome_grid”).mvcajax(“/Grid/Sort/”, “PeepsGrid”, {});
Interesting approach, Paul. I’m afraid that as it is now the jquery plugin wouldn’t help you achieve this. Basically what we’re doing is taking HTML and putting it into the “#awesome_grid” DIV element. It needs to retrieve the grid rendered in HTML from somewhere, and it uses a partial for it.
The instructions for rendering the HTML from the grid need to exist on the server somewhere, and the partial view has these instructions. It needs to be re-rendered every time you sort and page, so it’s important that these server-side instructions be situated on the server so that the ASP.Net engine can merge your data with these instructions and generate the HTML.
The downside with having everything in one .ASPX page is that you’re going to run into trouble re-processing only part of it. I can envision using an old-school UpdatePanel perhaps, but that’s definitely outside of the current capabilities of the MvcAjax plugin.
I suggest having partial grids (an MvcAjax grid view, if you will) so that the server is working on bite sized chunks of code anyway. This’ll limit the bandwidth and server resources to the absolute minimum.