Using MDL with ASP.NET MVC and Custom Scaffolding

Home / Using MDL with ASP.NET MVC and Custom Scaffolding

Microsoft’s new perspective on open-source has been beneficial because they now include jQuery (an open-source JavaScript library) and Bootstrap (a CSS and Javascript based theme framework) out of the box in Visual Studio. These are widely popular and extremely useful libraries for getting a responsive Web application up and running quickly.

Recently, Google has released it’s Material Design specification, which includes a snazzy look and feel that has been incorporated into Android devices for some time. With that comes the client-side css and javascript libraries, called Material Design Lite (MDL) to implement this design1682058 in a Web application. So, if the Bootstrap themes that come baked into ASP.NET MVC are not ridiculously good-looking enough for you, you can edit your MVC scaffolding (the templated code-generation) to include this new look.

Below we will review the steps needed to customized MVC scaffolding for Create, Delete, Details, Edit, and List pages.

  1. Refer to the Get MDL website to place file references in your _Layout.cshtml file.
  2. Add a folder to the top level of source code named CodeTemplates, then add the folder MvcView under that.
  3. You will need to paste in Code Templates that are in your Visual Studio installation directory (Program Files or Program Files (x86)) so we can customize them later.
  4. Go to C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates\MvcView
  5. Copy the cs.t4, Delete.cs.t4, Details.cs.t4, Edit.cs.t4, List.cs.t4, Imports.include.t4, and ModelMetadataFunctions.cs.include.t4 files into your CodeTemplates folder (this is assuming you are working in C#). This step tells Visual Studio to use your local copies of the scaffolding T4 templates. We can customize these to change the output.
  6. If you are using source control, commit your CodeTemplates folder. This will allow us to see the changes that are made in future steps.
  7. Download Unstoppable’s Create.cs, Delete.cs, Details.cs, Edit.cs, and List.cs files into the MvcView folder. You can perform a Dff on the files to see the HTML markup and CSS that changed to use MDL instead of Bootstrap. Right-click on the Controllers folder and select Add new Controller
  8. Select MVC 5 Controller with views… and click Add
  9. Enter a name, select a Model, and click Add

You will see that the output now has MDL css classes in it. Granted, this is a very simple example. You will still need to alter your _Layout and other default files that come with a new MVC project to make the whole site pretty, but this will get you started with an MDL theme going forward. Feel free to make updates to your local copies of the files to fit your design.

(Code for all these examples is available on Unstoppable’s GitHub: https://github.com/UnstoppableSoftware/MDLinMVC)

Before:

ASP.NET MVC MDL Example

After:

MDL ASP.NET MVC Examples

Free Project Cost Estimation Tool

Software_system_cost_estimation_tool_-_provided_by_unstoppable_software_v1_0_xlsx

Download this free Microsoft Excel Project Estimator tool to gain some insights into what your software development project might cost! Fill out the form at the right to download this FREE resource.

Powered by ConvertKit
Nathan Stuller
Nathan Stuller
Nathan Stuller is Development Manager and Lead Developer at Unstoppable. He enjoys problem solving for big companies, working in new technologies, and driving our projects to successful completion.
Recommended Posts

Leave a Comment

Start typing and press Enter to search

change management success