Before reading this article, we recommend you get the source code by filling out the form below:
Get the Source Code!!
Enter your information and we'll email you the source code described in this article, so you can begin using MDL with ASP.NET immediately!
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.
We hope this article was helpful and please feel free to contact us if we can help at all!