當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

HtmlHelper用法大全(上)

發布時間：2023/12/18 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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")

生成標簽如下：

可見TextBox的第一個參數被賦值給input標簽的id和name屬性，如果沒有value參數則value為空，如果有則賦值給value屬性。

Hidden

Hidden用來在頁面中寫入<input type="hidden">標簽，其用法和TextBox類似。代碼如下：

@Html.Hidden("NameId") @Html.Hidden("NameId", "Value")

結果如下：

Password

Password用來寫入<input type="password">標簽，其用法和TextBox類似。代碼如下：

@Html.Password("NameId") @Html.Password("NameId", "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)

生成代碼如下：

可以看出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)

生成的結果如下：

可見DropDownList函數的第一個參數是其id和name，第二個參數就是其四個選項組成的List。每一個選項都有各自的Text、Value，并且第二個選項被選中。

ListBox

ListBox可以生成一個多選列表框，對應HTML里的<select multiple="multiple">標簽，ListBox的結構和DropdownList的結構基本一樣，只是多了multiple="multiple"屬性。我們這里依然使用上面創建的選項列表來創建我們的ListBox，代碼如下：

@Html.ListBox("NameId", list)