MVC-HtmlHelper簡單總結

JoeSnail發表於2017-10-24

Asp.Net MVC - Htmlhelper 總結

HtmlHelper是一個返回Html字串的方法。返回的字串可以是任意型別。例如你可以使用HtmlHelper方法返回一個標準的html標籤<input> <button> <img>等等。

你也可以自定義HtmlHelper方法，返回一些複雜的html，來展示資料。

Razor編碼

首先需要認識瞭解一下Razor的編碼

在Razor中返回型別為IHtmlString的都會被編碼成html，其他都是string字串。

//Controller
 string msgStr = "this is an html element: <input>";
 ViewBag.Msg = msgStr;
 ViewBag.Msg1 = new MvcHtmlString(msgStr);

Razor:

MVC-HtmlHelper簡單總結

Html.Encode()返回型別為string。
Html.Raw()返回型別為IHtmlString。
MvcHtmlString.Create返回型別為繼承自IHtmlString的MvcHtmlStrin。
ViewBag是動態型別，Controller裡ViewBag是什麼型別，在Razor對應就是何種型別。

簡單總結下HtmlHelper的幾種擴充套件方法。

1. 檢視中的Helper方法

在razor頁面中使用@helper建立一個自定義的方法，該方法只能用在當前razor頁面中。

@helper ListingItems(string[] items)
    {
    <ol>
    @foreach (string item in items)
    {
    <li>@item</li>
    }
    </ol>
    }
    
    <h3>Programming Languages:</h3>
    
    @ListingItems(new string[] { "C", "C++", "C#" })
    
    <h3>Book List:</h3>
    
    @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })

2. 常見的HtmlHelper擴充套件方法

該型別的Helper可以生成多種Hmtl控制元件如：text boxe checkbox等待。

首先宣告一個Model

[DisplayName("學生")]
public class Student
{
    public int StudentId { get; set; }
    [Display(Name="姓名")]
    public string StudentName { get; set; }
    public int Age { get; set; }
    public bool isNewlyEnrolled { get; set; }
    public string Password { get; set; }
    [DisplayFormat(DataFormatString = "{0:yyyy年MM月dd日}")]
    [Display(Name ="生日")]
    public DateTime BirthDay{get;set;}
}

1.1 TextBox

Razor:

@model Student
//傳遞一個null值
@Html.TextBox("StudentName", null, new { @class = "form-control" })  
//使用一個字串，作為值
@Html.TextBox("StudentName", "this is value", new { @class = "form-control" } 
//Controller:ViewBag.StudentName="Janes";
//使用ViewBag獲取資料
@Html.TextBox("StudentName", (string)ViewBag.StudentName, new { @class = "form-control" })  
//Controller: StudentName="Janes";
//使用Model獲取資料
@Html.TextBox("StudentName", Model.StudentName, new { @class = "form-control" })

Html:

<input class="form-control" id="StudentName"  name="StudentName"  type="text"  value="" />
<input class="form-control" id="StudentName"  name="StudentName"  type="text"  value="this is value" />
<input class="form-control" id="StudentName"  name="StudentName"  type="text"  value="Janes" />
<input class="form-control" id="StudentName"  name="StudentName"  type="text"  value="Janes" />

1.2 TextBoxFor

Razor:

@model Student
//Controller: StudentName="Janes";
@Html.TextBoxFor(m => m.StudentName, new { @class = "form-control" })

Html:

<input class="form-control" id="StudentName"  name="StudentName"  type="text" value="Janes" />

TextBox和TextBoxFor的區別：

@Html.TextBox是一個弱型別，@Html.TextBoxFor()是個強型別。
@Html.TextBox引數是一個字串，@Html.TextBoxFor引數是一個lambda表示式。
@Html.TextBox如果屬性拼寫錯誤在編譯的時候不會報錯，只能在執行才會報錯。
@Html.TextBoxFor在編譯的時候會提示錯誤。

2.1 TextArea

TextArea()方法是一種若型別的方法，name引數是一個字串。name引數可以是Model的屬性名。它將指定的屬性與textarea繫結在一起。因此，它會自動顯示文字區域中的Model的屬性值，反之亦然。

Razor:

@Html.TextArea("Textarea1", "val", 5, 15, new { @class = "form-control" })

Html:

<textarea class="form-control" cols="15" id="Textarea1" name="Textarea1" rows="5">val</textarea>

2.2 TextAreaFor

TextAreaFor方法是一種強型別的擴充套件方法。它為使用lambda表示式指定的Model中的屬性生成了一個多行的元素。TextAreaFor方法將指定的Model屬性繫結到textarea元素。因此，它會自動顯示文字區域中的Model屬性值，反之亦然。

Razor:

@model Student

@Html.TextAreaFor(m => m.Description, new { @class = "form-control" })

Html:

<textarea class="form-control" cols="20"  id="Description"  name="Description"  rows="2"></textarea>

3.1 Password

Razor:

@Html.Password("OnlinePassword")

Html:

<input id="OnlinePassword"  name="OnlinePassword"  type="password"  value="" />

3.2 PasswordFor

Razor:

@model Student
//Controller: Password="mypassword";
@Html.PasswordFor(m => m.Password)

Html:

<input id="Password" name="Password" type="password" value="mypassword" />

4.1 Hidden

生成一個包含指定名稱、值和html屬性的輸入隱藏欄位元素。
Razor:

@model Student
//Controller:StudentId=1;
@Html.Hidden("StudentId")

Html:

<input id="StudentId" name="StudentId" type="hidden" value="1" />

4.2 HiddenFor

是一種強型別擴充套件方法。它為使用lambda表示式指定的Model屬性生成一個隱藏的輸入元素。Hiddenfor方法將一個指定的Model屬性繫結到一個指定的物件屬性。因此，它自動將Model屬性的值設定為隱藏欄位，反之亦然。

Razor:

@model Student
@Html.HiddenFor(m => m.StudentId)

Html:

<input data-val="true" id="StudentId" name="StudentId" type="hidden" value="1" />

5.1 CheckBox

Razor:

@Html.CheckBox("isNewlyEnrolled", true)

Html:

<input checked="checked" id="isNewlyEnrolled"  name="isNewlyEnrolled" type="checkbox" value="true" />

5.2 CheckBoxFor

Razor:

@model Student

@Html.CheckBoxFor(m => m.isNewlyEnrolled)

Html:

<input data-val="true"  data-val-required="The isNewlyEnrolled field is required."  id="isNewlyEnrolled"  name="isNewlyEnrolled"   type="checkbox"    value="true" />
<input name="isNewlyEnrolled" type="hidden" value="false" />

6.1 RadioButton

Razor:

Male:   @Html.RadioButton("Gender","Male")  
Female: @Html.RadioButton("Gender","Female")

Html:

Male: <input checked="checked"  id="Gender"    name="Gender"    type="radio"     value="Male" />

Female: <input id="Gender"    name="Gender"     type="radio"     value="Female" />

6.2 RadioButtonFor

Razor:

@model Student

@Html.RadioButtonFor(m => m.Gender,"Male")
@Html.RadioButtonFor(m => m.Gender,"Female")

Html:

<input checked="checked" id="Gender" name="Gender" type="radio" value="Male" />

<input id="Gender" name="Gender" type="radio" value="Female" />

7.1 DropDownList

Razor:

@model Student

@Html.DropDownList("StudentGender",   new SelectList(Enum.GetValues(typeof(Gender))),      "Select Gender",    new { @class = "form-control" })

Html:


<select class="form-control" id="StudentGender" name="StudentGender">
    <option>Select Gender</option> 
    <option>Male</option> 
    <option>Female</option> 
</select>

7.2 DropDownListFor

Razor:

@Html.DropDownListFor(m => m.StudentGender,     new SelectList(Enum.GetValues(typeof(Gender))),    "Select Gender")

Html:

<select class="form-control" id="StudentGender" name="StudentGender">
    <option>Select Gender</option> 
    <option>Male</option> 
    <option>Female</option> 
</select>

8.1 ListBox

Razor:

@Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"}))

html:

<select id="ListBox1" multiple="multiple" name="ListBox1"> <option>Cricket</option> <option>Chess</option> </select>

### 9.1 Display
Razor:

@model Student

@Html.Display("StudentName")

Html:

Steve

9.2 DisplayFor

Raozr:

@model Student

@Html.DisplayFor(m => m.StudentName)

Html:

Steve

10.1 Label

Razor:

@Html.Label("StudentName")
@Html.Label("StudentName","Student-Name")

Html:

<label for="StudentName">姓名</label>
<label for="StudentName">Student-Name</label>

10.2 LabelFor

Razor:

@model Student

@Html.LabelFor(m => m.StudentName)

Html:

<label for="StudentName">姓名</label>

11.1 Editor

該擴充套件方法是一種基於資料型別生成html輸入元素的方法。Editor()或EditorFor()擴充套件方法基於Model物件的屬性的資料型別生成html標籤。

資料型別	Html標籤
string	`<input type="text" >`
int	`<input type="number" >`
decimal, float	`<input type="text" >`
boolean	`<input type="checkbox" >`
Enum	`<input type="text" >`
DateTime	`<input type="datetime" >`

Razor:

StudentId:      @Html.Editor("StudentId")
Student Name:   @Html.Editor("StudentName")
Age:            @Html.Editor("Age")
Password:       @Html.Editor("Password")
isNewlyEnrolled: @Html.Editor("isNewlyEnrolled")
Gender:         @Html.Editor("Gender")
DoB:            @Html.Editor("DoB")

Html:
MVC-HtmlHelper簡單總結

11.2EditorFof

Razor:

StudentId:      @Html.EditorFor(m => m.StudentId)
Student Name:   @Html.EditorFor(m => m.StudentName)
Age:            @Html.EditorFor(m => m.Age)
Password:       @Html.EditorFor(m => m.Password)
isNewlyEnrolled: @Html.EditorFor(m => m.isNewlyEnrolled)
Gender:         @Html.EditorFor(m => m.Gender)
DoB:            @Html.EditorFor(m => m.DoB)

Html:
MVC-HtmlHelper簡單總結
---

12 Form

Razor:

  @using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { @class = "form" }))
    {
        
    }

Html:

<form action="/ControllerName/ActionName" class="form" method="post">       
     
</form>

13.1 Html.Action() 執行一個Action，並返回html字串。

13.2 Html.ActionLink() 生成一個超連結。

如:

Html.ActionLink("link text", "someaction", "somecontroller", new { id = "123" }, null)

<a href="/somecontroller/someaction/123">link text</a>

13.3 Url.Action() 返回一個Action的連結地址

如：

Url.Action("someaction", "somecontroller", new { id = "123" })

/somecontroller/someaction/123

自定義Helper擴充套件方法

您還可以通過在HtmlHelper類上建立擴充套件方法或在類中建立靜態方法來建立自定義Helper方法。

    public static class CustomHelpers
    {
     //Submit Button Helper
     public static MvcHtmlString SubmitButton(this HtmlHelper helper, string 
     buttonText)
     {
     string str = "<input type=\"submit\" value=\"" + buttonText + "\" />";
     return new MvcHtmlString(str);
     }
     //Readonly Strongly-Typed TextBox Helper
     public static MvcHtmlString TextBoxFor<TModel, TValue>(this 
     HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
     expression, bool isReadonly)
     {
     MvcHtmlString html = default(MvcHtmlString);
     
     if (isReadonly)
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression, new { @class = "readOnly",
     @readonly = "read-only" });
     }
     else
     {
     html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
     expression);
     }
     return html;
     }
    }

以上就是HtmlHelper的一些常用擴充套件方法。

vuex簡單總結
2018-08-07
Vue
MySQL簡單總結
2018-06-15
MySql
express簡單總結
2018-01-17
Express
列舉簡單總結
2019-04-20
sql注入簡單總結
2018-12-02
SQL
Pygame的簡單總結
2020-12-26
GAM
外部表簡單總結
2014-11-26
Oracle profiles簡單總結
2006-05-16
Oracle
js閉包簡單總結
2019-03-12
JS
前端模組化簡單總結
2020-11-04
前端
Django ORM的簡單總結
2017-12-26
DjangoORM
簡簡單單的總結，意如生活的平淡
2022-01-15
資料結構簡單要點總結
2011-12-09
資料結構
HTTP/2 特性的簡單總結
2019-03-07
HTTP
es6，async簡單總結
2018-08-07
Java基礎集合簡單總結
2020-12-29
Java
HTML簡單知識的總結
2018-06-24
HTML
GPU 渲染管線簡單總結（網上資料總結）
2019-03-03
GPU
Java 新特性總結——簡單實用
2019-07-17
Java
Android熱修復簡單總結
2019-02-18
Android
設計模式簡單總結（待完善）
2018-12-24
設計模式
超簡單！正規表示式總結
2020-11-05
Random和Math.random()簡單總結
2018-01-30
random
LevelDB的一些簡單總結
2016-10-15
z-index 應用簡單總結
2013-08-19
Index
rman的一點簡單總結 1
2015-07-04
Java IO8：IO簡單總結
2015-10-20
Java
關於STL容器的簡單總結
2024-04-13
Flex4 AS3的簡單繫結總結
2013-01-03
FlexS3
ES6簡單總結（搭配簡單的講解和小案例）
2018-01-31
python 內建函式簡單總結
2019-01-13
Python函式
【轉載】crawler4j簡單總結
2018-12-30
初始化ArrayList的簡單方法總結
2018-06-18
關於負載均衡的簡單總結
2017-06-27
負載
c++ STL Algorithm簡單總結備忘
2017-01-14
C++Go
VMServer安裝RAC簡單總結體會
2014-02-18
Server
Photoshop學習方法論簡單總結(轉)
2007-08-12
總結的一些簡單面試題目
2020-03-22
面試題

MVC-HtmlHelper簡單總結

Asp.Net MVC - Htmlhelper 總結

Razor編碼

1. 檢視中的Helper方法

2. 常見的HtmlHelper擴充套件方法

1.1 TextBox

1.2 TextBoxFor

2.1 TextArea

2.2 TextAreaFor

3.1 Password

3.2 PasswordFor

4.1 Hidden

4.2 HiddenFor

5.1 CheckBox

5.2 CheckBoxFor

6.1 RadioButton

6.2 RadioButtonFor

7.1 DropDownList

7.2 DropDownListFor

8.1 ListBox

9.2 DisplayFor

10.1 Label

10.2 LabelFor

11.1 Editor

11.2EditorFof

12 Form

13.1 Html.Action() 執行一個Action，並返回html字串。

13.2 Html.ActionLink() 生成一個超連結。

13.3 Url.Action() 返回一個Action的連結地址

自定義Helper擴充套件方法

相關文章