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

Overview

 

Many HTML-based controls have been encapsulated in the ASP. net mvc framework. We can easily use these controls to output the desired content, making development faster.

For example, the ASP. net mvc framework includes the following 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  >  
  <  Div  Class  = "Editor-field"  >  
@ Html. editorfor (model => model. Name)
@ Html. validationmessagefor (model => model. Name)
 </  Div  > 

It can be seen that these encapsulated controls are indeed very convenient to use, but these controls alone are far from meeting our needs. Sometimes we want to write out our own controls, input a few text or attribute names, or add CSS styles to achieve the desired effect.

 

Return Value of the HTML Control

 

Every HTML Control Returns mvchtmlstring, which inherits htmlstring. Microsoft defines it as an HTML string that cannot be edited again. For example, mvchtmlstring: htmlstring.

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

 

Custom HTML controls

Let's look at an example.

We use HTML to write such a paragraphCode

<  Label  For  = 'Male'  >  Male  </  Label  >  
  <  Input  Type  = "Radio"  Name  = "Sex"  ID = "Male"     />  
  <  BR  />  
  <  Label  For  = 'Female'  >  Female  </  Label  >  
 <  Input  Type  = "Radio"  Name  = "Sex"  ID  = "Female"     /> 

The running effect is as follows:

Male

Female

Add a controls folder in the MVC Project

Add a class named mycontrols

Code:

  Public     Class  Mycontrols
{
  ///     <Summary>  
  ///  Lable text
  ///     </Summary>  
  ///    <Param name = "fortarget">  For attributes  </Param>  
  ///     <Param name = "text">  Show text  </Param>  
  ///     <Returns> </returns>  
    Public    Static  Mvchtmlstring label (  String  Fortarget,  String  Text)
{
  String  Str  =  String. Format (  "  <Label for = '{0}'> {1} </label>  "  , Fortarget, text );
  Return    New  Mvchtmlstring (STR );

}

  Public     Static  Mvchtmlstring label (  String  Text)
{
  Return  Label (  ""  , Text );
}


  ///     <Summary> 
  ///  Radiobutton
  ///     </Summary>  
  ///     <Param name = "nametarget">  Name attribute  </Param>  
  ///     <Param name = "idtarget"> Id attribute  </Param>  
  ///     <Returns> </returns>  
    Public     Static  Mvchtmlstring radiobutton (  String  Nametarget,  String  Idtarget)
{
 String  Str  =  String. Format (  "  <Input type = 'Radio 'name = '{0}' Id = '{1}'/>  "  , Nametarget, idtarget );
  Return     New  Mvchtmlstring (STR );
}
} 

The above two controls are returned.Mvchtmlstring, used to display string content as HTML content.

HTML code:

@ Using mvcapplication. controls;
@ Mycontrols. Label ("male", "male ")
@ Mycontrols. radiobutton ("sex", "male ")
<BR/>
@ Mycontrols. Label ("female", "female ")
@ Mycontrols. radiobutton ("sex", "female ")
 

Running Effect

We can see that the effect of the above standard HTML code is the same.

Custom extension of HTML controls

In the above example, we can see that custom controls allow us to simply implement the functions we want.

However, if you need to use your own namespace and find your own control classes, it is a little troublesome. Can you integrate them into your own HTML control library?

Like this?

The answer is certainly yes. We can use these controls as extension controls for system controls. Isn't it simple and friendly to call them?

HTML control extension class

 

First look at the following code

   //  
  //  Abstract:
  //  Gets or sets the system. Web. MVC. htmlhelper object, which is used to render HTML elements.
  //  
  //  Returned results:
  // The system. Web. MVC. htmlhelper object used to render HTML elements.  
    Public  Htmlhelper  <  TModel  >  HTML {  Get  ;  Set  ;} 

This is the system's definition of the @ HTML attribute on the page.

We can see that the HTML returns an htmlhelper

Here we can find the entry point, that is, using htmlhelper as the extension type.

Create a class named labelextensions and a class named radiobuttonextensions in the created controls folder.

Code

   Public     Static     Class  Labelextensions
{
  Public     Static  Mvchtmlstring lklabel (  This  Htmlhelper helper,  String Fortarget,  String  Text)
{
  String  Str  =  String. Format (  "  <Label for = '{0}'> {1} </label>  "  , Fortarget, text );
  Return     New  Mvchtmlstring (STR );
}
}


 Public     Static     Class  Radiobuttonextensions
{
  Public     Static  Mvchtmlstring lkradiobutton (  This  Htmlhelper helper,  String  Nametarget,  String  Idtarget)
{
 String  Str  =  String. Format (  "  <Input type = 'Radio 'name = '{0}' Id = '{1}'/>  "  , Nametarget, idtarget );
  Return     New  Mvchtmlstring (STR );

}
} 

Call controls

Now let's look at the HTML control.

Page code

@ Using mvcapplication. controls;
@ Html. lklabel ("male", "male ")
@ Html. lkradiobutton ("sex", "male ")
<BR/>
@ Html. lklabel ("female", "female ")
@ Html. lkradiobutton ("sex", "female ")
 

Running Effect

Summary

The expansion of controls greatly satisfies our various needs in the programming process, making page programming easy and quick.

Author:Memories of lost youth
Source:Http://www.cnblogs.com/lukun/

The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent andArticleThe original text connection is displayed at an obvious location on the page. If you have any problems, you can useHttp://www.cnblogs.com/lukun/ Thank you very much for contacting me.