Shulou(Shulou.com)06/02 Report--

This article is about how ASP.NET customizes controls. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

There is a book Professional ASP.NET 2.0 Server Control and Component Development on the wrox website.

It hasn't been published yet, but the code has been released on the website, so it's time to download it and learn it.

I have read the previous chapters of the code, interlinked, the author uses different knowledge to show us the same effect, so it is good to learn step by step.

Although I am not familiar with control development, I feel it is very important to customize the control in the foundation of ASP.NET control development, which I summed up by myself.

1. Understand the inheritance relationship between ASP.NET custom controls

* take a look at the System.Web.UI namespace first

(1) Control class, a class shared by all controls, you need to look at several protected methods and properties in it. Although you can't finish it at a glance, you will find that these methods are often used.

You can take a look at its derived classes on MSDN.

(2) HtmlTextWriter class

One of the classes we have to understand, the main work is the markup characters and text output that we write.

Rewriting method of 2.ASP.NET Custom Control

(1) must inherit the Control class

(2) override the Render method of the Control class, which is necessary, because other controls inherit the Control class, so almost all controls have this method.

3. Familiar with metadata

We all know that ASP.NET control properties are classified in the editor, such as appearance, behavior, layout, etc., and each property is explained.

Simple metadata plays this role, of course, you can not add it, but the use of metadata makes people feel intimate, such as

Lower

[CategoryAttribute ("Appearance")]

To use metadata, you must refer to System.ComponentModel named controls. Generally, if you write components, you can't use such a class library. It is introduced on the specific MSDN.

one。 Output string

It's boring to talk too much, so let's rehearse it. First of all, you need to know HTML. Take a look at the following code, the effect is to output HTML to the client

Example one

Using System; using System.Web.UI; namespace CustomComponents {/ * * / / < summary > / Summary description for CreditCardForm / / < / summary > public class CreditCardForm1: Control {protected override void Render (HtmlTextWriter writer) {writer.Write ("< table style='width:287px;height:124px;border-width:0;' >"); writer.Write ("< tr >") Writer.Write ("< td > < strong > PaymentMethod < / strong > < / td >"); writer.Write ("< td >"); writer.Write ("< select name='PaymentMethod' id='PaymentMethod' style='width:100%;' >"); writer.Write ("< option value='0' > Visa < / option >"); writer.Write ("< option value='1' > MasterCard < / option >") Writer.Write ("< / select >"); writer.Write ("< / td >"); writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td > < strong > CreditCard No. < / strong > < / td >"); writer.Write ("< td > < input name='CreditCardNo' id='CreditCardNo' type='text' / > < / td >") Writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td > < strong > Cardholder's Name < / strong > < / td >"); writer.Write ("< td > < input name='CardholderName' id='CardholderName' type='text' / > < / td >"); writer.Write ("< / tr >"); writer.Write ("< tr >") Writer.Write ("< td > < strong > Expiration Date < / strong > < / td >"); writer.Write ("< td >"); writer.Write ("< select name='Month' id='Month' >"); for (int day = 1; day < 13) Day++) {if (day < 10) writer.Write ("< option value='" + day.ToString () + "'>" + "0" + day.ToString () + "< / option >"); else writer.Write ("< option value='" + day.ToString () + "'>" + day.ToString () + "< / option >");} writer.Write ("< / select >") Writer.Write (""); writer.Write ("< select name='Year' id='Year' >"); for (int year = 2005; year < 2015; year++) {writer.Write ("< option value='" + year.ToString () + "year.ToString () +" < / option > ");} writer.Write (" < / select > ") Writer.Write ("< / td >"); writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td align='center' colspan='2' >"); writer.Write ("< input type='submit' value='Submit' / >"); writer.Write ("< / td >"); writer.Write ("< / tr >") Writer.Write ("< / table >"); base.Render (writer);}

The effect is very simple, in fact, has been output HTML plus a few properties, you can directly put the code in the App_Code folder, you can automatically compile, of course, you can create web control library.

Note that you should inherit the Control class, override the Render method, and output HTML with the Write of the HtmlTextWriter class

Use the control

(1)。 You need to register first.

<% @ Register TagPrefix= "custom" Namespace= "CustomComponents" >

(2) then use the label to output the effect

< custom:CreditCardForm1 runat= "server" ID= "ccf" / >

The following is the effect picture.

two。 Improvements, adding attributes and metadata

The controls made above may be useless, but they can familiarize you with the steps. The above controls are very fixed, do not define any properties, and are of little use. Let's modify them.

Let's define the commonly used properties and then output them so that we can modify the properties of the control

Example two

Using System; using System.Web.UI; using System.ComponentModel Namespace CustomComponents {[DefaultPropertyAttribute ("CardholderNameText")] [ToolboxData (@ "< {0}: CreditCardForm2 PaymentMethodText=' credit card type 'CreditCardNoText=' credit card number' CardholderNameText=' credit card holder name 'SubmitButtonText =' submit 'runat='server' > < / {0}: CreditCardForm2 >")] public class CreditCardForm2: Control {private string paymentMethodText = "credit card type"; private string creditCardNoText = "credit card number" Private string cardholderNameText = "credit card holder name"; private string expirationDateText = "* * usage time"; private string submitButtonText = "submit"; [BrowsableAttribute (true)] [DescriptionAttribute ("get and set credit card type")] [DefaultValueAttribute ("credit card type")] [CategoryAttribute ("Appearance")] public virtual string PaymentMethodText {get {return this.paymentMethodText } set {this.paymentMethodText = value;}} [BrowsableAttribute (true)] [DescriptionAttribute ("get or set credit card number")] [DefaultValueAttribute ("credit card number")] [CategoryAttribute ("Appearance")] public virtual string CreditCardNoText {get {return this.creditCardNoText;} set {this.creditCardNoText = value }} [BrowsableAttribute (true)] [DescriptionAttribute ("get or set the credit card holder name")] [DefaultValueAttribute ("credit card holder name")] [CategoryAttribute ("Appearance")] public virtual string CardholderNameText {get {return this.cardholderNameText;} set {this.cardholderNameText = value }} [BrowsableAttribute (true)] [DescriptionAttribute ("get or set * * usage time")] [DefaultValueAttribute ("* usage time")] [CategoryAttribute ("Appearance")] public virtual string ExpirationDateText {get {return this.expirationDateText;} set {this.expirationDateText = value }} [BrowsableAttribute (true)] [DescriptionAttribute ("get or set button tag")] [DefaultValueAttribute ("submit")] [CategoryAttribute ("Appearance")] public virtual string SubmitButtonText {get {return this.submitButtonText;} set {this.submitButtonText = value;}} protected override void Render (HtmlTextWriter writer) {writer.Write ("< table style='width:287px") Height:124px;border-width:0;' > "); writer.Write (" < tr > "); writer.Write (" < td > "+ PaymentMethodText +" < / td > "); writer.Write (" < td > "); writer.Write (" < select name='PaymentMethod' id='PaymentMethod' style='width:100%;' > "); writer.Write (" < option value='0' > Visa < / option > ") Writer.Write ("< option value='1' > MasterCard < / option >"); writer.Write ("< / select >"); writer.Write ("< / td >"); writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td >" + CreditCardNoText + "< / td >") Writer.Write ("< td > < input name='CreditCardNo' id='CreditCardNo' type='text' / > < / td >"); writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td >" + CardholderNameText + "< / td >"); writer.Write ("< td > < input name='CardholderName' id='CardholderName' type='text' / > < / td >") Writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td >" + ExpirationDateText + "< / td >"); writer.Write ("< td >"); writer.Write ("< select name='Month' id='Month' >"); for (int day = 1; day < 13) Day++) {if (day < 10) writer.Write ("< option value='" + day.ToString () + "'>" + "0" + day.ToString () + "< / option >"); else writer.Write ("< option value='" + day.ToString () + "'>" + day.ToString () + "< / option >");} writer.Write ("< / select >") Writer.Write (""); writer.Write ("< select name='Year' id='Year' >"); for (int year = 2005; year < 2015; year++) {writer.Write ("< option value='" + year.ToString () + "year.ToString () +" < / option > ");} writer.Write (" < / select > ") Writer.Write ("< / td >"); writer.Write ("< / tr >"); writer.Write ("< tr >"); writer.Write ("< td align='center' colspan='2' >"); writer.Write ("< input type='submit' value='" + SubmitButtonText + "'/ >"); writer.Write ("< / td >"); writer.Write ("< / tr >") Writer.Write ("< / table >"); base.Render (writer);}

In order to test the function of metadata, you can create a new class library project, then put the written code in the project, and then the web website references the project. After the successful generation, you will find that the toolkit has automatically added these controls for you.

The next thing you need to do is drag the controls you need, and then you will see the following image in the properties panel

Then you combine the metadata in the code, and you should know the general meaning. (you can combine it with MSDN according to your understanding.)

three。 Improve again, eliminating the use of the Write method to output HTML as a string

Then we continue to find problems, and we find that in addition to defining a few attributes that need to be modified by ourselves, we still have to use a large number of strings to output HTML, and it is easy to type wrong. So the HtmlTextWriter class provides several useful methods instead.

(1) the AddStyleAttribute method adds style attributes to the tag

(2) the AddAttribute method adds attributes to the tag

(3) RenderBeginTag starts writing tag headers such as < table.... >

(4) RenderEndTag is written to the end of the tag, such as < / table >

There are several points that need to be paid special attention to.

one。 Because its definition is different from the way we usually define it, when we write HTML, we first write the beginning of the tag, and then write the attributes of the tag. Such as < table borderwidth= "0" >, however, we need to use the above methods in order, we need to define the attributes and styles of the tag, and then output the tag header.

two。 Label head and tail, need to correspond one by one. Can be understood as a nested relationship. * the way to understand is to output the code, look at the source file, and then combined with the originally defined code.

It is easier to explain by looking at the code, because CreditCardForm2 has defined the attributes we need, and all we need to do now is to replace the string form with the form of a tag, so we only need to inherit the CreditCardForm2 class and override the Render method.

Example three

Protected override void Render (HtmlTextWriter writer) {writer.AddStyleAttribute (HtmlTextWriterStyle.BorderWidth, "0"); writer.RenderBeginTag (HtmlTextWriterTag.Table); writer.RenderBeginTag (HtmlTextWriterTag.Tr); writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.Write ("< strong >" + PaymentMethodText + "< / strong >"); writer.RenderEndTag (); writer.RenderBeginTag (HtmlTextWriterTag.Td) Writer.AddAttribute (HtmlTextWriterAttribute.Name, "PaymentMethod"); writer.AddAttribute (HtmlTextWriterAttribute.Id, "PaymentMethod"); writer.AddStyleAttribute (HtmlTextWriterStyle.Width, "100%"); writer.RenderBeginTag (HtmlTextWriterTag.Select); writer.AddAttribute (HtmlTextWriterAttribute.Value, "0"); writer.RenderBeginTag (HtmlTextWriterTag.Option); writer.Write ("Visa"); writer.RenderEndTag () Writer.AddAttribute (HtmlTextWriterAttribute.Value, "1"); writer.RenderBeginTag (HtmlTextWriterTag.Option); writer.Write ("MasterCard"); writer.RenderEndTag (); writer.RenderBeginTag (HtmlTextWriterTag.Tr); writer.RenderBeginTag (HtmlTextWriterTag.Td) Writer.Write ("< strong >" + CreditCardNoText + "< / strong >"); writer.RenderEndTag (); writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.AddAttribute (HtmlTextWriterAttribute.Name, "CreditCardNo"); writer.AddAttribute (HtmlTextWriterAttribute.Id, "CreditCardNo"); writer.AddAttribute (HtmlTextWriterAttribute.Type, text); writer.RenderBeginTag (HtmlTextWriterTag.Input); writer.RenderEndTag () Writer.RenderEndTag (); writer.RenderEndTag (); writer.RenderBeginTag (HtmlTextWriterTag.Tr); writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.Write ("< strong >" + CardholderNameText + "< / strong >"); writer.RenderEndTag (); writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.AddAttribute (HtmlTextWriterAttribute.Name, "CardholderName"); writer.AddAttribute (HtmlTextWriterAttribute.Id, "CardholderName") Writer.AddAttribute (HtmlTextWriterAttribute.Type, "text"); writer.RenderBeginTag (HtmlTextWriterTag.Input); writer.RenderEndTag (); writer.RenderBeginTag (HtmlTextWriterTag.Tr); writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.Write ("< strong >" + ExpirationDateText + "< / strong >"); writer.RenderEndTag () Writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.AddAttribute (HtmlTextWriterAttribute.Name, "Month"); writer.AddAttribute (HtmlTextWriterAttribute.Id, "Month"); writer.RenderBeginTag (HtmlTextWriterTag.Select); for (int day = 1; day < 13; day++) {writer.AddAttribute (HtmlTextWriterAttribute.Value, day.ToString ()); writer.RenderBeginTag (HtmlTextWriterTag.Option) If (day < 10) writer.Write ("0" + day.ToString ()); else writer.Write (day); writer.RenderEndTag ();} writer.RenderEndTag (); writer.Write (""); writer.AddAttribute (HtmlTextWriterAttribute.Name, "Year"); writer.AddAttribute (HtmlTextWriterAttribute.Id, "Year") Writer.RenderBeginTag (HtmlTextWriterTag.Select); for (int year = 2005; year < 2015; year++) {writer.AddAttribute (HtmlTextWriterAttribute.Value, year.ToString ()); writer.RenderBeginTag (HtmlTextWriterTag.Option); writer.Write (year); writer.RenderEndTag ();} writer.RenderEndTag (); writer.RenderEndTag (); writer.RenderEndTag () Writer.RenderBeginTag (HtmlTextWriterTag.Tr); writer.AddAttribute (HtmlTextWriterAttribute.Align, "center"); writer.AddAttribute (HtmlTextWriterAttribute.Colspan, "2"); writer.RenderBeginTag (HtmlTextWriterTag.Td); writer.AddAttribute (HtmlTextWriterAttribute.Type, "submit"); writer.AddAttribute (HtmlTextWriterAttribute.Value, SubmitButtonText); writer.RenderBeginTag (HtmlTextWriterTag.Input); writer.RenderEndTag (); writer.RenderEndTag () Writer.RenderEndTag (); writer.RenderEndTag ();}

Although the effect is the same, but the above code is not much more beautiful, and it is not easy to type wrong. This is also the practice advocated.

four。 Consequences of not using view state

Or view state. For view state, you can refer to MSDN and related articles.

Take a look at the following example, or the CreditCardForm3 control

If (! IsPostBack) {creditcardform.CardholderNameText = "Full Name"; creditcardform.CreditCardNoText = "CreditCardNo"; creditcardform.ExpirationDateText = "ExpirationDate"; creditcardform.PaymentMethodText = "Payment Options"; creditcardform.SubmitButtonText = "Send";}

* loading effect

After clicking the button

five。 Use view state to improve the effect

The prerequisite is that you do not disable the view state.

Inherit CreditCardForm3 and overwrite each property

Public override string PaymentMethodText {get {return ViewState ["PaymentMethodText"]! = null? (string) ViewState ["PaymentMethodText"]: "Credit Card Type";} set {ViewState ["PaymentMethodText"] = value;}} public override string CreditCardNoText {get {return ViewState ["CreditCardNoText"]! = null? (string) ViewState ["CreditCardNoText"]: "credit card number";} set {ViewState ["CreditCardNoText"] = value;}} public override string CardholderNameText {get {return ViewState ["CardholderNameText"]! = null? (string) ViewState ["CardholderNameText"]: "name of credit card holder";} set {ViewState ["CardholderNameText"] = value;}} public override string ExpirationDateText {get {return ViewState ["ExpirationDateText"]! = null? (string) ViewState ["ExpirationDateText"]: "* usage time";} set {ViewState ["ExpirationDateText"] = value;}} public override string SubmitButtonText {get {return ViewState ["SubmitButtonText"]! = null? (string) ViewState ["SubmitButtonText"]: "submit";} set {ViewState ["SubmitButtonText"] = value;}} Thank you for reading! This is the end of this article on "how to customize controls for ASP.NET". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.