IgniteUI ASP.NET MVC Scaffolding Support

With the introduction of Visual Studio 2013 it has become quite easy to generate CRUD code in your ASP.NET MVC app with just a couple of clicks. The scaffolding support is also seamlessly integrated with Entity Framework. There are numerous resources which give a detailed overview of the new scaffolding support; here are a few of them:

http://www.asp.net/visual-studio/overview/2013/aspnet-scaffolding-overview

http://www.codeproject.com/Articles/685210/CRUD-Operations-Easy-with-New-Scaffolding-Feature

One of the little secrets behind scaffolding is that it uses T4 templates that can be modified both globally, as well as per project, and this makes the feature very flexible – for instance, we can generate Ignite UI specific Views which render an Ignite Grid for the “List” operation, instead of the standard template. I’ve done just that, and would like to give you a short overview about how it works and how you can use it in your projects.

Once you’ve created your ASP.NET MVC project, you need to create a CodeTemplates folder, and paste the contents of C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates

there. Now you’re ready to modify the default templates. The following article gives an overview of this customization process, which is pretty straightforward:

http://weblogs.asp.net/imranbaloch/archive/2013/09/15/customizing-the-asp-net-mvc-5-web-api-2-scaffolding-templates.aspx

Now, locate the MvcView => List.t4 file, and edit it with the following contents:

<#@ template language="C#" HostSpecific="True" #>
<#@ output extension=".cshtml" #>
<#@ include file="Imports.include.t4" #>
@using Infragistics.Web.Mvc

@model IQueryable<#= "<" + ViewDataTypeName + ">" #>
<#@ include file="Header.cs.include.t4" #>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
    @(Html.Infragistics().Grid<IQueryable<#= "<" + ViewDataTypeName + ">" #>>().Width("100%")  
        .RenderCheckboxes(true)
        .Features(features => {
                features.Sorting();
		features.Updating();
            })     
	.DataSource(Model)
        .Virtualization(true)
        .VirtualizationMode(VirtualizationMode.Continuous)
	.Height("500px")
        .DataBind()
        .Render()
	)

<#@ include file="Footer.cs.include.t4" #>
<#@ include file="ModelMetadataFunctions.include.t4" #>

As you can see, our template is completely agnostic to the data model, there is nothing hardcoded there. You can, of course, make this contents whatever you prefer - you can enable features, add extra markup above and below the grid, etc. 

Now, whenever you select the “Add => New Scaffolded Item…” dialog and choose your data model class, instead of some plain HTML, you will see an Ignite Grid on your page, without the need to copy/paste or manually create any View markup. 

I am also attaching a working project. The only prerequisite is that you have the Adventure Works database installed, since I am using it in the sample. Also please make sure to select “Enable NuGet package restore”, so that any dependencies that you don’t have in the GAC are automatically downloaded and installed by NuGet (this can be done by right-clicking on the VS solution and selecting this from the context menu).