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 design 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.
- Refer to the Get MDL website to place file references in your _Layout.cshtml file.
- Add a folder to the top level of source code named CodeTemplates, then add the folder MvcView under that.
- 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.
- Go to C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web\Mvc\Scaffolding\Templates\MvcView
- 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.
- If you are using source control, commit your CodeTemplates folder. This will allow us to see the changes that are made in future steps.
- Download Unstoppable’s Create.cs, Delete.cs, Details.cs, Edit.cs, and List.cs files into the MvcView folder. You can perform a Diff 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
- Select MVC 5 Controller with views… and click Add
- 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.
Before:
After:
We hope this article was helpful and please feel free to contact us if we can help at all!
