MVC5+EF6 入門完整教程五

原文：https://www.cnblogs.com/miro/p/4095165.html

上篇文章介紹了EF實現CRUD及一些基本的Html Helpers.

此次咱們將會對以前的內容進行一些修改和重構：

1. 引入Bootstrap樣式，搭建幾類共用的模板頁，對UI進行一些改造
2. 分類介紹Html Helpers
3. 完善一些功能

文章提綱

• 理論基礎
• 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

http://getbootstrap.com/

目前的版本是 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設計的就不詳細講了，你們能夠直接看源代碼。

總結

本次咱們主要對以前的內容作了一些完善，作了三個頁面來講明狀況。

你須要掌握

1. bootstrap的基本使用
2. 佈局頁的使用
3. 經常使用的helper要作到內心有數