將 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