MVC学习系列4--@helper辅助方法和用户自定义HTML方法-白红宇的个人博客

MVC学习系列4--@helper辅助方法和用户自定义HTML方法

发布日期：2021-05-09 01:05:08 浏览次数：19 分类：博客文章

本文共 5823 字，大约阅读时间需要 19 分钟。

在HTML Helper，帮助类的帮助下，我们可以动态的创建HTML控件。HTML帮助类是在视图中，用来呈现HTML内容的。HTML帮助类是一个方法，它返回的是string类型的值。

HTML帮助类，分成三个类型：

Inline HTML helpers【内联的HTML帮助类，即@helper辅助方法】

Built-in HTML helpers【也就是内置的HTML帮助类，例如@Html.Label，或者@Html.LabelFor等】

Custom HTML helpers【自定义的HTML帮助类】

在这里，我们学习第一种，和第三种，第二种太简单了，这里就不介绍了。关于第二种，我之前的文章中有介绍，大家可以看看。

Inline HTML helpers【内联的HTML帮助类，即@helper辅助方法】

首先新建一个空白的MVC项目，创建一个Home控制器，默认的代码如下：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace HTMLHelperMVC.Controllers{    public class HomeController : Controller    {        // GET: Home        public ActionResult Index()        {            return View();        }    }}

添加对应的Index视图：在视图中写上@Helper辅助方法：

@{    Layout = null;}@*声明辅助方法开始*@@helper SayHello(string[] strArray){    
    
             @foreach (var item in strArray)        {            
     Hello:@item
        }    
    
}@*声明辅助方法结束*@    
        Index    
    
              @*调用辅助方法*@        @SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})

接着运行Index方法，结果是：

可以看出来，@helper辅助方法，很有作用，当一个块需要多次使用的时候，就可以使用@helper辅助方法

然而，你可能看出来了，这样的写法，我只能在当前页面，重复使用这个@helper辅助方法，那如果我想在其他页面也使用呢？？？？

我们在控制器中另外添加一个方法，并创建视图页面：

public class HomeController : Controller    {        // GET: Home        public ActionResult Index()        {            return View();        }        public ActionResult AnotherIndex()        {            return View();        }    }

AnotherIndex视图：

@{    Layout = null;}    
        AnotherIndex

那么，我们现在要怎么做呢，才能在所有页面都能使用同一个@helper辅助方法呢？？？ 这样；我们先添加一个App_Code文件夹，然后在里面新建一个视图，把刚才声明辅助方法的部分，完整不动的拷贝过去。

 接着编译一下整个项目【PS：如果没有出来智能提示，就改一下，App_Code下，视图的属性，改为

，在页面中，Index视图中，这样调用：

@{    Layout = null;}    
        Index    
    
              @*调用辅助方法*@        @HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})

AnotherIndex视图中：

@{    Layout = null;}    
        AnotherIndex    
    
              @HTMLClass.SayHello(new string[] { "1","2"})

结果还是一样的，现在不同的是，可以在多个页面使用同一个辅助方法了。

2.Custom HTML helpers【自定义的HTML帮助类】

现在看看第二种，也就是自定义的HTML帮助类：

我们可以创建2种方式的，自定义帮助类：

1.Using static methods【使用静态的方法】

2.Using extension methods【使用扩展方法】

首先看看，使用静态方法怎么做的。

新建一个文件夹【CustomerHelper】，在CustomerHelper下面新建一个帮助类【CustomerHelperClass】

帮助类中，我们新建一个静态的方法CreateImage：

using System;using System.Collections.Generic;using System.Linq;using System.Web;//MvcHtmlString需要引入命名空间using System.Web.Mvc;namespace HTMLHelperMVC.CustomerHelper{    public class CustomerHelperClass    {        ///         /// 静态方法，创建Image        /// 
        /// 图片源        /// 图片的alt属性值        /// 宽度        /// 高度        /// 
            public static MvcHtmlString CreateImage(string imageSource, string altText, string width, string hight)        {            //通过TagBuilder创建img标签            TagBuilder imageTag = new TagBuilder("img");            //MergeAttribute添加新特性            imageTag.MergeAttribute("src", imageSource);            imageTag.MergeAttribute("alt", altText);            imageTag.MergeAttribute("width", width);            imageTag.MergeAttribute("hight",hight);            // MvcHtmlString.Create,使用指定的文本值，创建HTML编码的字符串            return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing));        }    }}

然后我们在视图中调用:

@{    Layout = null;}@using HTMLHelperMVC.CustomerHelper    
        Index    
    
              @*调用辅助方法*@        @*@HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})*@        @CustomerHelperClass.CreateImage("/Image/1.png","Daniel","150","150")

结果是：

可以看到静态方法，为我们创建了Image控件，上面的调用需要Using一下辅助类：

@using HTMLHelperMVC.CustomerHelper

每次都要using是不是很麻烦？？？

我们可以在视图的配置文件中，加上这句话：

顺便改一下配置文件的属性：

在编译一下：

之后，我们去掉视图页面中的

@using HTMLHelperMVC.CustomerHelper

得到的结果也是一样的。

再来说说，扩展方法的方式，自定义辅助HTML吧：

其实这就更简单了，无非就是扩展方法，扩展HTMLHelper类：

using System;using System.Collections.Generic;using System.Linq;using System.Web;//MvcHtmlString需要引入命名空间using System.Web.Mvc;namespace HTMLHelperMVC.CustomerHelper{    public static class CustomerHelperClass    {        ///         /// 静态方法，创建Image        /// 
        /// 图片源        /// 图片的alt属性值        /// 宽度        /// 高度        /// 
            public static MvcHtmlString CreateImage(string imageSource, string altText, string width, string hight)        {            //通过TagBuilder创建img标签            TagBuilder imageTag = new TagBuilder("img");            //MergeAttribute添加新特性            imageTag.MergeAttribute("src", imageSource);            imageTag.MergeAttribute("alt", altText);            imageTag.MergeAttribute("width", width);            imageTag.MergeAttribute("hight",hight);            // MvcHtmlString.Create,使用指定的文本值，创建HTML编码的字符串            return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing));        }        public static MvcHtmlString CreateImage(this HtmlHelper htmlHelper, string imageSource, string altText, string width, string hight)        {            //通过TagBuilder创建img标签            TagBuilder imageTag = new TagBuilder("img");            //MergeAttribute添加新特性            imageTag.MergeAttribute("src", imageSource);            imageTag.MergeAttribute("alt", altText);            imageTag.MergeAttribute("width", width);            imageTag.MergeAttribute("hight", hight);            // MvcHtmlString.Create,使用指定的文本值，创建HTML编码的字符串            return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing));        }    }}

视图中调用：

@{    Layout = null;}    
        Index    
    
              @*调用辅助方法*@        @*@HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})*@        @CustomerHelperClass.CreateImage("/Image/1.png","Daniel","150","150")        @Html.CreateImage("/Image/1.png", "Daniel", "150", "150")

结果是一样的。。

上一篇：MVC学习系列5--Layout布局页和RenderSection的使用

下一篇：MVC学习系列3--怎么从控制器向视图传递数据

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章