[Go] I want to learn ASP. NET MVC 3.0 (12): MVC 3.0 using custom HTML controls

This article transferred from: http://www.cnblogs.com/lukun/archive/2011/08/05/2128693.html

Overview

Many HTML-based HTML controls have been encapsulated in the ASP framework, and we can easily use these controls to output what we want, making development fast.

For example, the ASP. NET MVC framework includes the following settings for standard HTML controls (some controls):

• Html.ActionLink ()
• Html.BeginForm ()
• Html.checkbox ()
• Html.dropdownlist ()
• Html.endform ()
• Html.hidden ()
• Html.listbox ()
• Html.password ()
• Html.radiobutton ()
• Html.textarea ()
• Html.textbox ()

Use these controls for page rendering

  <div class= "Editor-label" >  @Html. labelfor (model = model. Name) </div>< Span style= "color: #000000;" > <div class= "Editor-field" > @Html. editorfor (model = Model. Name) @Html. validationmessagefor (model = model. Name) </div>  

　　

It can be seen that these packaged controls are really handy to use, but these controls alone are far from satisfying our needs. Sometimes we want to write our own control, enter a few text or attribute name or add CSS style, can get the ideal effect.

The return value of the HTML control

Each HTML control returns mvchtmlstring, which he inherits from Htmlstring, which Microsoft defines as an HTML string that cannot be edited again. such as mvchtmlstring:htmlstring.

Knowing the return value, we know where to start writing our own controls.

Customizing HTML controls

Let's look at an example.

We write such a piece of code in HTML

<LabelFor= ' Male '>Man</Label> <InputType= "Radio"Name= "Sex"Id= "Male" /> <br /> <label for= ' female ' > female </ label> <input type= " Radio " Name=" Sex " id< Span style= "color: #0000ff;" >= "female"  />       

　　

It works by:

malefemale

Add a controls folder to your MVC project

To add a class named MyControls

Code:

    Public ClassMyControls {/// <summary> ///lable text/// </summary> /// <param name= "Fortarget" >For property</param> /// <param name= "Text" >Display text</param> /// <returns></returns>  Public StaticMvchtmlstring Label (StringFortarget,StringText) {StringStr=String.Format ("<label for= ' {0} ' >{1}</label>", fortarget, text);Return NewMvchtmlstring (str); }
 Public StaticMvchtmlstring Label (StringText) {ReturnLabel ("", text); }
 /// <summary> ///RadioButton/// </summary> /// <param name= "Nametarget" >Name property</param> /// <param name= "Idtarget" >ID attribute</param> /// <returns></returns>  public static Mvchtmlstring RadioButton (string Nametarget, string Idtarget) {string str = "<input type= ' radio ' name= ' {0} ' id= ' {1} '/> ' , Nametarget, idtarget); return new mvchtmlstring (str); } } 

　　

The above two controls we all return to mvchtmlstring, which is used to display the contents of the string as HTML content.

HTML code:

</> @MyControls. Label ("female", "female") @MyControls. RadioButton ("Sex", "female") 

Run effect

You can see the same effect as the standard HTML code above.

HTML Control Custom Extension

In the example above, we can see that the custom control can be used to simply implement the function we want.

But these have to use their own namespaces, but also to find their own defined control class, a bit cumbersome, can not be integrated into the system's own HTML control library it?

Like this?

The answer is certainly yes, we can use these own controls as the extension control of the system control, when the call is not simple and kind?

HTML control Extension Class

First look at the following code

        //         // summary: // Gets or sets the System.Web.Mvc.HtmlHelper object that is used to render the HTML element. // // return results: // The System.Web.Mvc.HtmlHelper object used to render the HTML element.   public Htmlhelper<tmodel > Html {get; set       

This is the system's definition of the @html property on the page.

We can see that the HTML is returned with a htmlhelper

See here Our entry point is found, that is, with HtmlHelper as the extension type.

Continue to build classes named Labelextensions and Radiobuttonextensions in the controls folder under construction

Code

    Public Static Classlabelextensions {Public StaticMvchtmlstring Lklabel (ThisHtmlHelper Helper,StringFortarget,StringText) {StringStr=String.Format ("<label for= ' {0} ' >{1}</label>", fortarget, text);Return NewMvchtmlstring (str); } }
 Public Static Classradiobuttonextensions {Public static mvchtmlstring Lkradiobutton (this HtmlHelper helper, string  Nametarget, stringstring str =  String.Format (" < Input type= ' radio ' name= ' {0} ' id= ' {1} '/> ' , Nametarget, Idtarget); return new mvchtmlstring (str); 
}}                 /span>   

　　

Invoking a control

Now let's write the HTML control and see

Page code

</> @Html. Lklabel ("female", "female") @Html. Lkradiobutton ("Sex", "female") 

　　

Run effect

Summarize

The expansion of the control greatly satisfies our various requirements in the programming process, which makes us simple and quick on the page programming.

the memory of the Lost Youth Source:http://www.cnblogs.com/lukun/ This article copyright to the author and the blog Park, Welcome to reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, If you have any questions, you can contact me through http://www.cnblogs.com/lukun/ , thank you very much.