在.NET MVC5檢視中使用Html輔助方法生成下拉選單、多行文字框

ASP。NET MVC 5輔助方法

01

第1節：Html。ActionLink（）

在ASP。NET MVC 5中，使用@Html。ActionLink（）輔助方法用於生成Html的超連結標記a，用於顯示超級連結和相關資訊。輸出的Html標記為文字資訊。

@Html。ActionLink（）常用的基本語法如下：

@Html。ActionLink（“點贊”， “Hit”）

@Html。ActionLink（）過載方法引數說明如下：

第一個引數用於顯示a標記的顯示文字，如“點贊”、“評論”等文字。

第二個引數用於轉向當前控制器的那個操作方法，如“Top”操作方法。

如果需要轉向其它的控制器和操作方法，可以使用帶有3個引數的ActionLink（）方法，檢視程式碼如下：

@Html。ActionLink（“點贊”， “Top”，“Student”）

在@Html。ActionLink（）過載方法中，如果不指定控制器的名稱，則請求的是當前頁面所在的控制器，如果指定了控制器名稱，則會按此控制器名稱組織URL地址。

@Html。ActionLink（）方法執行後的結果如下圖所示：

開啟網頁原始碼看一下，@Html。ActionLink（）輔助方法會輸出什麼樣的Html標記？

從生成後的Html原始碼上看，@Html。ActionLink（）生成的最終Html標記是點贊是一個標準的Html超連結標記。

。NET Mvc 5深入程式設計-從0基礎到深入學習 線上。NET培訓課程

檢視

02

第2節：Html。DropDownList（）

一、基本用法

在ASP。NET MVC 5檢視中使用@Html。DropDownList（）輔助方法表示下拉列表框或下拉選單，生成HTML中的select標記。

@Html。DropDownList（）輔助方法生成的下拉選單中的所有項的資料型別是型別為SelectListItem項的集合。如：List，也可以是SelectList集合。

在@Html。DropDownList（）方法中，每個選項的型別在C#程式碼中都是一個SelectListItem類。

在SelectListItem類中，有3個屬性是非常有用的，說明如下：

Selected表示下拉選單中被選擇的項。

Text表示下拉選單中顯示的文字值。

Value表示下拉選單每項對應的內部值，這個內部值主要用於在後臺程式碼中獲取進行操作。

@Html。DropDownListFor（）是強型別版本，需要配合檢視模型（ViewModel）來使用。

@Html。DropDownListFor（m => m。Name， ViewBag。Places as List）

一般情況下都是透過ViewBag和ViewData向檢視中的@Html。DropDownList（）輔助方法傳遞資料的。

下面我們在控制器的Index（）方法中編寫C#程式碼，生成一個SelectListItem型別的泛型列表集合物件。然後透過ViewBag物件傳遞給檢視，這樣在檢視中，就可以給@Html。DropDownList（）輔助方法填充下拉選項了。

public ActionResult Index（）

{

List PlaceItems = new List（）

new SelectListItem（）{ Text=“中國”，Value=“1”}，

new SelectListItem（）{ Text=“美國”，Value=“2”}，

new SelectListItem（）{ Text=“英國”， Value=“3”}

}；

ViewBag。Places = PlaceItems；

return View（）；

}

當控制器返回給檢視資料之後，在Razor檢視中，就可以給下拉列表框賦值了，其賦值程式碼如下：

@Html。DropDownList（“Places”）

只需要將ViewBag的屬性名稱放在DropDownList（）方法中作為引數存在，則就可以自動將選項填充到下拉選單中。

此時執行出來的結果，預設顯示的是列表項中的第一項，如果預設讓“美國”項選中，則只需要修改控制器中的程式碼，將選中的項使用Selected=true即可。

在SelectListItem類中，指定Selected屬性的值為true即可，那麼當前的列表項就會預設選中。

二、預設空項的文字

當我們在網站上使用下拉選單時，預設情況是沒有值的，而顯示了“請選擇”字樣，這樣提示我們需要手動去選擇一下，避免使用者在沒有選擇的情況下直接使用了預設值。

@Html。DropDownList（“Places”，“請選擇”）

這樣可以做到“請選擇”為第一項。使用的引數名是optionLabel。

此時，如果我們沒有在下拉選單中選擇項，則表單是不能提交的，會提示我們要選擇一個項才能提交，當用戶選擇時，是知道具體要選擇哪一項的，這樣就不會導致使用者忘記而提交錯誤的資訊。

三、轉換為SelectList

也可以將List集合轉換為SelectList型別來顯示資料，SelectList本身就是一個集合。

@Html。DropDownList（“Places”， ViewBag。Places as SelectList）；

這裡使用了as關鍵字來實現相容型別之間的轉換，可輕鬆實現List型別與SelectList型別之間的轉換。

注意：使用SelectList型別的時候，@Html。DropDownList（）輔助方法的第1個引數值要與ViewBag的屬性相同。

03

第3節：Html。TextArea（）

使用@Html。TextArea（）輔助方法表示多行文字框。生成HTML的textarea標記。如下是@Html。TextArea（）的基本用法：

@Html。TextArea（“Remark”）

此輔助方法生成的HTML標記為：此標記的含義是生成一個預設具有2行20列的多行文字框，在多行文字框中可以輸入更多的文字內容。

@Html。TextAreaFor（）輔助方法是強型別版本，需要配合model使用。

不同生產商的瀏覽器，呈現多行文字框的樣子可能稍有不同，但功能都是可輸入多行的文字內容。

@Html。TextareaFor（）方法是強型別版本，需要配合model使用。

04

第4節：Html。CheckBox（）

使用@Html。CheckBox（）輔助方法表示複選框，生成HTML的

第一個引數為標記的id和name的值，第二個引數為bool型別，true表示選中該複選框，false表示未選中。

@Html。CheckBoxFor（）是強型別版本，需要配合檢視模型物件來使用。

在上面，我們學習了4個Html輔助方法，這4個輔助方法也是在Web頁面上最為常用的方法，能夠讓頁面更加豐富。其中@Html。DropDownList（）方法的使用稍有些複雜，需要對每個引數瞭解清楚才能更好的使用該方法。