6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】

2022-01-13 09:05:03 阅读：191 来源： 互联网

标签：5.0 ASP Helper 创建视图 HTML Helpers using

https://www.cnblogs.com/caofangsheng/p/10462494.html

这篇文章，我将带领大家学习HTML Helper。【PS：上一篇-->5.ASP.NET MVC 中的Area【区域】是什么】

HTML Helpers是用来创建HTML标签进而创建HTML控件的。HTML Helper仅仅是一个返回HTML字符串的方法。ASP.NET MVC 中有三种HTML Helpers：

1.Inline HTML Helper(内联HTML Helper):主要是通过使用Razor语法中的@helper标记来创建。内联HTML Helper仅仅只能在同一个视图中，被重复使用。如果想要在所有的视图中都能使用，有办法可以解决。待会会介绍。

2.Built-In-HTML Helpers(内置的HTML Helpers)：这类的HTML Helper是HtmlHelper类的扩展方法，进一步分为3类：

2.1 标准HTML Helper【Standard HTML Helpers】：用来创建最常用得HTML标签。

2.2 强类型的HTML Helpers【Strongly Typed HTML Helpers】：这种是HTML通过Model类的属性生成，使用Lambda表达式来生成HTML。

　 2.3 模板化的HTML Helpers 【Templated HTML Helpers】:这种helper生成的HTML取决于Model类的属性。

3.自定义的HTML helpers【Custom HTML Helpers】:你可以通过使用HtmlHelper扩展方法，或者在工具类中使用静态方法来创建自定义的helper 方法。

1.先来看看内联的HTML Helper。

创建项目HTMLHelpersWithMVC，同时新建一个Home控制器，和Index视图：

视图页面：

运行一下：【效果图】

现在假如，我还有一个Test页面，也要显示这个，怎么办呢？我们直接在Test页面写一下看看：

看，报错了噢，内联方法只能在声明的视图页面使用噢，怎么办呢？我们可以这样做：

右键项目创建一个App_Code文件夹：

在App_Code文件夹下，创建一个分布视图：

然后，把刚才在Home控制器Index页面的内联Html Helper方法声明全部弄过来：

然后运行项目：看：

咋回事还是报错了，现在Index页面也报错了，哪里出问题了？？？

我们这样改：把App_Code文件夹下的视图页面，属性改成嵌入的资源和如果较新则复制

然后视图页面修改如下：

然后接着运行看看两个页面的效果：

看这样就实现了，可以在多个页面实现【内联HTML Helpers】Inline HTML Helpers了。

2.1 现在来看看，内置的HTML Helpers中的标准 HTML Helpers了。

运行效果如下：

2.2 现在开始学习【Built-In HTML Helpers】内置的HTML之强类型HTML Helpers了：

在Models文件夹下创建一个UserInfo类

为了演示这个强类型的，我新建一个控制器Account，并创建Index视图：

运行程序：

2.3 现在看看模板化的HTML Helpers怎么做：

我们在Account控制器中，添加一个Temp方法：并创建Temp视图：

运行到Temp页面：

发现@Html.EditorForModel()自动为我们创建了控件。

3.最后我们来看看，怎么创建自定义HTML Helpers

创建一个Custom控制器：

创建一个CustomClass:

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

namespace HTMLHelpersWithMVC.Common
{
    public static class CustomClass
    {
        /// <summary>
        /// 扩展方法实现方式--创建提交按钮
        /// </summary>
        /// <param name="helper">扩展类对象</param>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(this HtmlHelper helper, string name, string value)
        {
            var btn = "<input type='submit' name='"+name+"' value='"+value+"'/>";
            return new MvcHtmlString(btn);
        }
        /// <summary>
        /// 静态类实现方式--创建提交按钮
        /// </summary>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(string name, string value)
        {
            var btn = "<input type='submit' name='" + name + "' value='" + value + "'/>";
            return new MvcHtmlString(btn);
        }

    }
}

注意这个类CustomClass类必须要在程序根目录下创建，在视图中才能点出来【有智能提示】

正确的：

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

namespace HTMLHelpersWithMVC
{
    public static class CustomClass
    {
        /// <summary>
        /// 扩展方法实现方式--创建提交按钮
        /// </summary>
        /// <param name="helper">扩展类对象</param>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(this HtmlHelper helper, string name, string value)
        {
            string btn = "<input type='submit' name='" + name + "' value='" + value + "'/>";
            return new MvcHtmlString(btn);
        }
        /// <summary>
        /// 静态类实现方式--创建提交按钮
        /// </summary>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(string name, string value)
        {
            string btn = "<input type='submit' name='" + name + "' value='" + value + "'/>";
            return new MvcHtmlString(btn);
        }

    }
}

在Custom控制器的Index视图中：

运行程序：

好了，这篇文章到此为止就介绍完了，ASP.NET MVC HTML Helpers了，学会了么？

标签：5.0,ASP,Helper,创建,视图,HTML,Helpers,using
来源： https://www.cnblogs.com/wfy680/p/15796172.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】