将 Visual Studio 2017 MVC 视图脚手架更新为 Bootstrap 4 [英] Update Visual Studio 2017 MVC View Scaffolding to Bootstrap 4

查看：22
本文介绍了将 Visual Studio 2017 MVC 视图脚手架更新为 Bootstrap 4的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚将我的 Visual Studio 2017 ASP.NET MVC 5 应用程序从 Bootstrap v3 更新到了 v4.我发现当我添加一个新的编辑部分视图 使用脚手架，它仍然使用 Bootstrap v3 CSS 类名作为表单.有没有办法更新脚手架以使用 BS v4?

编辑

我在说什么似乎有些混乱.

在 Visual Studio 2017 中，在 MVC 项目中，在解决方案资源管理器中，右键单击 Views 文件夹 >添加 >查看... >MVC 5 视图单击添加.

这会打开添加视图"对话框.我输入我的视图名称，选择编辑模板并选择，对于这个例子，LoginVm 作为模型类.Visual Studio 生成此标记.这个过程称为脚手架.

@model Demo.ViewModels.LoginVm@using (Html.BeginForm()){@Html.AntiForgeryToken()<div class="form-horizo​​ntal"><h4>登录Vm</h4><小时/>@Html.ValidationSummary(true, "", new { @class = "text-danger" })<div class="form-group">@Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })

<div class="form-group">@Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">@Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })

<div class="form-group"><div class="col-md-offset-2 col-md-10"><input type="submit" value="Save" class="btn btn-default"/>

}<div>@Html.ActionLink("返回列表", "索引")

注意正在使用的 Bootstrap 3 类，例如 form-label 和 col-md-offset-2.这些在 Bootstrap 4 中被删除了.同样，如果你要创建一个新的布局页面，它会生成一个 Bootstrap 3 Navbar，这在 Bootstrap 4 中是无效的.

所以我问是否有办法(除了编写自定义脚手架)更新 Visual Studio 以停止输出 Bootstrap 3 特定标记，理想情况下，输出 Bootstrap 4 标记?

解决方案

尚无更新可用，但要支持 Visual Studio 2017 中 Bootstrap 4 的编辑视图脚手架，您必须编辑文件 Edit.cs.t4在%ProgramFiles%Microsoft Visual Studio2017CommunityCommon7IDEExtensionsMicrosoftWebMvcScaffoldingTemplatesMvcView"

<#@ template language="C#" HostSpecific="True" #><#@ output extension=".cshtml" #><#@ include file="Imports.include.t4" #>@model <#= ViewDataTypeName #><#//只有 System.Web.Mvc 5.1.0.0 或更高版本的所有 EditorFor() 支持form-control"属性，除了 checkbox，它在 Bootstrap 中使用 divstring boolType = "System.Boolean";Version requiredMvc​​Version = new Version("5.1.0.0");bool isControlHtmlAttributesSupported = MvcVersion >= requiredMvc​​Version;//以下链式 if 语句输出局部视图、使用布局页面的视图或常规视图的文件头代码和标记.如果(IsPartialView){#><#} else if(IsLayoutPageSelected) {#>@{ViewBag.Title = "<#= ViewName#>";<#如果 (!String.IsNullOrEmpty(LayoutPageFile)) {#>布局 = "<#= LayoutPageFile#>";<#}#>}<h2><#=视图名称#></h2><#} 别的 {#>@{布局 = 空；}<!doctype html><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><title><#= ViewName #></title><身体><#PushIndent(" ");}#><#如果(ReferenceScriptLibraries){#><#如果 (!IsLayoutPageSelected && IsBundleConfigPresent) {#>@Scripts.Render("~/bundles/jquery")@Scripts.Render("~/bundles/jqueryval")<#}#><#否则如果(！IsLayoutPageSelected){#><script src="~/Scripts/jquery-<#= JQueryVersion #>.min.js"></script><script src="~/Scripts/jquery.validate.min.js"></script><script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script><#}#><#}#>@using (Html.BeginForm()){@Html.AntiForgeryToken()<h4><#= ViewDataTypeShortName #></h4><小时/><#如果(isControlHtmlAttributesSupported){#>@Html.ValidationSummary(true, "", new { @class = "text-danger" })<#} 别的 {#>@Html.ValidationSummary(true)<#}#><#foreach(ModelMetadata.Properties 中的PropertyMetadata 属性){如果 (property.Scaffold && !property.IsAssociation) {如果(属性.IsPrimaryKey){#>@Html.HiddenFor(model => model.<#= property.PropertyName #>)<#} else if (!property.IsReadOnly) {bool isCheckbox = property.TypeName.Equals(boolType);#><div class="form-group"><#如果(属性.IsForeignKey){#>@Html.LabelFor(model => model.<#= property.PropertyName #>, "<#= GetAssociationName(property) #>", htmlAttributes: new { @class = "col-form-label col-lg-2" })<#} else if (!isCheckbox) {#>@Html.LabelFor(model => model.<#= property.PropertyName #>, htmlAttributes: new { @class = "col-form-label col-lg-2" })<#}#><div class="col-lg-10"><#如果(属性.IsForeignKey){#><#如果(isControlHtmlAttributesSupported){#>@Html.DropDownList("<#= property.PropertyName #>", null, htmlAttributes: new { @class = "form-control" })<#} 别的 {#>@Html.DropDownList("<#= property.PropertyName #>", String.Empty)<#}#><#} else if (isControlHtmlAttributesSupported) {如果(isCheckbox){#><div class="custom-control custom-checkbox"><#PushIndent(" ");#>@Html.EditorFor(model => model.<#= property.PropertyName #>, new { htmlAttributes = new { @class = "custom-control-input" } })@Html.LabelFor(model => model.<#= property.PropertyName #>, htmlAttributes: new { @class = "custom-control-label" })<#} else if (property.IsEnum && !property.IsEnumFlags) {#>@Html.EnumDropDownListFor(model => model.<#= property.PropertyName #>, htmlAttributes: new { @class = "form-control" })<#} 别的 {#>@Html.EditorFor(model => model.<#= property.PropertyName #>, new { htmlAttributes = new { @class = "form-control" } })<#}} 别的 {#>@Html.EditorFor(model => model.<#= property.PropertyName #>)<#}#><#如果(isControlHtmlAttributesSupported){#>@Html.ValidationMessageFor(model => model.<#= property.PropertyName #>, "", new { @class = "text-danger" })<#} 别的 {#>@Html.ValidationMessageFor(model => model.<#= property.PropertyName #>)<#}#><#if (isCheckbox && isControlHtmlAttributesSupported) {PopIndent();#>

<#}#>

<#}}}#><div class="form-group"><div class="col-lg-10"><input type="submit" value="Save" class="btn btn-primary">

}<div>@Html.ActionLink("返回列表", "索引")

<#if(IsLayoutPageSelected && ReferenceScriptLibraries && IsBundleConfigPresent) {#>@section 脚本 {@Scripts.Render("~/bundles/jqueryval")}<#}#><#else if(IsLayoutPageSelected && ReferenceScriptLibraries) {#><script src="~/Scripts/jquery-<#= JQueryVersion #>.min.js"></script><script src="~/Scripts/jquery.validate.min.js"></script><script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script><#}#><#//下面的代码关闭了在使用布局页面的情况下使用的标签以及在常规视图页面情况下的body和html标签#><#if(!IsPartialView && !IsLayoutPageSelected) {清除缩进()；#><#}#><#@ include file="ModelMetadataFunctions.cs.include.t4" #>

I've just updated my Visual Studio 2017 ASP.NET MVC 5 application from Bootstrap v3 to v4. I'm finding when I add a new edit partial view using scaffolding, it is still using the Bootstrap v3 CSS class names for the form. Is there a way to update the scaffolding to use BS v4?

Edit

There seems to be some confusion about what I'm talking about.

In Visual Studio 2017, in an MVC project, in Solution Explorer, right click the Views folder > Add > View... > MVC 5 View > Click Add.

This brings up the Add View dialog. I type my View name, choose the Edit Template and choose, for this example, LoginVmas the Model class. Visual Studio generates this markup. This process is called scaffolding.

@model Demo.ViewModels.LoginVm

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>LoginVm</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Notice the Bootstrap 3 classes in use such as form-label and col-md-offset-2. These were removed in Bootstrap 4. Similarly, if you were to create a new Layout page, it would generate a Bootstrap 3 Navbar which is invalid in Bootstrap 4.

So I'm asking if there is a way (short of writing a custom scaffolder) to update Visual Studio to stop outputting Bootstrap 3 specific markup and, ideally, output Bootstrap 4 markup instead?

解决方案

An update is not yet available, however to support the edit view scaffolding with Bootstrap 4 in Visual Studio 2017, You have to edit the file Edit.cs.t4 in "%ProgramFiles%Microsoft Visual Studio2017CommunityCommon7IDEExtensionsMicrosoftWebMvcScaffoldingTemplatesMvcView" 

<#@ template language="C#" HostSpecific="True" #>
<#@ output extension=".cshtml" #>
<#@ include file="Imports.include.t4" #>
@model <#= ViewDataTypeName #>
<#
// "form-control" attribute is only supported for all EditorFor() in System.Web.Mvc 5.1.0.0 or later versions, except for checkbox, which uses a div in Bootstrap
string boolType = "System.Boolean";
Version requiredMvcVersion = new Version("5.1.0.0");
bool isControlHtmlAttributesSupported = MvcVersion >= requiredMvcVersion;
// The following chained if-statement outputs the file header code and markup for a partial view, a view using a layout page, or a regular view.
if(IsPartialView) {
#>

<#
} else if(IsLayoutPageSelected) {
#>

@{
    ViewBag.Title = "<#= ViewName#>";
<#
if (!String.IsNullOrEmpty(LayoutPageFile)) {
#>
    Layout = "<#= LayoutPageFile#>";
<#
}
#>
}

<h2><#= ViewName#></h2>

<#
} else {
#>

@{
    Layout = null;
}

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><#= ViewName #></title>
</head>
<body>
<#
    PushIndent("    ");
}
#>
<#
if (ReferenceScriptLibraries) {
#>
<#
    if (!IsLayoutPageSelected && IsBundleConfigPresent) {
#>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")

<#
    }
#>
<#
    else if (!IsLayoutPageSelected) {
#>
<script src="~/Scripts/jquery-<#= JQueryVersion #>.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<#
    }
#>

<#
}
#>
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    
        <h4><#= ViewDataTypeShortName #></h4>
        <hr />
<# 
    if (isControlHtmlAttributesSupported) {
#>
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
<#        
    } else {
#>
        @Html.ValidationSummary(true)
<#      
    }
#>
<#
foreach (PropertyMetadata property in ModelMetadata.Properties) {
    if (property.Scaffold && !property.IsAssociation) {
        if (property.IsPrimaryKey) {
#>
        @Html.HiddenFor(model => model.<#= property.PropertyName #>)

<#
        } else if (!property.IsReadOnly) {
			bool isCheckbox = property.TypeName.Equals(boolType);
#>
        <div class="form-group">
<#
            if (property.IsForeignKey) {
#>
            @Html.LabelFor(model => model.<#= property.PropertyName #>, "<#= GetAssociationName(property) #>", htmlAttributes: new { @class = "col-form-label col-lg-2" })
<#
            } else if (!isCheckbox) {			
#>
            @Html.LabelFor(model => model.<#= property.PropertyName #>, htmlAttributes: new { @class = "col-form-label col-lg-2" })
<#
            }
#>
            <div class="col-lg-10">
<#
            
            if (property.IsForeignKey) {
#>
<# 
            if (isControlHtmlAttributesSupported) {
#>
                @Html.DropDownList("<#= property.PropertyName #>", null, htmlAttributes: new { @class = "form-control" })
<#
            } else {
#>
                @Html.DropDownList("<#= property.PropertyName #>", String.Empty)
<#
            }
#>
<#
            } else  if (isControlHtmlAttributesSupported) {
                if (isCheckbox) {
#>
                <div class="custom-control custom-checkbox">
<#
                    PushIndent("    ");
#>
                @Html.EditorFor(model => model.<#= property.PropertyName #>, new { htmlAttributes = new { @class = "custom-control-input" } })
				@Html.LabelFor(model => model.<#= property.PropertyName #>, htmlAttributes: new { @class = "custom-control-label" })
<#
                } else if (property.IsEnum && !property.IsEnumFlags) {
#>
                @Html.EnumDropDownListFor(model => model.<#= property.PropertyName #>, htmlAttributes: new { @class = "form-control" })
<#
                } else {
#>
                @Html.EditorFor(model => model.<#= property.PropertyName #>, new { htmlAttributes = new { @class = "form-control" } })
<#
                }
            } else {
#>
                @Html.EditorFor(model => model.<#= property.PropertyName #>)
<#
            }
#>
<# 
            if (isControlHtmlAttributesSupported) {
#>
                @Html.ValidationMessageFor(model => model.<#= property.PropertyName #>, "", new { @class = "text-danger" })
<#        
            } else {
#>
                @Html.ValidationMessageFor(model => model.<#= property.PropertyName #>)
<#      
            }
#>
<#
            if (isCheckbox && isControlHtmlAttributesSupported) {
                PopIndent();
#>
                </div>
<#
            }
#>
            </div>
        </div>

<#
        }
    }
}
#>
        <div class="form-group">
			<div class="col-lg-10">
				<input type="submit" value="Save" class="btn btn-primary">
			</div>
		</div>
    
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<#
if(IsLayoutPageSelected && ReferenceScriptLibraries && IsBundleConfigPresent) {
#>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<#
}
#>
<#
else if(IsLayoutPageSelected && ReferenceScriptLibraries) {
#>

<script src="~/Scripts/jquery-<#= JQueryVersion #>.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<#
}
#>
<#
// The following code closes the tag used in the case of a view using a layout page and the body and html tags in the case of a regular view page
#>
<#
if(!IsPartialView && !IsLayoutPageSelected) {
    ClearIndent();
#>
</body>
</html>
<#
}
#>
<#@ include file="ModelMetadataFunctions.cs.include.t4" #>

这篇关于将 Visual Studio 2017 MVC 视图脚手架更新为 Bootstrap 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆