上篇文章介紹了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";
note
可以在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 入門完整教程五 上篇文章介紹了ef實現crud及一些基本的html helpers.這次我們將會對之前的內容進行一些修改和重構 引入bootstrap樣式，搭建幾類共用的模板頁，對ui進行一些改造 分類介紹html helpers 完善一些功能 bootstrap是twitt...
MVC5 EF6 入門完整教程五
原文 mvc5 ef6 入門完整教程五 上篇文章介紹了ef實現crud及一些基本的html helpers.這次我們將會對之前的內容進行一些修改和重構 引入bootstrap樣式，搭建幾類共用的模板頁，對ui進行一些改造 分類介紹html helpers 完善一些功能 bootstrap是twitt...
MVC5 EF6 入門完整教程五
上篇文章介紹了ef實現crud及一些基本的html helpers.這次我們將會對之前的內容進行一些修改和重構 引入bootstrap樣式，搭建幾類共用的模板頁，對ui進行一些改造 分類介紹html helpers 完善一些功能 bootstrap是twitter推出的乙個開源的用於前端開發的工具包...