将 Visual Studio 2017 MVC 视图脚手架更新为 Bootstrap 4

Question

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

编辑

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

在 Visual Studio 2017 的 MVC 项目中，在解决方案资源管理器中，右键单击Views folder > Add > View... > MVC 5 View > Click Add 。

这将打开“添加视图”对话框。 我输入我的视图名称，选择“编辑模板”，并在本示例中选择LoginVm作为模型类。 Visual Studio 生成此标记。 这个过程称为脚手架。

@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>

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

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

Answer 1

尚无更新可用，但要在 Visual Studio 2017 中使用 Bootstrap 4 支持编辑视图脚手架，您必须在“%ProgramFiles%\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE”中编辑文件 Edit.cs.t4 \\Extensions\\Microsoft\\Web\\Mvc\\Scaffolding\\Templates\\MvcView”

将文件重命名为“Edit.cs.backup.t4”
创建一个新文件“Edit.cs.t4”并添加以下代码，这将支持新的 Bootstrap 4 类和表单控件（ Bootstrap 自定义表单和控件）：

 <#@ 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" #>

Answer 2

VS 中脚手架引擎使用的模板是固定的。 它们位于您的 VS 安装目录中（例如 %programfiles%\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE\\Extensions\\Microsoft\\Web\\Mvc\\Scaffolding\\Templates\\MvcView）。

所以 Bootstrap 3 类在 MS 提供的 T4 文件中是固定的（当前标准是 BS3，当前在创建新的 MVC web 项目时默认添加）。 看看上面提到的目录中的“Edit.cs.t4”。 您会在其中找到不推荐使用的 BS3 类，例如“btn-default”（在 BS4 中为 btn-secondary）。

如果您愿意，您可以创建自己的自定义 T4 模板。 此任务的 MS 参考将是： https : //docs.microsoft.com/en-us/visualstudio/modeling/code-generation-and-t4-text-templates

Answer 3

要将 ASP .NET MVC 5 项目导航栏修复/更新到 Bootstrap 4，您必须手动更新代码，如下所示：

视图 -> 共享 -> _Layout.cshtml。

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav mr-auto"> <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })</li> <li class="nav-item">@Html.ActionLink("About", "About", "Home", null, new { @class = "nav-link" })</li> <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "nav-link" })</li> </ul> @Html.Partial("_LoginPartial") </div> </div> </nav>

然后，如果您不使用 Login 部分，则可以将其删除。 否则，将 _LoginPartial.cshtml 更改为：

 @using Microsoft.AspNet.Identity @if (Request.IsAuthenticated) { using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) { @Html.AntiForgeryToken() <ul class="nav navbar-nav"> <li class="nav-item"> @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "nav-link" }) </li> <li class="nav-item"><a class="nav-link" href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li> </ul> } } else { <ul class="nav navbar-nav"> <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" })</li> <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" })</li> </ul> }

最后从 Content/Site.css 中删除下一行：

 /*delete this*/ body { padding-top: 50px; padding-bottom: 20px; }

将 Visual Studio 2017 MVC 视图脚手架更新为 Bootstrap 4

问题描述

3 个解决方案

解决方案1
1 2019-02-24 10:59:20

解决方案2
0 2018-09-03 16:55:19

解决方案3
0 2019-12-11 16:23:02

将 Visual Studio 2017 MVC 视图脚手架更新为 Bootstrap 4

问题描述

3 个解决方案

解决方案1 1 2019-02-24 10:59:20

解决方案2 0 2018-09-03 16:55:19

解决方案3 0 2019-12-11 16:23:02

解决方案1
1 2019-02-24 10:59:20

解决方案2
0 2018-09-03 16:55:19

解决方案3
0 2019-12-11 16:23:02