ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素

阅读目录

Bootstrap 栅格（Grid）系统

Bootstrap HTML元素

Bootstrap 验证样式

ASP.NET MVC创建包含Bootstrap样式编辑模板

小结


回到顶部

Bootstrap 栅格（Grid）系统

在移动互联网的今天，越来越多的网站被手机设备访问，移动流量在近几年猛增。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格参数

Bootstrap 3提供了一系列的预定义class来指定列的尺寸，如下所示：

View Code
呈现的数据如下所示:

View Code
上述代码中，使用class为form-group的<div>元素包裹了2个Html方法（Html.LabelFor、Html.TextboxFor），这能让Bootstrap 验证样式应用在form 元素上，当然你也可以使用Bootstrap 栅格col-* class来指定form 中元素的宽度，效果如下显示：

View Code
显示效果如下：

Bootstrap Image

在 Bootstrap 3.0中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

img-rounded

img-circle

img-thumbnail

请看如下代码：

<div class="row">
<h3>Our Team</h3>
@foreach (var item in Model)
{
<div class="col-md-4">
<img src="@Url.Content("~/Images/employees/" + item.EmployeeID + ".png")" alt="@item.FirstName@item.LastName" class="img-circle img-responsive">
<h3>
@item.FirstName @item.LastName <small>@item.Title</small>
</h3>
<p>@item.Notes</p>
</div>
}
</div>

回到顶部

Bootstrap 验证样式

默认情况下ASP.NET MVC项目模板支持unobtrusive 验证并且会自动添加需要的JavaScript库到项目里。然而默认的验证不使用Bootstrap指定的CSS。当一个input元素验证失败，JQuery validation插件会为元素添加input-validation-error class（存在Site.css中）。那怎样不修改JQuery Validation插件而且使用Bootstrap内置的错误样式呢？

Bootstrap提供了class为has-error中的样式（label字体变为红色，input元素加上红色边框）来显示错误:

<div class="form-group has-error">
@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
</div>
</div>

所以，我需要动态来为<div class=' from-group'>元素动态绑定/移除has-error。为了不修改JQuery.validation插件，我在Scripts文件夹中添加jquery.validate.bootstrap文件:

$.validator.setDefaults({
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
});

这段脚本的通过调用setDefaults方法来修改默认的JQuery validation 插件设置。看以看到我使用highlight和unhighlight方法来动态添加/移除has-error class。

最后将它添加到打包文件中

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js",
"~/Scripts/jquery.validate.bootstrap.js"));

回到顶部

ASP.NET MVC创建包含Bootstrap样式编辑模板

基元类型

编辑模板（Editor Template）指的是在ASP.NET MVC应用程序中，基于对象属性的数据类型通过Razor视图渲染后，自动产生表单Input元素。ASP.NET MVC包含了若干的编辑模板，当然我们也可以实现扩展。编辑模板类似于局部视图，不同的是，局部视图通过name来渲染，而编辑模板通过类型来渲染。

举个栗子，@Html.EditorFor(model => model.Property)，如果Property类型为string，那么@Html.Editor 会创建一个Type=Text的Input元素；如果Property类型为Password，那么会创建一个Type=Password的Input元素。所以EditorFor helper是基于model 属性的数据类型来渲染生成HTML。

不过美中不足的是，默认产生的HTML如下所示：



可以看到class=”text-box single-line”，但先前提到过，Bootstrap Form元素class必须是 form-control。

所以，为了让Editor helper生成class为form-control的表单元素，我们需要创建一个自定义的编辑模板来重写旧的模板。你需要如下操作：

在Shared文件夹中创建名为EditorTemplates（注意要一样的名称）的文件夹

添加名为string.cshtml（注意要一样的名称）文件，并添加如下代码：

@model string
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new
{
@class = "form-control"
})

在上述代码中，我们调用 @Html.TextBox方法，并且传递了一个空的字符串作为textbox的name。这将会让model的属性名作为生成的textbox的name，并且textbox显示的内容是model的值，最后追加了名为class的attribute，而且其值为”form-control”。

重新生成项目，发现新生成的input元素它的class已经改为”form-control“了。如下所示：



非基元类型

ASP.NET MVC能让开发者创建根据自定义DataType的编辑模板，比如自动生成多行文本框并且规定行数为3行，也是同样的操作：

添加MultilineText. Cshtml（注意名称相同）文件到EditorTemplates中

添加如下代码：

@model string
@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.
ToString(), new { @class = "form-control", rows = 3 })

为了让我们的Model的属性在渲染时采用MultilineText.cshtml编辑模板，我们需要为属性指定DataType attribute为MultilineText:

[DataType(DataType.MultilineText)]
public string Description { get; set; }

最终显示如下所示：



回到顶部

小结