User-defined controls for ASP. NET WebForm

About user-defined controls, presumably everyone is already familiar with it. Although it's often used, it's just a simple use. Here again, summarize the UserControl in ASP.

can be handy. This article will cover the following topics:

1, what is UserControl?
2, how to define a UserControl?
3, how to use UserControl?
4, how to control HTML through the UserControl property?
5, how to realize <u1:control>string</u1:control>?

1, what is UserControl?

About UserControl's explanation MSDN, and Wikipedia are introduced:

Http://msdn.microsoft.com/en-us/library/system.web.ui.usercontrol.aspx
Http://en.wikipedia.org/wiki/ASP.NET#User_controls

To be blunt, UserControl exists to reuse HTML code. A bit like PHP's include or require, but it's more flexible than include or require, it's not just
Simply introduce the code, and control the HTML code by setting the properties of the UserControl to better implement code reuse. How to use basic UserControl more ASPX pages
is the same, but UserControl cannot be accessed through a URL, but only in a page or other user control.

2, how to define a simple UserControl?

New UserControl Method: Add New Item->web->web user control by right-clicking on ASP. Open the control's background code and we can see that the control
Inherit from the System.Web.UI.UserControl class. The new control has the same structure in addition to the suffix name, and the usage is basically the same.
This is where you can add HTML code to the ascx file.

3, how to use UserControl?

Using UserControl on a page requires only adding a register code snippet to the head of the page:
<%@ Register src= "Usercontrol/uc_demo.ascx" tagname= "Demo" tagprefix= "uc1"%>
SRC represents the relative path to which the user control resides.
After adding the code snippet above, you can use it where you need it.
Using the method below, we can see that UC1 is defined above the Tagprefix,demo is defined above the tagname, because the user control is also a service-side control
So we have to add runat= "Server" here, otherwise. NET will be considered an HTML tag.
<uc1:demo id= "AAA" runat= "Server" >
</uc1:Demo>

4, how do I customize the properties to control UserControl HTML?

2nd, section 3 has described how to create new and use a simple user control. However, the above example only satisfies the reuse of simple HTML, such as some
Header information or bottom information. But for some complex modules, obviously we need some properties to control it. For example: We define a user control,
The control requires that the user can customize the theme. That is, users want to be able to use this:
<uc1:demo id= "AAA" themename= "Green" runat= "Server" >
</uc1:Demo>

So how do we do that? First of all, our first impression is that theme should be an enum type that can be chosen by the user, so we first define an enumeration of theme

public enum theme{     Brown = ten,     Cyan =,     Gray = +,     Green = +,      Leaf = max,      Plain =,      Purple = 10;

OK, the enumeration is there, so how do we turn this enumeration into an option that can be set in UserControl? In the background code of UserControl (that is, the Ascx.cs file),
We just need to define a common variable for the control class. Therefore, we just need to add the following code in the background class file to achieve the above needs:
Public Theme ThemeName;
We can set the initial value through a private member, and then the code becomes this:

Private Theme _themename = theme.cyan;public Theme themename{     get {return this._themename;}     set {_themename = value;}}

At this point, the user can set the theme through the properties, theme in the page, the user control can be theme to control the style in its HTML code.

5, how to realize <u1:control>string</u1:control>?

This is the focus of this article. In the process of using the user control, sometimes a module (e.g.), I just need to reuse this box, and the contents of this box
is to be customized. So what are we going to do? The first thing we think about is attributes, but it's not possible to pass a bunch of HTML code in the past as attributes,
The code is so disgusting. So we thought about the way the headline was. Clips HTML to the middle of the control. Or the example above, we want to
This can be called by the User:

<uc1:demo id= "AAA" themename= "Green" runat= "Server" > <div style= "width:100px;height:100px;backgroud:red;" >  Hello world! </div></uc1:Demo>

Through Google, I found a solution. ASP. NET provides the Itextcontrol interface, through which we can achieve the above functions. So what we need to do
is: The first step, let UserControl implement Itextcontrol interface. The second step is to implement the Itextcontrol text field. The third step is to override the AddParsedSubObject method in the control class.

Let's say we have several of these controls, so we're going to abstract the above three-step implementation into a class, which we'll call Demowidget, and the code is as follows:

  [ParseChildren (false)] public class DemoWidget:System.Web.UI.UserControl, Itextcontrol {[PersistenceMode                (Persistencemode.innerdefaultproperty)] public virtual string Text {get { Object obj2 = this.                viewstate["Text"];                if (obj2! = null) {return (string) obj2; } return string.            Empty; } set {if (this). Hascontrols ()) {this.                Controls.clear (); } this.            viewstate["Text"] = value;            }} protected override void AddParsedSubObject (object obj) {if (obj is LiteralControl) {Htmlcontent.append ((LiteralControl) obj).                Text); This.            Text = Htmlcontent.tostring ();                    } else {if (obj! = null) {Htmlcontent.append (getcontrolhtml (obj as Control)); This.                Text = Htmlcontent.tostring ();        }}} protected StringBuilder htmlcontent = new StringBuilder ();            Protected string getcontrolhtml (Control ctl) {StringBuilder sb = new StringBuilder ();            StringWriter tw = new StringWriter ();            HtmlTextWriter writer = new HtmlTextWriter (TW); Ctl.            RenderControl (writer); Sb. Append (writer.            Innerwriter.tostring ()); Return SB.            ToString (); Base.            AddParsedSubObject (New LiteralControl (TMPSTR)); This.        Text = TMPSTR; }    }

Let's take a look at how Demowidget is implementing the three steps above. It is clear that the first step has been completed.

In the second step we can see that the text field of the Itextcontrol is also implemented, and that it is used to save a clip in the middle of the user control, and from the code we can see that I save the text information to viewstate.
And the property above the text [PersistenceMode (Persistencemode.innerdefaultproperty)]
And what does that mean? MSDN's explanations are as follows:
Innerdefaultproperty The specified property is persisted as internal text in the ASP. It also indicates that the property is defined as the default property of the element. You can specify only one property as the default property.
(http://msdn.microsoft.com/zh-cn/library/system.web.ui.persistencemode.aspx)
That is, text will be used as the default property of Demowidget, and there can be only one such property.

The third step, overriding the AddParsedSubObject method
Why should we re-addparsedsubobject the method? We first add an empty AddParsedSubObject method, set a breakpoint, and then debug, we can find that when there is text in the middle of Demowidget,
Will call the function, so here we can assign HTML to text. By default, the object passed into the function is of type LiteralControl. So we implement the following code:
For a specific explanation of this method, see msdn:http://msdn.microsoft.com/zh-cn/library/system.web.ui.control.addparsedsubobject.aspx
protected override void AddParsedSubObject (object obj)
{
if (obj is LiteralControl)
{
This. Text = ((LiteralControl) obj). Text;
}
｝

It is also important to note that we must add a property for the Demowidget class [ParseChildren (False)],parsechildren property to indicate whether the element inside the server control tag is interpreted as a property, so this should be false.
Http://msdn.microsoft.com/zh-cn/library/system.web.ui.parsechildrenattribute.aspx

Well, we've all done the three steps we've mentioned before, but I've found that there are other codes in the class, and what do the other codes do? At this point, we find that if just three steps have been made to meet the needs of the beginning,
However, the above class has some limitations, that is, the control tag can contain only HTML text, when the control tag needs to contain another control when there is a problem.

<uc1:demo id= "AAA" themename= "Green" runat= "Server" > <div style= "width:100px;height:100px;backgroud:red;" >  Hello world! </div> <uc1:demo id= "BBB" themename= "Leaf" runat= "Server" >  <div style= "width : 100px;height:100px;backgroud:red; " >   Hello world!  </div> </uc1:Demo></uc1:Demo>

Because the control tag contains other controls, the parameter obj in AddParsedSubObject is probably a child control type, so we must modify the AddParsedSubObject function and create a new Htmlcontent member. The HTML code to hold the child controls
The HTML code generated by the child control is then assigned to the control's Text property, and the Getcontrolhtml method is used to get the HTML code generated by the child control. And the addparsedsubobject becomes as follows:

  protected override void AddParsedSubObject (object obj)        {            if (obj is LiteralControl)            {                Htmlcontent.append (((LiteralControl) obj). Text);                This. Text = Htmlcontent.tostring ();            }            else            {                if (obj! = null)                {                    htmlcontent.append (getcontrolhtml (obj as Control));                    This. Text = Htmlcontent.tostring ();}}}        

At this point, you can add anything to the UserControl tag, you can add HTML code, you can add custom controls, and you can even add an ASP.

User-defined controls for ASP. NET WebForm