New Ajax Grid Scaffolding NuGet Package for MVC 3

asp.net mvc, asp.net, code 0 comments suggest edit

EDITOR’S NOTE:Microsoft has an amazing intern program. For a summer, these bright college students work with a feature crew getting real work done, all the while attending cool events nearly every week that, frankly, make the rest of us jealous! Just look at some of the perks listed in this news article!

This summer, the ASP.NET MVC is hosting an intern, Stephen Halter, who while very smart, doesn’t have a blog of his own (booo! hiss!). Being the nice guy that I am (and also being amenable to bribes), I’m letting him guest author a post on my blog (first guest post ever!) to talk about the cool project he’s been doing.

Editor Update:A lot of folks are wondering why we built our own grid. The plan is to build this on top of the jQuery UI Grid when it’s complete. It’s not done yet so we built a scaled down implementation to allow us to test out the interactions with ASP.NET MVC controllers and make sure everything is in place. It’s mostly T4 files that extends our existing Add Controller Scaffolding feature. You can tweak the T4 to build any kind of grid you want.

Hello everyone – my name is Stephen Halter, and I am a summer intern on the ASP.NET MVC team who is excited to show you the new Ajax grid scaffolder that I have been working on for ASP.NET MVC 4. Phil has graciously allowed me to use his blog to get the word out about my project.

We want to get some feedback before releasing the scaffolder as part of the MVC Framework, and we figured what better way to get feedback than to release a preview of the scaffolder as a NuGet package?

To install the package, search for “AjaxGridScaffolder” in the NuGet Package Manager dialog or just enter the following command

PM> Install-Package AjaxGridScaffolder

in the Package Manager Console to try it out.

The NuGet package, once installed, registers itself to the Add Controller dialog as a ScaffolderProvider named “Ajax Grid Controller.” When run, the scaffolder generates a controller and corresponding views for an Ajax grid representation of the selected model and data context class.

The Ajax grid controller scaffolder has many similarities to the current “Controller with read/write actions and views, using Entity Framework”, but it provides pagination, reordering and inline editing of the content using Ajax.

Add > Controller menu
selection

Template Selection - Ajax Grid
Controller

Currently, the Ajax Grid Scaffolder only generates C# code, but both Razor and ASPX views are supported. We’ll add VB.NET support later. If you selected “None” from the Views drop down in the Add Controller dialog, only the controller will be generated.

The generated controller has 8 actions. There is Index, Create (POST/GET), Edit (POST/GET), Delete (POST), GridData, and RowData. Most of these actions probably sound familiar, but there are a few that might not be obvious. The GET versions of Create and Edit provide editing widgets to the client using HtmlHelper.EditorFor or HtmlHelper.DropDownList if the property is a foreign key. The GridData action renders a partial view of a range of rows while RowData renders a partial view a specific row given its primary key. These *Data actions aren’t very verby (editor’s note: “verby?” Seriously?) and improved naming suggestions are welcome.

Solution explorer view of the project
structure

The scaffolder also provides three views: Index, GridData, and Edit. The Index view includes JavaScript and small amount of CSS required to make the Ajax grid usable. Due to all the possible ways a master or layout page can be done, it isn’t possible to ensure that JavaScript and CSS will be included in the <head> element of the document. However, we are looking at possible fixes for the MVC 4 release.

clip_image005

The GridData and Edit views are partial views that are rendered when retrieving non-editable and editable rows respectively via XMLHttpRequest instances (XHRs) using jQuery. Sending HTML snippets in response to XHRs (as opposed to JSON for example) makes using DisplayFor, EditorFor and ValidationFor more natural and progressive enhancement simpler.

With or without JavaScript, the Index view provides pagination and reordering by column. With JavaScript enabled, rows can be created/edited/deleted all inside the grid without ever leaving the index view.

Tell us what your thoughts are on the Ajax Grid Scaffolder. Is it important to you that we support editing without JavaScript? Do you want the back button to take you to your previous view of the grid? Do you have any suggestions on how to clean up the generated code? Did you encounter any bugs/issues? If so, we want to know.

Tags: aspnetmvc, asp.net, ajax, jquery, grid

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

46 responses

  1. Avatar for Jayesh Dhobi
    Jayesh Dhobi August 17th, 2011

    This is very good update in MVC3. It is useful to developer to make fast development.

  2. Avatar for Kazi Manzur Rashid
    Kazi Manzur Rashid August 17th, 2011

    Looks neat, the first thing MS should address the proper use of Http verbs and status codes. No more POST for update, instead use PUT, same goes to delete, 201 when a resource is created, currently none of the action result takes extra http status codes. Add some kind of helper methods which adds the CRUD routes in route table. example:
    /products - GET - returns list of products
    /products - POST - creates new product
    /products/{id} - PUT - updates existing product
    /products/{id} - DELETE - deletes product
    The default controller which the scaffolder generates does not at all friendly when you use framework like backbone/spine.

  3. Avatar for KKBruce
    KKBruce August 17th, 2011

    Waiting VB. Thanks.

  4. Avatar for Carsten Petersen
    Carsten Petersen August 17th, 2011

    Finally some great grid scaffolding =) But it seams like there is a bug when clicking Edit. The GET request uses parameters which isn't valid (imo).
    Controller Action:
    Edit(string id)
    Request Parameter (in Firebug):
    __ID__?_=XXXXXXXX
    (My entity key is named "ID")

  5. Avatar for Remy
    Remy August 17th, 2011

    You say this also supports ASPX views. You mean Webforms? Do you have an example on how to use it with Webforms?

  6. Avatar for Michiel Post
    Michiel Post August 17th, 2011

    Tried it out and it's cool!
    - Can the Create/Save/Cancel get a fixed width? If you have a row with only two columns, these buttons get really big.
    - Sorting, maybe just one arrow instead of two. Only show the arrow that displays the current sort order. It makes the table header less cluttered.
    - Add a scaffolding option that also generates regular create/edit pages. I don't always want to show and edit all the data in the grid. Most of the time I only show the important columns. Less regular data can be edited through a regular edit page.
    Thanks for the great NuGet package!

  7. Avatar for Andrew Wrigley
    Andrew Wrigley August 17th, 2011

    Great effort, but...
    ...Should it be an intern developing these things? Should this kind of scaffolding not be a central part of ASP.NET MVC updates?
    Eg, Menus, Wizards, etc, etc.

  8. Avatar for Al
    Al August 17th, 2011

    Make the controller RESTful to make interaction with other stuff easy and you are on to a winner. If you added the option of a choice between returning JSON or PartialViews it would be very helpful. Even if we just had a scaffolder to implement RESTful json controller/repositories it would be extremely useful and encourage best practice!

  9. Avatar for Justin
    Justin August 17th, 2011

    @Andrew,
    I agree. There needs to be a stock datagrid as part of the mvc core although the grid from mvccontrib is pretty nice. Why was this not done by the mvc team early on?

  10. Avatar for Scott Galloway
    Scott Galloway August 17th, 2011

    Really nice...(and really Phil, you commenting on proper english usage ;)). I do wonder if you're not duplicating work already done on stuff like jqGrid...it has way more functionality (obviously being an older product), would it not be worthwhile exploiting the investment MVC already made in jQuery and expanding that to some of the preexisting controls?
    Oh, and for the guy commenting on interns...ASP.NET interns ain't 'normal' interns...as a general rule they're 99th+ percentile devs :)

  11. Avatar for Simon Bartlett
    Simon Bartlett August 17th, 2011

    @Scott Galloway I get your point about jqGrid, but IMO it's heavy, clunky, and just plain ugly. If only the jQuery UI Grid was ready, huh?
    To those who are commenting about interns; I'm sure DevDiv would not just hand a project over to be solely worked on by an intern. I'm sure the intern will be working in a team, and having to follow the same quality processes as the rest of the team.
    A good intern program is one where adequate attention is given to the intern and what they're doing; not one in which the intern is given a task to complete by themselves and then abandoned. I mean the whole point of an intern program is to get real-world experience, and in DevDiv that will involve being a part of a product team, following processes including code reviews and design phases.

  12. Avatar for Abox
    Abox August 17th, 2011

    it doesnt propose me any scaffolding... do i miss something?

  13. Avatar for Sam
    Sam August 17th, 2011

    I like what you've done here. It mimics a fair amount of my own personal real-world data-grid-like MVC creations. However, I don't really think that this needs to be part of the MVC core. Doing that makes me think web forms (drag-n-drop) data grids, etc. (yuck!). I guess it's a fine and dandy thing to add to a scaffolding nuget package and include with a project template, I'm just weary about this giving way to "demo-able" features that are not very "real-world usable".

  14. Avatar for Craig Stuntz
    Craig Stuntz August 17th, 2011

    Thanks for asking for feedback.
    Yes, back button support is important. It's also not hard. I got it working for jqGrid, which didn't support it; see my GitHub fork here:
    https://github.com/CraigStuntz/jqGrid/wiki
    Regarding adding this as an MVC *framework* feature, I think if you limit yourself to one grid you've already lost. As someone pointed out above, the jQuery UI grid is coming out RSN.
    However, it's possible to make an interface which supports multiple grids. I have a prototype of such a thing here:
    http://anygrid.codeplex.com/
    These are all very solvable problems.

  15. Avatar for David Ruttka
    David Ruttka August 17th, 2011

    Index is a noun in this context, so I wouldn't worry too much about "verbiness". Perhaps GridData can become Rows, and RowData can become Row. If you still want alternatives, perhaps consider something like Set and Single, or Rows and Row.

  16. Avatar for David Ruttka
    David Ruttka August 17th, 2011

    Yeah, I repeated myself in that last comment. Still waking up. :)

  17. Avatar for Ben
    Ben August 17th, 2011

    I was looking for something to quickly toss together some data admin tools for a site I've been working on. This looks perfect. Great post.

  18. Avatar for magellin
    magellin August 17th, 2011

    Pretty sweet. I'd like to see what we can do for something like DataTables or the upcoming jQuery UI grid in the future.

  19. Avatar for Thiago Custodio
    Thiago Custodio August 17th, 2011

    How to do that if I'm using Dependency Injection to persist my entities? I won't have the data context class, this will be handled by my service layer that I'll inject on my controller.

  20. Avatar for haacked
    haacked August 17th, 2011

    Hi all, thanks for the comments.
    @Scott Galloway: The plan for this grid is to build it on the jQuery UI Grid. However, that grid is not yet complete, so we built a simpler one to test out the interactions with the server.
    Once that's released, we'll rebuild on that one.
    @Kazi we can look into that. One problem today using PUT is that it doesn't work by default in some IIS configurations and not many folks realize it. So if we did that by default, you deploy your application, what worked locally might not work in your deployed server.
    @Craig This grid just hooks into the existing Controller Scaffolder extensibility built into ASP.NET MVC's Add Controller dialog. It's really just a collection of T4 files with some glue code.
    So anyone can take what we did, tweak the T4 files, and scaffold onto any Ajax grid implementation.
    @Andrew We only hire the smartest interns. And the intern works with a mentor. Also, the feature team reviews the code and will take ownership of the code when the summer is over.

  21. Avatar for Stephen Halter
    Stephen Halter August 18th, 2011

    @Carsten
    Do the &lt;tr&gt;s genertated by the GridData partial view contain a data-pkey attribute? If not, the scaffolder either found more than one column in the primary key (something which I hope we will support in the future) or didn't find a primary key at all.

  22. Avatar for Gabriel Rodriguez
    Gabriel Rodriguez August 18th, 2011

    @Remy no, he means the ASPX ViewEngine (with .aspx file extension). Razor uses .cshtml.

  23. Avatar for Lavisnki
    Lavisnki August 18th, 2011

    I would like to see json supported as well as html for the grid data. Paging through data is something I do only if a free scrolling approach is not applicable.

  24. Avatar for Scott Galloway
    Scott Galloway August 21st, 2011

    Ah, excellent, knew you'd be on the ball here. (Fingers crossed about jQuery UI Grid, some of the existing jQuery UI stuff is a little messy)

  25. Avatar for Jessica
    Jessica September 4th, 2011

    It seems you're not generating properly escaped SQL. I got an EntitySqlException: 'set' is a reserved keyword and cannot be used as an alias, unless it is escaped.
    At least the Entity Framework seems able to catch your security holes...

  26. Avatar for fitz
    fitz September 13th, 2011

    ok - so I used this a few times - one time it was fine -
    The last time I used it the Edit/Delete buttons never come up - how did that happen - the columns for those are stuffed in some 'hidden' class - what gives?
    :/

  27. Avatar for Dave
    Dave September 19th, 2011

    Hi,
    I installed the package and gave it a whirl with an EF4.1 (database first) model annotated using metadata classes.
    The package fails reporting that it is unable to retrieve metadata for the object and that the supplied connection is not valid because it contains insufficient mapping or metadata information.
    Suggestions?

  28. Avatar for Tone
    Tone October 27th, 2011

    Vb, vb, vb, vb...
    Is c# the new script kiddie language (in that anyone can do it)? My winder for today ;)
    That should be my sig but just wondering if any progress.
    Looks like good work from what I see here but don't want to nuget to C# until. I have a project to use it with.
    Don't forget grouping is all I have to say :)

  29. Avatar for sunil
    sunil November 26th, 2011

    Do I need jqgrid installed to use this. Getting an error when creating controller code.
    Modified config file for remote loading but still showing same error. Any help appreciated.

  30. Avatar for BhaktaVatsal
    BhaktaVatsal December 14th, 2011

    We need an excellent grid within an MVC that can beat the control vendors :-) of course they won't be happy but making it native to any offering is what makes it kind of better choice for enterprises, since no one wants to bind themselves to control vendors these days.
    nice work, and will be waiting for the grid release that can be used heavily in financial industries in MVC 4.

  31. Avatar for Benjamin
    Benjamin January 19th, 2012

    Can this be executed/scaffolded from the Package Manager console?

  32. Avatar for Parihar
    Parihar February 3rd, 2012

    Its a webgrid problem in mvc3 from my side.
    I made a shopping cart application. I want to get details of selected product from a product table in webgrid.
    Can anyone help me to find the column value of a selected row in webgrid using javascript and send this to another page using session.

  33. Avatar for afro
    afro February 14th, 2012

    Hi,
    I'm trying to find T4 templates
    1). ListViews like these the only exception is that I want Add/Edit views in popup.
    2). Master Details or ListViews with tabcontrols every tab having the Add/Edit based on webgrid not jqGrid
    3). Popup selections
    is there anyone who has any idea about it, thanks

  34. Avatar for Jim
    Jim February 15th, 2012

    yes history is important, but also what about filtering?

  35. Avatar for Loften Pierce
    Loften Pierce August 10th, 2012

    I would like to use this in MVC4? I installed it, but don;t see it when I add controller.

  36. Avatar for Jamie
    Jamie August 31st, 2012

    Hi
    This is a fantastic package, vb version would be great but it is easy enough to use in c#.
    One question:
    All fields are editable, how do you make some cells in the row read only?

  37. Avatar for Richard C
    Richard C September 14th, 2012

    Hi,
    It's Sept 2012 and I'm using VS 2012 Express with a MVC4 project.
    I installed the latest package
    PM> Install-Package AjaxGridScaffolder
    but the "Add Controller" dialog doesn't show the Template ?
    Any ideas ?
    Thx, Richard C

  38. Avatar for Robert Wagnon
    Robert Wagnon October 26th, 2012

    Awesome! I've been surprised that there aren't more Scaffolding projects in the internet.

  39. Avatar for Robert Wagnon
    Robert Wagnon October 26th, 2012

    The installation script loads the DLL Assembly, but it is inaccessible after. An error says "make sure that the assembly containing this type is loaded"
    I can confirm that it is loaded by executing this in the Visual Studio Package Powershell: [System.Threading.Thread]::GetDomain().GetAssemblies() | sort -property fullname | format-table fullname

  40. Avatar for Greg Gilmore
    Greg Gilmore January 11th, 2013

    Thanks for the template.  Great Job!!

  41. Avatar for Greg Gilmore
    Greg Gilmore January 23rd, 2013

    It's easy to edit the individual views that the package generates to do this

  42. Avatar for zaksan
    zaksan November 30th, 2013

    Edit and Delete not working .Please help me....

  43. Avatar for haacked
    haacked December 2nd, 2013

    Please post a question with details on stackoverflow.com and I'll help get the right people to look at it.

  44. Avatar for zaksan
    zaksan December 4th, 2013

    Create Works good!

    But Edit and Delete don't work

  45. Avatar for passion
    passion April 27th, 2015

    Nice article, its really easy to understand and implement.

    http://www.getmscode.com

  46. Avatar for Les Stockton
    Les Stockton December 20th, 2017

    any chance of getting this to work in MVC5 and Visual Studio 2017?