MVC學習系列4--@helper輔助方法和用戶自定義HTML方法 - caofangsheng－IT工程師數位筆記本

文章出處

在HTML Helper，幫助類的幫助下，我們可以動態的創建HTML控件。HTML幫助類是在視圖中，用來呈現HTML內容的。HTML幫助類是一個方法，它返回的是string類型的值。

HTML幫助類，分成三個類型：

Inline HTML helpers【內聯的HTML幫助類，例如@Html.Label等】
Built-in HTML helpers【也就是嵌套的HTML幫助類，即@helper輔助方法】
Custom HTML helpers【自定義的HTML幫助類】

在這里，我們學習第二種，和第三種，第一種太簡單了，這里就不介紹了。關于第一種，我之前的文章中有介紹，大家可以看看。

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

<!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方法，結果是：

可以看出來，@helper輔助方法，很有作用，當一個塊需要多次使用的時候，就可以使用@helper輔助方法

然而，你可能看出來了，這樣的寫法，我只能在當前頁面，重復使用這個@helper輔助方法，那如果我想在其他頁面也使用呢？？？？

我們在控制器中另外添加一個方法，并創建視圖頁面：

 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>

結果還是一樣的，現在不同的是，可以在多個頁面使用同一個輔助方法了。

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>