ASP.NET MVC 隨想錄（2）——使用 Bootstrap CSS 和 HTML 元素

Bootstrap 提供了一套豐富 CSS 設(shè)置、HTML 元素以及高級(jí)的柵格系統(tǒng)來幫助開發(fā)人員快速布局網(wǎng)頁。所有的 CSS 樣式和 HTML 元素與移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)結(jié)合，能讓開發(fā)人員快速輕松的構(gòu)建直觀的界面并且不用擔(dān)心在較小的設(shè)備上響應(yīng)的具體細(xì)節(jié)。

Bootstrap 柵格（Grid）系統(tǒng)

在移動(dòng)互聯(lián)網(wǎng)的今天，越來越多的網(wǎng)站被手機(jī)設(shè)備訪問，移動(dòng)流量在近幾年猛增。Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多 12 列。

柵格參數(shù)

Bootstrap 3 提供了一系列的預(yù)定義 class 來指定列的尺寸，如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/1.png" alt="" />

Bootstrap 柵格系統(tǒng)被分割為 12 列，當(dāng)布局你的網(wǎng)頁時(shí)，記住所有列的總和應(yīng)該是 12。為了圖示，請(qǐng)看如下 HTML 所示：

<div class="container">
    <div class="row">
        <div class="col-md-3" style="background-color: green;">
            <h3>green</h3>
        </div>
        <div class="col-md-6" style="background-color: red;">
            <h3>red</h3>
        </div>
        <div class="col-md-3" style="background-color: blue;">
            <h3>blue</h3>
        </div>
    </div>
</div>

注：Bootstrap 需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè) .container  容器。

在上述代碼中，我添加了一個(gè) class 為 container 的 div 容器，并且包含了一個(gè)子的 div 元素 row（行）。row div 元素依次有 3 列。其中 2 列包含了 col-md-3 的 class、一列包含了 col-md-6 的 class。當(dāng)他們組合在一起時(shí)，他們加起來總和是 12.但這段 HTML 代碼只作用于顯示器分辨率>=992 的設(shè)備。所以為了更好的響應(yīng)低分辨率的設(shè)備，我們需要結(jié)合不同的 CSS 柵格 class。故添加對(duì)平板、手機(jī)、低分辨率的 PC 的支持，需要加入如下 class：

<div class="container">
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3" style="background-color: green;">
            <h3>green</h3>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6" style="background-color: red;">
            <h3>red</h3>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3" style="background-color: blue;">
            <h3>blue</h3>
        </div>
    </div>
</div>

Bootstrap HTML 元素

Bootstrap 已經(jīng)為我們準(zhǔn)備好了一大堆帶有樣式的 HTML 元素，如：

• Tables
• Buttons
• Forms
• Images

Bootstrap Tables（表格）

Bootstrap 為 HTML tables 提供了默認(rèn)的樣式和自定義他們布局和行為的選項(xiàng)。為了更好的演示，我使用精典的 Northwind 示例數(shù)據(jù)庫以及如下技術(shù)：

• 用 ASP.NET MVC 來作為 Web 應(yīng)用應(yīng)用程序
• Bootstrap 前端框架
• Entity Framework 來作為 ORM 框架
• StructureMap 執(zhí)行我們項(xiàng)目的依賴注入和控制反轉(zhuǎn)，使用 Nuget 來安裝
• AutoMapper 自動(dòng)映射 Domain Model 到 View Model，使用 Nuget 來安裝

打開 Visual Studio，創(chuàng)建一個(gè) ASP.NET MVC 的項(xiàng)目，默認(rèn)情況下，VS 已經(jīng)為我們添加了Bootstrap 的文件。為了查看效果，按照如下的步驟去實(shí)施：

在 ASP.NET MVC 項(xiàng)目中的 Models 文件下添加一個(gè) ProductViewModel

   public class ProductViewModel
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal? UnitPrice { get; set; }
        public int? UnitsInStock { get; set; }
        public bool Discontinued { get; set; }
        public string Status { get; set; }
    }

在 APP_Data 文件夾中添加 AutoMapperConfig 類，通過 AutoMapper，為 ProductViewModel的 Status 屬性創(chuàng)建了一個(gè)條件映射，如果 Product 是 discontinued，那么 Status為danger；如果 UnitPrice 大于 50，則設(shè)置 Status 屬性為 info；如果 UnitInStock 小于 20，那么設(shè)置 Status 為 warning。代碼的邏輯如下:

Mapper.CreateMap<Product, ProductViewModel>()
.ForMember(dest => dest.Status,
opt => opt.MapFrom
(src => src.Discontinued
? "danger"
: src.UnitPrice > 50
? "info"
: src.UnitsInStock < 20 ? "warning" : ""));

添加一個(gè) ProductController 并且創(chuàng)建名為 Index 的 Action

 public class ProductController : Controller
    {
        //
        // GET: /Product/
        private readonly ApplicationDbContext _context;

        public ProductController(ApplicationDbContext context)
        {
            this._context = context;
        }
        public ActionResult Index()
        {
            var products = _context.Products.Project().To<productviewmodel>().ToArray();
            return View(products);
        }
    }

上述代碼使用依賴注入獲取 Entity Framework DbContext 對(duì)象，Index Action 接受從數(shù)據(jù)庫中返回 Products 集合然后使用 AutoMapper 映射到每一個(gè) ProductViewModel 對(duì)象中，最后為 View 返回?cái)?shù)據(jù)。
最后，在視圖上使用 Bootstrap HTML table 來顯示數(shù)據(jù)

<div class="container">
<h3>Products</h3>
<table class="table">
    <thead>
        <tr>
            <th>
                Product Name
            </th>
            <th>
                Unit Price
            </th>
            <th>
                Units In Stock
            </th>
            <th>
                Discontinued
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ProductName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UnitPrice)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.UnitsInStock)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Discontinued)
                </td>
            </tr>
        }
    </tbody>
</table>
</div>

呈現(xiàn)的數(shù)據(jù)如下所示:

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/5.png" alt="" />

Bootstrap Tables 其余樣式

Bootstrap 提供了額外的樣式來修飾 table。比如使用 table-bordered 來顯示邊框， table-striped 顯示奇偶數(shù)行間顏色不同（斑馬條紋狀），table-hover 顧名思義，當(dāng)鼠標(biāo)移動(dòng)行時(shí)高亮，通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會(huì)減半，修改后的代碼如下所示：

<table class="table table-bordered table-striped table-hover">
</table>

顯示的效果如下：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/6.png" alt="" />

Bootstrap上下文 Table 樣式

Bootstrap 提供了額外的 class 能讓我們修飾和的樣式，提供的 class 如下：

• Active
• Success
• Info
• Warning
• Danger

修改上述代碼，為動(dòng)態(tài)添加樣式：

@foreach (var item in Model)
{
<tr class="@item.Status">
    <td>
        @Html.DisplayFor(modelItem => item.ProductName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.UnitPrice)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.UnitsInStock)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Discontinued)
    </td>
</tr>
}

更新過后的效果如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/7.png" alt="" />

Bootstrap Buttons

Bootstrap 提供了許多各種不同顏色和大小的 buttons，為核心的 buttons 提供 6 種顏色和 4 種尺寸可以選擇，同樣通過設(shè)置 class 屬性來顯示不同的風(fēng)格：

? btn btn-primary btn-xs

? btn btn-default btn-sm

? btn btn-default

? btn btn-sucess btn-lg

可以為 Button 設(shè)置顏色的 class：

? btn-default

? btn-primary

? btn-success

? btn-info

? btn-warning

? btn-danger

所以可以使用如下代碼來呈現(xiàn)效果：

<div class="row">
    <!-- default按鈕 -->
    <button type="button" class="btn btn-default btn-xs">
        Default &amp; Size=Mini
    </button>
    <button type="button" class="btn btn-default btn-sm">
        Default &amp; Size=Small
    </button>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-default btn-lg">
        Default &amp; Size=Large
    </button>
</div>

顯示效果如下：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter2/8.png" alt="" />

Bootstrap Form（表單）

表單常見于大多數(shù)業(yè)務(wù)應(yīng)用程序里，因此統(tǒng)一的樣式有助于提高用戶體驗(yàn)，Bootstrap 提供了許多不同的 CSS 樣式來美化表單。

使用 ASP.NET MVC 的 HTML.BeginForm 可以方便的創(chuàng)建一個(gè)表單，通過為

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    <div class="form-group">
        @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" })
            @Html.ValidationMessageFor(m => m.UserName)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Password)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Log in" class="btn btn-default">
        </div>
    </div>
}

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-inline", role = "form" }))
{
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "sr-only" })
        @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", placeholder = "Enter your username" })
        @Html.ValidationMessageFor(m => m.UserName)
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "sr-only" })
        @Html.PasswordFor(m => m.Password, new { @class = "form-control", placeholder = "Enter your username" })
        @Html.ValidationMessageFor(m => m.Password)
    </div>
    <div class="form-group">
        <input type="submit" value="Log in" class="btn btn-default">
    </div>
}

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

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

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

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

 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

 "~/Scripts/jquery.validate*"));