手把手教你写自定义HtmlHelper方法(Razor视图)-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

手把手教你写自定义HtmlHelper方法(Razor视图)

简介: 时间:2017-03-10 自定义HtmlHelper 在Models文件夹下新建一个类“MyHtmlHelper” 想法一: using System; using System.

时间:2017-03-10
自定义HtmlHelper
在Models文件夹下新建一个类<code>“MyHtmlHelper”</code>
<b>想法一:</b>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace System.Web.Mvc.Html
{
     public static string MyTextBox(this HtmlHelper htmlHelper, string value)
        {
            return string.Format("<input type=\"text\" value={0}/>",value);
        }
}

在前端进行调用
<code>@Html.MyTextBox("老司机")</code>
但是出来的效果是这样的:


img_ad7250d401cf1c1ac917598d1e2e79d7.png
结果

完全不是我们想要的好吧(⊙o⊙)…
所以对于Razor视图,这种方法是行不通的
<b>想法二:</b>
所以我们查看一下IDE定义好的HtmlHelper方法是怎么写的


img_60d7d618d301066d855042e2044c7fab.png
IDE中HtmlHelper的写法

所以我们把返回值做成MvcHtmlString类型,再来试试


img_2d28f34e991aa1ec0a2dfe2d1f89fb79.png
代码补全提示
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace System.Web.Mvc.Html
{
     public static MvcHtmlString MyTextBox(this HtmlHelper htmlHelper, string value)
        {
            //既然返回值类型都不是string类型了,所以我们return一个MvcHtmlString类型
            //在写MvcHtmlString的时候我们可以看到代码自动补全已经给出了一个提示,所以我们就用它试试效果
            //根据提示:使用指定文本值创建 HTML 编码的字符串,所以我们应该传入一个字符串,所以接下来的问题也就是我们需要把<input />做成一个字符串的形式
           return MvcHtmlString.Create();
        }
}

就像这样:

//用到了转义字符
string t=string.Format("<input type=\"text\" value=\"{0}\"/>", text);

所以我们自定义的HtmlHelper辅助方法应该长成这样:

        public static MvcHtmlString MyTextBox(this HtmlHelper htmlHelper, string text)
        {
            string t=string.Format("<input type=\"text\" value=\"{0}\"/>", text);
            return MvcHtmlString.Create(t);
        }

我们可以再进行几次重载

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace System.Web.Mvc.Html
{
    public static class MyHtmlHelper
    {
        /// <summary>
        /// 自定义的TextBox
        /// </summary>
        /// <param name="htmlHelper">扩展方法,不用传值</param>
        /// <param name="text">对应input的text</param>
        /// <returns></returns>
        public static MvcHtmlString MyTextBox(this HtmlHelper htmlHelper, string text)
        {
            string t=string.Format("<input type=\"text\" value=\"{0}\"/>", text);
            return MvcHtmlString.Create(t);
        }
        /// <summary>
        /// 自定义的TextBox
        /// </summary>
        /// <param name="htmlHelper">扩展方法,不用传值</param>
        /// <param name="value">对应input的value</param>
        /// <param name="text">对应input 的text</param>
        /// <returns></returns>
        public static MvcHtmlString MyTextBox(this HtmlHelper htmlHelper, string value,string text)
        {
            string t = string.Format("<input type=\"text\" value=\"{0}\" text=\"{1}\"/>",value,text);
            return MvcHtmlString.Create(t);
        }

    }
}

<b>谢谢O(∩_∩)O~</b>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: