ASP.NET MVC 隨想錄（3）——使用 Bootstrap 組件

Bootstrap 為我們提供了十幾種的可復用組件，包括字體圖標、下拉菜單、導航、警告框、彈出框、輸入框組等。在你的 Web Application 中使用這些組件，將為用戶提供一致和簡單易用的用戶體驗。

Bootstrap 組件本質(zhì)上是結(jié)合了各種現(xiàn)有 Bootstrap 元素以及添加了一些獨特 Class 來實現(xiàn)。Bootstrap 元素我在上一篇文章中涉及到。在這篇博客中，我將繼續(xù)探索 Bootstrap 豐富的組件以及將它結(jié)合到 ASP.NET MVC 項目中。

Bootstrap 導航條

Bootstrap 導航條作為"明星組件"之一，被使用在大多數(shù)基于 Bootstrap Framework 的網(wǎng)站上。為了更好的展示 Bootstrap 導航條，我在 ASP.NET MVC 的_Layout.cshtml 布局頁創(chuàng)建一個 fixed-top 導航條，當然它是響應(yīng)式的——在小尺寸、低分辨率的設(shè)備上打開時，它將會只展示一個按鈕并帶有 3 個子菜單，當點擊按鈕時垂直展示他們。在網(wǎng)頁上顯示如下：

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

在移動設(shè)備上顯示如下：

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

在 ASP.NET MVC默認的_Layouts.cshtml 布局頁中已經(jīng)幫我們實現(xiàn)了上述功能，打開它對其稍作修改，如下代碼片段所示：

<div class="navbar navbar-inverse navbar-fixed-top">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            </button>

            @Html.ActionLink("Northwind Traders", "Index", "Home", null, new { @class = "navbar-brand" })

        </div>

        <div class="navbar-collapse collapse">

            @Html.Partial("_BackendMenuPartial")

            @Html.Partial("_LoginPartial")

        </div>

    </div>

</div>

其中 class為.navbar-fixed-top 可以讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，并在兩側(cè)添加內(nèi)補（padding）

注意，我使用了 2 個局部視圖（_BackendMenuPartial 和 LoginPartial）來生成余下的導航條（使用.navbar-collapse 類在低分辨率設(shè)備中折疊），其中局部視圖邏輯是基于當前訪問的用戶是否登陸來控制是否顯示。

首先，添加如下代碼在_BackendMenuPartial 視圖中，這將會在導航條中產(chǎn)生一個搜索框：

@using (Html.BeginForm("Index", "Search", FormMethod.Post, new { @class = "navbar-form navbar-left", role = "search" }))  
{

    <div class="form-group">

        @Html.TextBox("searchquery", "", new { @id = "searchquery", @class = "form-control input-sm", placeholder = "Search" })

        @Html.Hidden("fromcontroller", @ViewContext.RouteData.Values["controller"], new { @id = "fromcontroller" })

    </div>

    <button type="submit" class="btn btn-default btn-xs">GO</button>

}

因為 Bootstrap 導航條作為整個網(wǎng)站的公共部分，要實現(xiàn)快速搜索那么必須要知道當前所處于哪個 Controller，這樣才能提高檢索效率。所以上述代碼中，增加了一個 Id 為 fromcontroller 隱藏字段，代表當前訪問的 Controller。

當點擊搜索時，發(fā)送 HTTP POST 請求到 Index Action 下。然后根據(jù)傳遞過來的 fromcontroller 來 swith 到具體的 Action 來執(zhí)行搜索，具體的搜索邏輯代碼如下：

public ActionResult Index(string searchquery, string fromcontroller)

{

    switch (fromcontroller)

    {

        case "Products":

        return RedirectToAction("SearchProductsResult", new { query = searchquery });

        case "Customers":

        return RedirectToAction("SearchCustomersResult", new { query = searchquery });

        case "Employees":

        return RedirectToAction("SearchEmployeesResult", new { query = searchquery });

    }

    return View();

}

具體搜索的 Action 如下：

public ActionResult SearchProductsResult(string query)

{

    ViewBag.SearchQuery = query;

    var results = _context.Products.Where(p => p.ProductName.Contains(query)).ToList();

    return View(results);

}

public ActionResult SearchCustomersResult(string query)

{

    ViewBag.SearchQuery = query;

    var results = _context.Customers.Where(p => p.CompanyName.Contains(query)

    || p.ContactName.Contains(query)

    || p.City.Contains(query)

    || p.Country.Contains(query)).ToList();

    return View(results);

}

public ActionResult SearchEmployeesResult(string query)

{

    ViewBag.SearchQuery = query;

    var results = _context.Employees.Where(p => p.FirstName.Contains(query)

    || p.LastName.Contains(query)

    || p.Notes.Contains(query)).ToList();

    return View(results);

}

列表組

列表組是靈活又強大的組件，不僅能用于顯示一組簡單的元素，還能結(jié)合其他元素創(chuàng)建一組復雜的定制內(nèi)容。上面的搜索為我們重定向到 Result 視圖，在此視圖中，它為我們顯示了搜索結(jié)果，為了更好的展示結(jié)果，我們可以使用列表組來顯示搜索到的產(chǎn)品，視圖中的代碼如下所示：

@model IEnumerable<bootstrap.data.models.products>

@{

    ViewBag.Title = "搜索產(chǎn)品";

}

<div class="container">

    <div class="page-header">

        <h1>產(chǎn)品結(jié)果 <small>搜索條件: "@ViewBag.SearchQuery"</small></h1>

    </div>

    <ul class="list-group">

        @foreach (var item in Model)

        {

        <a href="@Url.Action("edit","products",new={ id=@item.ProductID})class="list-group-item">@item.ProductName <span class="badge">@item.UnitsInStock</span></a>

        }

    </ul>

</div>

在上述代碼中，為無序列表 ul 的 class 設(shè)置為 list-group，并且每一個li的 class 為 list-group-item，這是一個最簡單的列表組。

徽章

徽章用來高亮條目，可以很醒目的顯示新的或者未讀的條目數(shù)量，為一個元素設(shè)置徽章僅僅只需要添加元素并設(shè)置它的 class為badge。所以，在上述代碼的基礎(chǔ)上稍作修改，添加徽章，表示庫存?zhèn)€數(shù)，如下 HTML 所示：

<a href="@Url.Action("edit","products",="" new={id="@item.ProductID}) class="list-group-item">
    @item.ProductName <span class="badge">@item.UnitsInStock</span>
</a>

顯示的結(jié)果為如下截圖：

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

媒體對象

媒體對象組件被用來構(gòu)建垂直風格的列表比如博客的回復或者推特。在 Northwind 數(shù)據(jù)庫中包含一個字段 ReportTo 表 示Employee 向另一個 Employee Report。使用媒體對象可以直觀來表示這種關(guān)系。在視圖中的代碼如下所示：

<div class="container">

<div class="page-header">

    <h1>員工搜索結(jié)果： <small>搜索條件: "@ViewBag.SearchQuery"</small></h1>

</div>

@foreach (var item in Model)

{

    <div class="media">

        <a class="pull-left" href="@Url.Action("edit", "employees", new= { id="@item.EmployeeID" })>

           <img class="media-object" src="@Url.Content("~/Images/employees/" + @item.EmployeeID + ".png")" alt="@item.FirstName" width="64" height="64">

        </a>

        <div class="media-body">

            <h4 class="media-heading">@item.FirstName @item.LastName</h4>

            @item.Notes

            @foreach (var emp in @item.ReportingEmployees)

            {

                <div class="media">

                    <a href="#" class="pull-left">

                        <img alt="@emp.FirstName" src="@Url.Content(" ~="" images="" employees="" "="" +="" @emp.employeeid="" ".png")"="" class="media-object" width="64" height="64">

                    </a>

                    <div class="media-body">

                        <h4 class="media-heading">@emp.FirstName @emp.LastName</h4>

                        @emp.Title

                    </div>

                </div>

            }

        </div>

    </div>

}

</div>

顯示結(jié)果如下：

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

可以看到，媒體對象組件是由一系列 class 為 media、media-heading、media-body、media-object 的元素組合而成，其中 media-object 用來表示諸如圖片、視頻、聲音等媒體對象。

注：.pull-left 和 .pull-right 這兩個類以前也曾經(jīng)被用在了媒體組件上，但是，從 v3.3.0 版本開始，他們就不再被建議使用了。.media-left 和 .media-right 替代了他們，不同之處是，在 html 結(jié)構(gòu)中， .media-right 應(yīng)當放在 .media-body 的后面。

頁頭

當用戶訪問網(wǎng)頁時，Bootstrap 頁頭可以為用戶提供清晰的指示。Bootstrap 頁頭本質(zhì)上是一個元素被封裝在 class為page-header 的

<div class="page-header">

    <h1>員工搜索結(jié)果： <small>搜索條件: "@ViewBag.SearchQuery"</small></h1>

</div>

<ol class="breadcrumb">

    <li>@Html.ActionLink("Home", "Index", "Home")</li>

    <li>@Html.ActionLink("Manage", "Index", "Manage")</li>

    <li class="active">Products</li>

</ol>

public ActionResult Index(int? page)

{

    var models = _context.Products.Project().To<productviewmodel>().OrderBy(p => p.ProductName);

    int pageSize = 5;

    int pageNumber = (page ?? 1);

    return View(models.ToPagedList(pageNumber, pageSize));

}

<div class="form-group">

    <div class="col-sm-2 input-group">

        <span class="input-group-addon">

            <span class="glyphicon glyphicon-phone-alt"></span>

        </span>

        @Html.TextBox("txtPhone","1194679215",new { @class = "form-control" })

    </div>

</div>

<div class="form-group">

    <div class="col-sm-4 input-group">

        @Html.TextBox("txtEmail","1194679215", new { @class = "form-control" })

        <span class="input-group-addon">@@qq.com</span>

    </div>

</div>

<div class="form-group">

    <div class="col-sm-2 input-group">

        <span class="input-group-addon">￥</span>

            @Html.TextBox("txtMoney","100",new { @class = "form-control" })

        <span class="input-group-addon">.00</span>

    </div>

</div>

<div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

        <div class="btn-group">

            <button type="submit" class="btn btn-primary btn-sm">Save</button>

            <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">

                <span class="caret"></span>

                <span class="sr-only">Toggle Dropdown</span>

            </button>

            <ul class="dropdown-menu" role="menu">

                <li><a href="#" id="savenew">Save &amp; New</a></li>

                <li class="divider"></li>

                <li><a href="#" id="duplicate">Duplicate</a></li>

            </ul>

        </div>

    </div>

</div>

<div class="container">

    <div class="page-header">

        <h1>Alerts </h1>

    </div>

    <ol class="breadcrumb">

        <li>@Html.ActionLink("Home", "Index", "Home")</li>

        <li>Bootstrap</li>

        <li class="active">Alerts</li>

    </ol>

    <div class="alert alert-success"><strong>Success. </strong></div>

    <div class="alert alert-info"><strong>Info.</strong></div>

    <div class="alert alert-warning"><strong>Warning!</strong></div>

    <div class="alert alert-danger"><strong>Danger!</strong></div>

</div>

<div class="alert alert-warning alert-Dismissible" role="alert">

    <button type="button" class="close" data-dismiss="alert">

        <span aria-hidden="true">×</span><span class="sr-only">Close</span>

    </button>

    <strong>Alert!</strong>這是可關(guān)閉的Alter

</div>

<div class="row">

<h4>基本進度條</h4>

<div class="progress">

    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">

        <span class="sr-only">80%完成</span>

    </div>

</div>

</div>

<div class="progress progress-striped active">

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% 完成 (success)</span>

</div>

</div>