Create a custom HtmlHelper in ASP.

In the development of an ASP. NET MVC application, we often encounter code like Html.label or Html.textbox that will produce a label or input tag on the Web page. These HtmlHelper extension methods are somewhat like controls in WebForm, and simply pass in some parameters to generate the appropriate HTML code. This article describes how to create a htmlhelper.

The return value of the Html.textbox method is mvchtmlstring, which generates some HTML code. Create the HtmlHelper as if you were generating HTML code. The following is an example of how to create a custom htmlhelper using a link htmlhelper with a brief description feature. It will display a link and a brief description of the information related to the content of the link below. Similar functionality may be required on some item list pages with a brief description. The final result previews as.

The above uses 3 custom HtmlHelper, each time the generated code is as follows

1 <div>
2 <p class= "LinkTitle" ><a href= "#" > link title </a></p>
3 <p class= "linkdescription" > Link Description </p>
4 </div>

It may be a little bit more complicated because of the nesting of tags.

After the preparation, create a new static class Linkwithdescriptionextensions, add the static method Linkwithdescription, the code is as follows

Code1//<summary>
2///Link extension method with description
3//</summary>
4//<param name= "HtmlHelper" > HtmlHelper class to expand </param>
5//<param name= "title" > title </param>
6//<param name= "url" > link address </param>
7//<param name= "description" > Description </param>
8///<returns>html code </returns>
9 public static mvchtmlstring linkwithdescription (This htmlhelper htmlhelper, string title, string url, string description )
10 {
11//Generate HTML code related to the title link
Tagbuilder Titlecontainer = new Tagbuilder ("P"); Title Link Container p
Tagbuilder Titlelink = new Tagbuilder ("a"); The text in the title has a link, so it's included in the A tag.
Titlelink.mergeattribute ("href", url); Add an HREF attribute to a and specify a link address
Titlelink.setinnertext (title); Title text
titlecontainer.innerhtml = Titlelink.tostring (); Put A in P
Titlecontainer.addcssclass ("LinkTitle"); Add a style to a title
18
19//Generate HTML code related to link description
Tagbuilder Descriptioncontainer = new Tagbuilder ("P"); Connection Description Container P
descriptioncontainer.innerhtml = description; Descriptive text
Descriptioncontainer.addcssclass ("Linkdescription"); Add a style to a description
23
24//Put the above elements into a div
Tagbuilder div = new Tagbuilder ("div");
The Div. InnerHtml = string. Format ("{0}{1}", Titlecontainer.tostring (), descriptioncontainer.tostring ());
27
28//Returns the generated HTML code
Return Mvchtmlstring.create (Div. ToString ());
30}

It is convenient to clarify the structure before using Tagbuilder to generate HTML code. You can also use the concatenation of strings to generate HTML code, as long as the last to get the necessary HTML code, but I personally do not recommend the use of stitching strings, so not only the thinking is easy to confuse and error prone. The use of Tagbuilder is both clear and error-prone.

In an ASPX page, you can use the

1 <%:html.linkwithdescription ("Test link 1", "#", "This is a description of the test Link 1")%>
2 <%:html.linkwithdescription ("Test Link 2", "#", "This is a description of the Test Link 2")%>
3 <%:html.linkwithdescription ("Test Link 3", "#", "This is a description of the Test Link 3")%>

To invoke the extension method above, information such as the link title, link address, and description can be passed through viewdata and other means. Write in action

Code1//<summary>
2//Demo
3//</summary>
4///<returns>demo View </returns>
5 public ActionResult Demo ()
6 {
7//Create a list of linked information
8 List<linkinfo> links = new list<linkinfo> ();
9 links. ADD (new LinkInfo {Description = "This is a description of the test link 1", Title = "Test link 1", Url = "#"});
Ten links. ADD (new LinkInfo {Description = "This is a description of the test Link 2", Title = "Test link 2", Url = "#"});
Links. ADD (new LinkInfo {Description = "This is a description of the test Link 3", Title = "Test link 3", Url = "#"});
12
13
viewdata["Links" = links;
15
return View ();
17}

Write in the ASPX page

1 <%List<LinkInfo> links=viewdata["links"] as list<linkinfo>;
2 foreach (var link in links)
3 {%>
4 <%:html.linkwithdescription (link. Title, link. URL, link. Description)%>
5 <%}%>

Sample Download

Create a custom HtmlHelper in ASP.