我要學ASP.NET MVC 3.0（十二）： MVC 3.0 使用自訂的Html控制項

概述

 

在ASP.NET MVC架構中已經封裝了很多基於Html標準的Html控制項，我們可以方便的使用這些控制項輸出想要的內容，使開發變得快捷。

例如ASP.NET MVC架構套件括以下設定標準的HTML控制項（部分控制項）：

• Html.ActionLink()
• Html.BeginForm()
• Html.CheckBox()
• Html.DropDownList()
• Html.EndForm()
• Html.Hidden()
• Html.ListBox()
• Html.Password()
• Html.RadioButton()
• Html.TextArea()
• Html.TextBox()

使用這些控制項做頁面呈現

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
</div>

　　

可見這些封裝起來的控制項，的確在使用起來帶來了巨大的方便，但是僅僅這些控制項，還是遠遠不能滿足我們的需要。有時候我們希望寫出自己的控制項，輸入幾個文字或者屬性名稱更或者加入css樣式，即可得出理想的效果。

 

Html控制項的傳回值

 

每一個Html控制項都返回了MvcHtmlString ，他繼承了HtmlString，微軟把他定義為不能再次編輯的Html字串。如MvcHtmlString : HtmlString。

知道了傳回值我們就知道從哪裡入手寫自己的控制項了。

 

自訂Html控制項

先看個例子

我們用html寫這樣一段代碼

<label for='male'>男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for='female'>女</label>
<input type="radio" name="sex" id="female" />

　　

其運行效果為：

男

女

在MVC項目中添加一個Controls檔案夾

添加名為MyControls的類

代碼：

    public class MyControls
    {
/// <summary>
/// Lable文本
/// </summary>
/// <param name="fortarget">for屬性</param>
/// <param name="text">顯示文本</param>
/// <returns></returns>
        public static MvcHtmlString Label(string fortarget, string text)
        {
string str = String.Format("<label for='{0}'>{1}</label>", fortarget, text);
return new MvcHtmlString(str);

        }

public static MvcHtmlString Label(string text)
        {
return Label("",text);
        }


/// <summary>
/// RadioButton
/// </summary>
/// <param name="nametarget">name屬性</param>
/// <param name="idtarget">id屬性</param>
/// <returns></returns>
        public static MvcHtmlString RadioButton(string nametarget, string idtarget)
        {
string str = String.Format("<input type='radio' name='{0}' id='{1}' />", nametarget, idtarget);
return new MvcHtmlString(str);
        }
    }

　　

上面兩個控制項我們都返回了MvcHtmlString ，用於將String的內容顯示為Html內容。

 Html代碼：

@using MvcApplication.Controls;
@MyControls.Label("male", "男")
@MyControls.RadioButton("sex", "male")
<br />
@MyControls.Label("female", "女")
@MyControls.RadioButton("sex", "female")

運行效果

可以看到與上面標準的Html代碼效果是一樣的。

   

Html控制項自訂擴充

  

上面的例子我們可以看出自訂的控制項完全可以讓我們簡單的實現自己想要的功能。

但是這些要使用自己的命名空間，而且還要找到自己定義的控制項類，有點麻煩，能不能整合到系統自己的Html控制項陳列庫呢？

像這種？

回答當然是肯定的，我們可以將這些自己的控制項做為系統控制項的擴充控制項，在調用的時候不是就簡單而且親切嘛？

 

Html控制項擴充類

 

先看下面的代碼

        //
// 摘要:
//     擷取或設定 System.Web.Mvc.HtmlHelper 對象，該對象用於呈現 HTML 元素。
//
// 返回結果:
//     用於呈現 HTML 元素的 System.Web.Mvc.HtmlHelper 對象。
        public HtmlHelper<TModel> Html { get; set; }

這是系統對頁面上@Html屬性的定義。

我們可以看到該Html是返回了一個HtmlHelper

看到這裡我們的進入點就找到了，就是以HtmlHelper作為擴充類型。

繼續在建好的Controls檔案夾中建立名為LabelExtensions的類和RadioButtonExtensions的類

代碼

    public static class LabelExtensions
    {
public static MvcHtmlString LKLabel(this HtmlHelper helper, string fortarget, string text)
        {
string str = String.Format("<label for='{0}'>{1}</label>", fortarget, text);
return new MvcHtmlString(str);
        }
    }


public static class RadioButtonExtensions
    {
public static MvcHtmlString LKRadioButton(this HtmlHelper helper, string nametarget, string idtarget)
        {
string str = String.Format("<input type='radio' name='{0}' id='{1}' />", nametarget, idtarget);
return new MvcHtmlString(str);

        }
    }

　　

調用控制項

此時我們再寫Html控制項看看

頁面代碼

@using MvcApplication.Controls;
@Html.LKLabel("male", "男")
@Html.LKRadioButton("sex", "male")
<br />
@Html.LKLabel("female", "女")
@Html.LKRadioButton("sex", "female")

　　

運行效果

 

總結

 

對於控制項的擴充極大的滿足了我們在編程過程中的各種需求，使得我們在頁面編程上面變得簡單快捷。

作者：記憶逝去的青春
出處：http://www.cnblogs.com/lukun/

本文著作權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，如有問題，可以通過http://www.cnblogs.com/lukun/ 聯絡我，非常感謝。