MVC5 EF6 入門完整教程五

上篇文章介紹了ef實現crud及一些基本的html helpers.

這次我們將會對之前的內容進行一些修改和重構：

引入bootstrap樣式，搭建幾類共用的模板頁，對ui進行一些改造

分類介紹html helpers

完善一些功能

bootstrap是twitter推出的乙個開源的用於前端開發的工具包。它由twitter的設計師mark otto和jacob thornton合作開發，是乙個css/html框架。後面詳細步驟會介紹如何使用。

主要分成輸入類和顯示類。

輸入類：

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生成乙個標記

url.action只返回乙個url。

例如:@

html.actionlink("linktext","someaction","somecontroller",new,null)

生成結果：

/somecontroller/someaction/123">linktext

@url.action( "someaction", "somecontroller", new, null)

生成結果:

/somecontroller/someaction/123

另外，partial和action大家可能會比較陌生，這個後面文章講分部檢視（類似於原來web form中的使用者控制項）的時候介紹。

例如

這些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對應，大家可以自己試驗。

下面我們對之前做的介面做一些改造。

開啟bootstrap的official site

解壓縮後檔案結構：

我們實際要用的都放在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標籤下面增加一行

開啟這個頁面檢視下，發現已經應用上樣式了。

下面我們就開始這個專案的ui改造工作。

定義兩類模板分別對應著使用者(主頁面)，管理員

note註冊登入頁的樣式因為很少被共有，就不用模板頁了。

右鍵views資料夾，新建資料夾shared. 這個新建的資料夾主要用來放共用的模板檔案。

右鍵shared資料夾，新建布局頁 _layout.cshtml和 _layoutadmin.cshtml

我們仿照bootstrap給我們提供的示例樣式完成這兩個布局頁。

這兩個布局頁的內容我就不詳細介紹了，具體可以檢視我的源**。

有幾點說明一下：

@renderbody()：使用這個布局的view將把他們的內容顯示到此處。

要使用這個布局時，如下圖，在view中新增 layout="~views/shared/_layout.cshtml";

可以在views資料夾下面新建乙個檢視頁，命名為_viewstart.cshtml，將這部分統一寫到這個檔案裡（如下圖），這樣應用布局頁的view就可以省略這部分內容了。另外這個_viewstart.cshtml也是可以巢狀的，使用布局頁的view會自動應用最近資料夾下面的_viewstart.cshtml.

我們新建兩個controller : mvcdemocontroller和admincontroller.cs

根據預設的index方法新建檢視，分別應用_layout.cshtml和_layoutadmin.cshtml

使用者介面

管理員介面

現在我們已經將要做的模板頁做好了。我們再將登入框美化下：

現在我們就完成了對於ui的改造，我們做了三件事：

引入bootstrap樣式；製作共用的布局頁；美化登入頁

關於頁面ui設計的就不詳細講了，大家可以直接看源**。

本次我們主要對之前的內容做了一些完善，做了三個頁面來說明情況。

你需要掌握

bootstrap的基本使用

布局頁的使用

常用的helper要做到心裡有數

好了，今天就到這裡。

MVC5 EF6 入門完整教程五

MVC5 EF6 入門完整教程五

MVC5 EF6 入門完整教程五

MVC5 EF6 入門完整教程五

相關推薦