How to add custom HTML helper method in asp.net mvc

I haven't published an article in the blog garden for a long time. Today, I will summarize how to add a custom HTML helper method in asp.net mvc. We are now designing such a current, using a custom HTML method to render a normal img tag. Go straight to the topic:

First, let's take a look at the code of an ordinary img tag in HTML:

<img src="Content/images/封面.jpg" alt="图片" id="img01" width="500px" height="250px" class="img" style="" />

　　This is the result that we output from the server to the browser after rendering, so now let's implement it.

The first step, we need to define an extension method, this extension method is used to render img elements, the code is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

//Note: The first point, the namespace must be System.Web.Mvc.Html
namespace System.Web.Mvc.Html
{
    //Second point, the class name can be any name, but it must be a static class
    public static class CreateImageExtensions
    {
        /*
        public static MvcHtmlString Image(this HtmlHelper html, string id,string url,string width,string height,Dictionary<string,object> attributes)
        {
            TagBuilder tagHelper = new TagBuilder("image");
            tagHelper.GenerateId(id);
            tagHelper.MergeAttribute("src", url);
            tagHelper.MergeAttribute("width", width);
            tagHelper.MergeAttribute("height", height);
            if (attributes!=null&&attributes.Count>0)
            tagHelper.MergeAttributes(attributes);
            return MvcHtmlString.Create( tagHelper.ToString());
        }*/

        //Third, the name of the extension method can use any name, but this method must meet the following two points:
        //01. Must extend from HtmlHelper class;
        //02. The return value type of the method must be: MvcHtmlString
        public static MvcHtmlString CreateImage(this HtmlHelper html, string id, string src, string width, string height,string cssClass, Dictionary<string, object> attributes)
        {
            TagBuilder tagHelper = new TagBuilder("img");
            tagHelper.GenerateId(id);
            tagHelper.MergeAttribute("src", src);
            tagHelper.MergeAttribute("width", width);
            tagHelper.MergeAttribute("height", height);
            if (attributes != null && attributes.Count > 0)
                tagHelper.MergeAttributes(attributes);
            return MvcHtmlString.Create(tagHelper.ToString(TagRenderMode.SelfClosing));
        }
    }
}

　　There are three things worth noting here:

1. The namespace must be System.Web.Mvc.Html, which is critical;

2. The class name can be any name, but it must be a static class. In fact extension methods must also be defined in a static class;

3. The name of the extension method can use any name, but it must be extended from the HtmlHelper class, and the return value type of the method must be: MvcHtmlString.

Of course, we can define and write the parameter list and implementation code of the method according to the actual situation. I am just simply sorting out the steps here. My implementation code is very simple, just to explain the steps. In fact, class names and method names should also be named with "realistic" names. We can name them according to the "conventions" of the MVC framework. For example, the class name is ImageExtensions, and the method name is Image. Another point worth noting is that we can actually define overloaded methods to meet our other needs, such as strongly typed versions, which can refer to the HTML helper methods of the MVC framework.

 

With the three points we just said, the next step is to call the HTML helper method we just defined in the View. For example, we add the following code to the Index.cshtml file:

<div>@Html.CreateImage("img01", Url.Content("~/Content/images/IMG_9084_2寸蓝底.jpg"),"551px","787px","imgCls", null)</div>

　　This is exactly the same as our general HTML helper method of calling the mvc framework.