MVC 3.0学习笔记(自定义控件)

现有控件：

 

          例如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()

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")

　　

运行效果

 

这些例子，挺好的，学习用，还行