Scaffold divs with T4 Template for Foundation 5 in MVC

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

Disclaimer: I have had problems following this tutorial in MVC 5.1, if anyone knows why or how to effectively edit the T4 templates for scaffolding in the most recent versions of MVC please contact me. Use this tutorial at your own risk.

I’m going to relay the instructions I used to do this on my computer. Depending on the version of MVC or Visual Studio, your paths may be a bit different. You should get the idea though. Also realize that I am tailoring my template for use with Zurb’s Foundation 5, so for tht reason you will see the classes I use for my responsive grid, if you are not using a Responsive framework like Foundation or Bootstrap, just omit the class attribute on the div or create your own.

Let’s get started:

1.) Go to: C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 4\CodeTemplates\AddView\CSHTML

2.) Copy that folder into your Solution and put it inside a folder called “CodeTemplates”

3.) Delete every file inside except List.tt (I wouldn’t have files in this folder unless you are using them. Once you are done with this one you can repeat the process for each of the other files originally in this folder.)

4.) In the properties for the List.tt file change

Build Action: NONE
Browse To Url: BLANK
Copy to Output Dir: DO NOT COPY

5.) Rename the file to List_Div and then Edit the file to work how you want. And when you then go to scaffold List_Div will be a new option. YOu have to do this for every project you want this functionality for. But I just copy the directory into each project when I start a new one. I have a Views folder specifically for Bootstrap projct, FOundatons Projects, etc….

I will give you an example of what my Foundation t4 template: List_F5.tt file looks like, I am only going to show you the lines that are important to change (approximately line 49 through 128:

   <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title><#= mvcHost.ViewName #></title>
</head>
<body>
<#
    PushIndent("    ");
}
#>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="row">
    <div class="large-12 columns">
<#
List<ModelProperty> properties = GetModelProperties(mvcHost.ViewDataType);
foreach (ModelProperty property in properties) {
    if (!property.IsPrimaryKey && property.Scaffold) {
#>
    <div class="medium-1 columns">
        @Html.DisplayNameFor(model => model.<#= property.ValueExpression #>)
    </div>
<#
    }
}
#>
    <div class="medium-3 columns"></div>
</div>

@foreach (var item in Model) {
  <div class="medium-12 columns">
<#
foreach (ModelProperty property in properties) {
  if (!property.IsPrimaryKey && property.Scaffold) {
#>
  <div class="medium-1 columns">
      @Html.DisplayFor(modelItem => <#= property.ItemValueExpression #>)
  </div>
<#
    }
}

string pkName = GetPrimaryKeyName(mvcHost.ViewDataType);
if (pkName != null) {
#>
  <div class="medium-3 columns">
      <a href="@Url.Action("Edit", "Edit", new { id=item.<#= pkName #> })">
      <i class="fa fa-pencil"></i></a> |
      <a href="@Url.Action("Details", "Details", new { id=item.<#= pkName #> })">
      <i class="fa fa-file"></i></a> |
      <a href="@Url.Action("Delete", "Delete", new { id=item.<#= pkName #> })">
      <i class="fa fa-times"></i></a>
  </div>
<#
} else {
#>
  <div class="medium-3 columns">
      <a href='@Url.Action("Edit", "Edit", new { /* id=item.PrimaryKey */ })">
      <i class="fa fa-pencil"></i></a> |
      <a href="@Url.Action("Details", "Details", new { /* id=item.PrimaryKey */ })">
      <i class="fa fa-file"></i></a> |
      <a href="@Url.Action("Delete", "Delete", new { /* id=item.PrimaryKey */ })">
      <i class="fa fa-times"></i></a>
  </div>
<#
}
#>
    </div>
}

</div>
<#
// The following code closes the asp:Content tag used in the 
// case of a master page and the body and html tags in the case 
// of a regular view page
#>
<#
if(mvcHost.IsContentPage) {
#>
<#
} else if(!mvcHost.IsPartialView && !mvcHost.IsContentPage) {
    ClearIndent();
#>
</body>
</html>

Leave a Reply

You must be logged in to post a comment.