上篇文章介紹了EF實現CRUD及一些基本的Html Helpers.
這次我們將會對之前的內容進行一些修改和重構：
-
引入Bootstrap樣式，搭建幾類共用的模板頁，對UI進行一些改造
-
分類介紹Html Helpers
-
完善一些功能
文章提綱
-
理論基礎
-
UI改造詳細步驟
-
總結
理論基礎 -- Bootstrap簡介
以下摘自百度百科：
Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。后面詳細步驟會介紹如何使用。
理論基礎 -- Html Helpers
主要分成輸入類和顯示類。
輸入類：
TextArea, TextBox
Password
Hidden
DropDownList
ListBox (與DropDownList類似，生存可多選的下拉列表框)
RadioButton
CheckBox
顯示類：
顯示類 Helper可以在應用程序中生成指向其他資源的鏈接，也可以構建被稱為部分視圖的可重用UI片段。
ActionLink和RouteLink
URL （Url.Action, Url.Content）
Partial 和 RenderPartial
Action和RenderAction
這些具體的作用我就不介紹了，相信各位園友根據名字都可以猜出生成的大多數HTML標簽。建議大家新建一個空白View，將所有的helper都放進去，生成頁面后，右鍵查看源代碼，這樣可以比較清晰的了解這些標簽和HTML的對應關系。
Note
有兩個helper說明一下：
html.ActionLink生成一個<a href=".."></a>標記
Url.Action只返回一個url。
例如:
@Html.ActionLink("linkText","someaction","somecontroller",new { id = "123" },null)
生成結果：
<a href="/somecontroller/someaction/123">linkText</a>
@Url.Action( "someaction", "somecontroller", new { id = "123" }, null)
生成結果:
/somecontroller/someaction/123
另外，Partial和Action大家可能會比較陌生，這個后面文章講分部視圖（類似於原來web form中的用戶控件）的時候介紹。
不知大家是否還記得我們前幾篇文章用過的helper, 和這次介紹的有點不一樣。
例如
這些helper的特征是名稱后面加上了 For , 這些叫做強類型的輔助方法。
對於不適合使用字符串字面值從View數據中提取值的情況，可以使用強類型輔助方法， 通過傳遞一個lambda表達式來指定要渲染的模型屬性。表達式的模型類型必須和為View指定的強類型一致。
主要的強類型輔助方法。
Html.TextBoxFor();
Html.TextAreaFor();
Html.DropDownListFor();
Html.CheckboxFor();
Html.RadioButtonFor();
Html.ListBoxFor();
Html.PasswordFor();
Html.HiddenFor();
Html.LabelFor();
Html.EditorFor();
Html.DisplayFor();
Html.DisplayTextFor();
Html.ValidtionMessageFor()
這些大都和前面普通的helper對應，大家可以自己試驗。
UI改造詳細步驟
下面我們對之前做的界面做一些改造。
下載相關文件
打開Bootstrap的Official Site
目前的版本是 v3.3.0, 我們直接下載 Source code
解壓縮后文件結構：
我們實際要用的都放在dist文件夾內，展開dist文件夾
添加文件至項目
我們在項目中新增加幾個文件夾OpenSource, Content, fonts
OpenSource中我們放一些第三方的源代碼，Content中放實際使用的css文件, fonts放字體文件。
將解壓縮后的文件夾bootstrap-3.3.0整體放入OpenSource文件夾內，方便以后查看用。
將bootstrap-3.3.0àdist 中的bootstrap.css和bootstrap-theme.css放入Content文件夾。
fonts文件夾先不用。
文件的准備工作就做好了，下面我們開始在做好的項目中使用bootstrap
打開ViewsàAccountàLogin.cshtml, 貼着title標簽下面增加一行
<link href="~/Content/bootstrap.css" rel="stylesheet" />
打開這個頁面查看下，發現已經應用上樣式了。
下面我們就開始這個項目的UI改造工作。
定義模板頁
定義兩類模板分別對應着 用戶(主頁面)，管理員
Note 注冊登錄頁的樣式因為很少被共有，就不用模板頁了。
右鍵Views文件夾，新建文件夾Shared. 這個新建的文件夾主要用來放共用的模板文件。
右鍵Shared文件夾，新建布局頁 _Layout.cshtml和 _LayoutAdmin.cshtml
我們仿照bootstrap給我們提供的示例樣式完成這兩個布局頁。
這兩個布局頁的內容我就不詳細介紹了，具體可以查看我的源代碼。
有幾點說明一下：
@RenderBody()：使用這個布局的View將把他們的內容顯示到此處。
要使用這個布局時，如下圖，在View中添加 Layout="~Views/Shared/_Layout.cshtml";
Note
可以在Views文件夾下面新建一個視圖頁，命名為_ViewStart.cshtml，將這部分統一寫到這個文件里（如下圖），這樣應用布局頁的View就可以省略這部分內容了。 另外這個_ViewStart.cshtml也是可以嵌套的，使用布局頁的View會自動應用最近文件夾下面的_ViewStart.cshtml.
我們新建兩個Controller : MVCDemoController和AdminController.cs
根據默認的Index方法新建視圖，分別應用_Layout.cshtml和_LayoutAdmin.cshtml
用戶界面
管理員界面
現在我們已經將要做的模板頁做好了。我們再將登錄框美化下：
現在我們就完成了對於UI的改造，我們做了三件事：
引入bootstrap樣式；制作共用的布局頁；美化登錄頁
關於頁面UI設計的就不詳細講了，大家可以直接看源代碼。
總結
本次我們主要對之前的內容做了一些完善，做了三個頁面來說明情況。
你需要掌握
-
bootstrap的基本使用
-
布局頁的使用
-
常用的helper要做到心里有數
好了，今天就到這里。
歡迎大家多多評論，讓下一篇文章更好 ：）