文章來源：Slark.NET-博客園 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part1.html
上一節：MVC5 + EF6 + Bootstrap3 (7) Bootstrap的柵格系統
下一節：MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)
源碼下載：點我下載
目錄：
HtmlHelper簡介
在ASP.NET MVC5的View頁面中，HtmlHelper被用來輸出HTML代碼。更官方點的描述，System.Web.Mvc.HtmlHelper對象，該對象用於呈現HTML元素。如下圖所示。
HtmlHelper中的每一個函數都對應生成一種標簽，后面會逐一詳細介紹給大家。
很多人會問為什么要用HtmlHelper而不直接寫html？
我覺得有下面幾個原因：
- 直接寫HTML的話如果語句有語法錯誤，如缺少結尾標記</b>，編譯器不會報錯，出來的頁面可能會很亂且難以查出錯誤在哪。如果用HtmlHelper在編譯的時候就會指出錯誤，可以及時修改。
- View中的頁面一般都是動態頁面，也就是說如果沒有HtmlHelper，我們經常會寫如<input type="text" value="@id">這樣的服務器端代碼和HTML代碼的混合代碼。這樣寫不僅形式混亂、執行順序不好判斷，而且出錯也不容易發現，不如全部用HtmlHelper寫成服務器端代碼。而且用HtmlHelper做數據綁定更方便。
- HtmlHelper和HTML語言的關系，我覺得跟Linq和SQL語言的關系差不多。就是說微軟給你提供了一種方式讓你在不熟悉HTML或SQL這種非.NET語言的時候，使用.NET框架內的與之等價的類來幫助你更好的解決問題。
准備工作
為了更好的演示HtmlHelper，我們在項目中新建一個默認Controller和默認Action。
在解決方案資源管理器中右鍵點擊Controllers文件夾選擇添加->控制器。在彈出的窗口中選擇MVC 5 控制器 - 空，點確定。輸入默認控制器名，DefaultControllerController。將下面代碼寫入DefaultControllerController.cs文件。
using System.Web.Mvc; namespace SlarkInc.Controllers { public class DefaultControllerController : Controller { // // GET: /DefaultController/ public ActionResult DefaultAction() { return View(); } } }
從上面代碼可以看出在名為DefaultController的Controller中我們創建了一個名為DefaultAction的的Action。
然后我們來創建對應的View。在Views文件夾下的DefaultController文件夾里刪除已有的View添加一個名為DefaultAction的View。打開這個DefaultAction.cshtml文件，刪除掉所有代碼。這樣我們的准備工作就完成了。下面開始添加HtmlHelper代碼。
鏈接
ActionLink
ActionLink用來生成HTML中的<a>標簽，在頁面中生成一個超鏈接下面給出ActionLink的三個常用重載：
@Html.ActionLink("LinkText", "ActionName") @Html.ActionLink("LinkText", "ActionName", "ControllerName") @Html.ActionLink("LinkText", "ActionName", new { id = 1 })
點擊在瀏覽器中查看。運行結果：
<a href="/DefaultController/ActionName">LinkText</a> <a href="/ControllerName/ActionName">LinkText</a> <a href="/DefaultController/ActionName/1">LinkText</a>
LinkText是鏈接顯示出的文字，如果ActionLink的參數中給出Controller則鏈接指向對應的Controller下的Action。如果沒有給出Controller則指向當前頁面對應的Controller下的Action。如果ActionLink的參數中給出要傳遞的參數，如id，則在鏈接的最后寫出id值。
RouteLink
RouteLink同樣是用來生成HTML中的<a>標簽的，但是其參數和ActionLink不同。我們這里給出能實現上面三行HTML代碼的RouteLink代碼：
@Html.RouteLink("LinkText", new { action = "ActionName" }) @Html.RouteLink("LinkText", new { action = "ActionName", controller = "ControllerName" }) @Html.RouteLink("LinkText", new { action = "ActionName", id = 1 })
從上面代碼可以看出LinkText依然是鏈接顯示的文字，而鏈接的其他信息則包含在RouteLink的第二個參數中。這個參數是個Object，它的action屬性表示指向的Action而controller屬性表示指向的Controller。如果沒有controller屬性則指向當前Controller。id屬性則為要傳遞的參數。
Input控件
TextBox
TextBox用來生成HTML中的<input type="text">標簽，常用重載有下面兩種：
@Html.TextBox("NameId") @Html.TextBox("NameId","Value")
生成標簽如下：
<input id="NameId" name="NameId" type="text" value="" /> <input id="NameId" name="NameId" type="text" value="Value" />
可見TextBox的第一個參數被賦值給input標簽的id和name屬性，如果沒有value參數則value為空，如果有則賦值給value屬性。
Hidden
Hidden用來在頁面中寫入<input type="hidden">標簽，其用法和TextBox類似。代碼如下：
@Html.Hidden("NameId") @Html.Hidden("NameId", "Value")
結果如下：
<input id="NameId" name="NameId" type="hidden" value="" /> <input id="NameId" name="NameId" type="hidden" value="Value" />
Password
Password用來寫入<input type="password">標簽，其用法和TextBox類似。代碼如下：
@Html.Password("NameId") @Html.Password("NameId", "Value")
結果如下：
<input id="NameId" name="NameId" type="password" value="" /> <input id="NameId" name="NameId" type="password" value="Value" />
CheckBox
CheckBox這個函數比較特殊，先看代碼和運行結果：
@Html.CheckBox("NameId", true) @Html.CheckBox("NameId", false)
<input checked="checked" id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" /> <input id="NameId" name="NameId" type="checkbox" value="true" /><input name="NameId" type="hidden" value="false" />
本來，正常情況下它應該只生成一個<input type="checkbox">的標簽，如果CheckBox第二個參數是true則有checked="checked"屬性，表示這個框打勾。但是為什么這個標簽有value="true"而且后面還有個尾巴<input name="NameId" type="hidden" value="false" />呢？
因為在我們ASP.NET MVC中這樣子寫的效果就是：如果這個CheckBox打勾了，那么提交之后就會傳給目標頁面一個NameId="true"的值，如果沒打勾就會傳一個NameId="false"的值。這個值就是由<input name="NameId" type="hidden" value="false" />傳遞的。若是沒有<input name="NameId" type="hidden" value="false" />這一段，如果打勾了之后提交，仍然會傳給目標頁面一個NameId="true"的值，而不打勾則不會傳NameId的值過去。
RadioButton
RadioButton會生成一個<input type="radio">標簽，代碼如下：
@Html.RadioButton("NameId","Value", true) @Html.RadioButton("NameId", "Value", false)
生成代碼如下：
<input checked="checked" id="NameId" name="NameId" type="radio" value="Value" /> <input id="NameId" name="NameId" type="radio" value="Value" />
可以看出RadioButton和CheckBox一樣都有checked參數，而RadioButton多了一個Value參數可以設置。
列表框
DropDownList
DropDownList函數可以創建<select>標簽表示的下拉菜單。在創建下拉菜單之前我們需要創建用<option>標簽表示的菜單選項列表，創建方法如下：
@{ SelectListItem item; List<SelectListItem> list = new List<SelectListItem>(); for(int i=1;i<5;i++) { item = new SelectListItem(); item.Text = "Text" + i; item.Value = "Value" + i; item.Selected = (i==2); list.Add(item); } }
SelectListItem類會生成一個菜單項，其Text屬性表示其顯示的文字，Value屬性表示其對應的值，Selected屬性表示其是否被選中。上面代碼生成了若干個<option>標簽並且當i為2時，標簽被選中。
通過下面代碼可以生成包含上面選項列表的下拉菜單：
@Html.DropDownList("Id", list)
生成的結果如下：
<select id="NameId" name="NameId"> <option value="Value1">Text1</option> <option selected="selected" value="Value2">Text2</option> <option value="Value3">Text3</option> <option value="Value4">Text4</option> </select>
可見DropDownList函數的第一個參數是其id和name，第二個參數就是其四個選項組成的List。每一個選項都有各自的Text、Value，並且第二個選項被選中。
ListBox
ListBox可以生成一個多選列表框，對應HTML里的<select multiple="multiple">標簽，ListBox的結構和DropdownList的結構基本一樣，只是多了multiple="multiple"屬性。我們這里依然使用上面創建的選項列表來創建我們的ListBox，代碼如下：
@Html.ListBox("NameId", list)
生成的結果如下：
<select id="NameId" multiple="multiple" name="NameId"> <option value="Value1">Text1</option> <option selected="selected" value="Value2">Text2</option> <option value="Value3">Text3</option> <option value="Value4">Text4</option> </select>
添加屬性
例如想給一個標簽添加class和style可以用下面辦法：
@Html.TextBox("NameId", "Value", new { @class = "classText",@style="width:200px" })
得到結果如下：
<input class="classText" id="NameId" name="NameId" style="width:200px" type="text" value="Value" />
上面黃色標記部分即為添加的屬性。其實你可以以同樣的方式添加任意的屬性名和屬性值，都會生效。
結尾
這個主題未完待續，由於小弟實在精力有限，且寫作時字斟句酌、精心選例、深入分析、親自實踐，希望大家諒解。
喜歡的話就點個贊吧，或者哪里有疑問留言討論討論。