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

时间 2019-12-11

标签 mvc 学习系列 helper 辅助方法用户自定义 html 栏目 HTML 繁體版

原文原文链接

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

HTML帮助类，分红三个类型：学习

Inline HTML helpers【内联的HTML帮助类，即@helper辅助方法】
Built-in HTML helpers【也就是内置的HTML帮助类，例如@Html.Label，或者@Html.LabelFor等】
Custom HTML helpers【自定义的HTML帮助类】

在这里，咱们学习第一种，和第三种，第二种太简单了，这里就不介绍了。关于第二种，我以前的文章中有介绍，你们能够看看。ui

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

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

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;
}

<!DOCTYPE html> @*声明辅助方法开始*@
@helper SayHello(string[] strArray) { <ol> @foreach (var item in strArray) { <li>Hello:@item</li> } </ol> }
@*声明辅助方法结束*@ <html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> @*调用辅助方法*@
        @SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"}) </div>
</body>
</html>

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

能够看出来，@helper辅助方法，颇有做用，当一个块须要屡次使用的时候，就可使用@helper辅助方法3d

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

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

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

        public ActionResult AnotherIndex() { return View(); }
    }

AnotherIndex视图：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AnotherIndex</title>
</head>
<body>
    <div> 
        
    </div>
</body>
</html>

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

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


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

@{
    Layout = null;
}

<!DOCTYPE html>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @*调用辅助方法*@
       @HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"}) </div>
</body>
</html>

AnotherIndex视图中：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AnotherIndex</title>
</head>
<body>
    <div> @HTMLClass.SayHello(new string[] { "1","2"}) </div>
</body>
</html>

结果仍是同样的，如今不一样的是，能够在多个页面使用同一个辅助方法了。blog

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
    {
        /// <summary>
        /// 静态方法，建立Image
        /// </summary>
        /// <param name="imageSource">图片源</param>
        /// <param name="alttext">图片的alt属性值</param>
        /// <param name="width">宽度</param>
        /// <param name="hight">高度</param>
        /// <returns></returns>
        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;
}

<!DOCTYPE html>

@using HTMLHelperMVC.CustomerHelper
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @*调用辅助方法*@
        @*@HTMLClass.SayHello(new string[] { "C#","Javascript","ASP.NET MVC","EntityFramework","WCF","WPF","......"})*@

      @CustomerHelperClass.CreateImage("/Image/1.png","Daniel","150","150") </div>
</body>
</html>

结果是：

能够看到静态方法，为咱们建立了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
    {
        /// <summary>
        /// 静态方法，建立Image
        /// </summary>
        /// <param name="imageSource">图片源</param>
        /// <param name="alttext">图片的alt属性值</param>
        /// <param name="width">宽度</param>
        /// <param name="hight">高度</param>
        /// <returns></returns>
        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;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
        @*调用辅助方法*@
        @*@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") </div>
</body>
</html>

结果是同样的。。