将 Visual Studio 2017 MVC 视图脚手架更新到 Bootstrap 4 [英] Update Visual Studio 2017 MVC View Scaffolding to Bootstrap 4
本文介绍了将 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-horizontal"><h4>登录虚拟机</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></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>}@Html.ActionLink("返回列表", "索引")</div>注意正在使用的 Bootstrap 3 类，例如 form-label 和 col-md-offset-2.这些在 Bootstrap 4 中被删除.同样，如果你要创建一个新的布局页面，它会生成一个 Bootstrap 3 导航栏，这在 Bootstrap 4 中是无效的.
所以我想问是否有办法(没有编写自定义脚手架)来更新 Visual Studio 以停止输出 Bootstrap 3 特定标记，最好改为输出 Bootstrap 4 标记?
解决方案 目前还没有更新，但是要在 Visual Studio 2017 中使用 Bootstrap 4 支持编辑视图脚手架，您必须编辑文件 Edit.cs.t4在%ProgramFiles%Microsoft Visual Studio2017CommunityCommon7IDEExtensionsMicrosoftWebMvcScaffoldingTemplatesMvcView"中
- 将文件重命名为Edit.cs.backup.t4"
- 创建一个新文件Edit.cs.t4"并添加以下代码，这将支持新的 Bootstrap 4 类和表单控件(引导自定义表单和控件):
<#@ template language="C#" HostSpecific="True" #><#@ 输出扩展=".cshtml" #><#@ 包含文件="Imports.include.t4" #>@model <#= ViewDataTypeName #><#//只有 System.Web.Mvc 5.1.0.0 或更高版本中的所有 EditorFor() 都支持form-control"属性，除了复选框，它在 Bootstrap 中使用 divstring boolType = "System.Boolean";版本要求MvcVersion = new Version("5.1.0.0");bool isControlHtmlAttributesSupported = MvcVersion >= requiredMvcVersion;//下面的链式 if 语句输出部分视图、使用布局页面的视图或常规视图的文件头代码和标记.如果(IsPartialView){#><#} 否则如果(IsLayoutPageSelected){#>@{ViewBag.Title = "<#= ViewName#>";<#if (!String.IsNullOrEmpty(LayoutPageFile)) {#>布局 = "<#= 布局页面文件#>";<#}#>}<h2><#= ViewName#></h2><#} 别的 {#>@{布局=空；}<!doctype html><html><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title><#= ViewName#></title></头><身体><#PushIndent(" ");}#><#如果(参考脚本库){#><#if (!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><小时/><#if (isControlHtmlAttributesSupported) {#>@Html.ValidationSummary(true, "", new { @class = "text-danger" })<#} 别的 {#>@Html.ValidationSummary(true)<#}#><#foreach(ModelMetadata.Properties 中的 PropertyMetadata 属性){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" })<#} 别的 {#>@Html.DropDownList("<#= property.PropertyName #>", String.Empty)<#}#><#} else if (isControlHtmlAttributesSupported) {如果(isCheckbox){#><div class="custom-control 自定义复选框"><#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 #>)<#}#><#if (isControlHtmlAttributesSupported) {#>@Html.ValidationMessageFor(model => model.<#= property.PropertyName #>, "", new { @class = "text-danger" })<#} 别的 {#>@Html.ValidationMessageFor(model => model.<#= property.PropertyName #>)<#}#><#if (isCheckbox && isControlHtmlAttributesSupported) {弹出缩进()；#></div><#}#></div></div><#}}}#><div class="form-group"><div class="col-lg-10"><input type="submit" value="Save" class="btn btn-primary"></div></div>}@Html.ActionLink("返回列表", "索引")</div><#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) {清除缩进()；#></身体></html><#}#><#@ 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"
- Rename the file to "Edit.cs.backup.t4"
- Create a new file "Edit.cs.t4" and add the following code, this will support new Bootstrap 4 classes and form controls (Bootstrap custom forms and controls):
<#@ 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屋！
查看全文
