欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-13 23:36:52
这篇文章,我将带领大家学习HTML Helper。【PS:上一篇-->5.ASP.NET MVC 中的Area【区域】是什么】 HTML Helpers是用来创建HTML标签进而创建HTML控件的。HTML Helper仅仅是一个返回HTML字符串的方法。ASP.NET MVC 中有三种HTML H ......

         这篇文章,我将带领大家学习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视图:

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

 视图页面:

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

运行一下:【效果图】

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

 

 现在假如,我还有一个test页面,也要显示这个,怎么办呢?我们直接在test页面写一下看看:

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

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

 

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

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

右键项目创建一个app_code文件夹:

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

 

 在app_code文件夹下,创建一个分布视图:

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

 

然后,把刚才在home控制器index页面的内联html helper方法声明全部弄过来:

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

然后运行项目:看:

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

咋回事还是报错了,现在index页面也报错了,哪里出问题了???

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

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

然后视图页面修改如下:

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

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

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

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

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

看这样就实现了,可以在多个页面实现【内联html helpers】inline html helpers了。

2.1 现在来看看,内置的html helpers中的标准 html helpers了

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

运行效果如下:

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

 2.2 现在开始学习 【built-in html helpers】内置的html之强类型html helpers了

在models文件夹下创建一个userinfo类

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

为了演示这个强类型的,我新建一个控制器account,并创建index视图:

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

运行程序:

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

2.3 现在看看模板化的html helpers怎么做

我们在account控制器中,添加一个temp方法:并创建temp视图:

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

 

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

 

 运行到temp页面:

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

 

 发现@html.editorformodel()自动为我们创建了控件

3.最后我们来看看,怎么创建自定义html helpers

创建一个custom控制器:

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

创建一个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);
        }

    }
}

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

 

注意这个类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视图中:

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

 

 运行程序:

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

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

 

 好了,这篇文章到此为止就介绍完了,asp.net mvc html helpers了,学会了么?