[转]我要学ASP.NET MVC 3.0（十二）： MVC 3.0 使用自定义的Html控件

本文转自：http://www.cnblogs.com/lukun/archive/2011/08/05/2128693.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/ 联系我，非常感谢。