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>