Asp.net MVC中關於@Html標籤Label、Editor使用

來源:互聯網
上載者:User

@Html協助器簡單說明,記錄些基本的跟HTML中對應的@html協助器,@Html基本包含了html中的表單控制項和常用Html
在@Html中,帶有For的主要是針對強型別的Html類型。
用於說明@Html中標籤,定義Student對象用於輔助說明,

public class Student{  /// <summary>        /// 姓名        /// </summary>        ///         [DisplayName("姓名")]        public string Name        {            get;            set;        }        /// <summary>        /// 年齡        /// </summary>        public int Age        {            get;            set;        }}

在cshtml頁面定義@model Student
Label標籤,在LabelExtensions類中實現
1、 @Html.Label()
返回一個 HTML label 元素和由指定運算式表示的屬性的屬性名稱。
參數:string expression,string labelText
expression:一個運算式表示要顯示的屬性
labelText:顯示文字
例: 

        @Html.Label("weight")       輸出:<label for="weight">weight</label>@Html.Label("name","姓名")  輸出:<label for="name">姓名</label>


2、 @Html.LabelFor()
和@Html.Label()類似,只是主要針對強型別
例:

        @Html.LabelFor(model=>mode.Name) 輸出:<label for="Name">Name</label>@Html.LabelFor(model=>mode.Name,"姓名") 輸出:<label for="name">姓名</label>如果在上面實體添加[DisplayName("姓名")]特性(引用System.ComponentModel;)則會顯示:<label for="Name">姓名</label>用於顯示漢字很方便


3、 @Html.LabelForModel()
例:@Html.LabelForModel("name") 輸出: <label for="">name</label>

Editor標籤,表示應用程式中的Input表單控制項,在EditorExtensions實現
1、 @Html.Editor() 
返回一個由運算式表示的對象中的每個屬性所對應的input元素
例:

    a、@Html.Editor("name") 輸出;<input class="text-box single-line" id="name" name="name" type="text" value="" />


b、在載入的時候為input初始化值,這裡用asp.net MVC新增的ViewBag屬性;

      @{ViewBag.NameValue="張三"; // NameValue為動態類型或者ViewData["NameValue"]="張三";}@Html.Editor("NameValue") 輸出<input class="text-box single-line" id="NameValue" name="NameValue" type="text" value="張三" />


c、@Html.Editor("name",Model.Name)
  第二個參數為object additionalViewData 參數 主要為視圖模型的資料 (Model為System.Web.Mvc.Model對象,在載入頁面引用@model Student 對象),
  但不知道這樣Input為什麼沒顯示預設值。不知道不是不asp.net mvc3中不支援了,希望知道的給予說明下。
2、 @Html.EditorFor()
返回一個由運算式表示的對象中的每個屬性所對應的input元素,主要是針對強型別,一般這種方式用得多些
a、@Html.EditorFor(mode=>mode.Name)
如果返回的View給Student實體賦予值,則輸出輸出<input class="text-box single-line" id="Name" name="Name" type="text" value="預設值" />否則Value為"";
b、@Html.EditorFor(mode=>mode.Name,"templateName")
第二個參數為模版名稱,模版的定義:
首先在目錄View/Shared/建立檔案夾EditorTemplates/templateName.cshtml 即:View/Shared/EditorTemplates/templateName.cshtml
註:這務必用EditorTemplates作為檔案夾
templateName.cshtml代碼為: @Html.DropDownList("",new SelectList(new []{"1","2","3"}))表示一個值為1,2,3的下拉式清單
這時就可以調用@Html.EditorFor(mode=>mode.Name,"templateName"),則顯示成一個下拉式清單,如果模版中設定的一個文字框則顯示成文字框。
同時,也可以在實體Student中的Name屬性加上[UIHint("templateName")]特性 如果加上這個則可在調用的時候不用顯示指定模版名稱
用@Html.EditorFor(mode=>mode.Name)即可顯示成下拉框,同時所有用這個欄位的都將變成下拉式清單
相當與Html中的Input控制項
@Html.EditorFor(model=>model.Age)
頁面顯示為:   <input id="Age" name="Age" type="text" value="" />
3、 @Html.EditorForModel()
如果使用預設值,不帶任何參數,則迴圈顯示Model中所有的資訊,不過需要放在迴圈中
如:<input class="text-box single-line" id="Name" name="Name" type="text" value="" />
   <input class="text-box single-line" id="Age" name="Age" type="text" value="" />

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.