CODEWITHSUNDEEP
htmlasp.net-mvct4scaffolding
Eric Bishard
Eric Bishard

Reputation: 5341

How can I replace ASP.Net's MVC4 View to scaffold out divs instead of tables

This is a question I was just writing and I was able to find the answer, so instead of deleting the question I'm going to go ahead and post it because I didn't find an answer specifically answering the question with a detailed answer.

Upvotes: 1

Views: 175

Answers (1)

Eric Bishard
Eric Bishard

Reputation: 5341

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>

Upvotes: 1

Related Questions