Planitem control in ASP. Net Control Development getting started Series

In the first iteration of the portal project, I am mainly responsible for the control library. The so-called knowledge needs to be shared and read to enrich life. I hope to share with you the control experience and explore each other for common progress and growth.

The required controls and their function descriptions are as follows:

Name	Description	Remarks
Scollgridview	Unlike Asp.net gridview, Asp.net gridview uses pagination when there is too much data, while scollgridview uses a vertical scroll bar when there are too many data.	Used on various statistics pages
Planitem	The image width is the percentage of progress.	Indicates the progress.
Statusitem	Use different images and texts to show different States
Biasitem	Convert the positive and negative values of deviations into backward, forward, and corresponding colors	Used to indicate the deviation direction

 

Today, let's talk about the planitem control first.

First, let's first recall what we brought in vs2010.. Net controls have some features, such as attributes and events. You can also set relevant properties and compile relevant code for event implementation... right, but now we want to write controls to make them possess these features and expose their related attributes and events. We will use inheritance in object-oriented programming, inherit attributes, events, methods... in my opinion, good controls should satisfy some features in the text printing, such as flexibility, scalability, reusability... in addition, the most important thing we have to consider is compatibility.
For compatibility issues, refer:Hack of the Portal ProjectHttp://blog.csdn.net/zouyujie1127/article/details/6903278

 

1. Open vs2010 and create a blank solution.

 

2. Create a new class library in the blank solution. The class library is named planitem. Select planitem, right-click "Reference", select "add reference", and add system. web and system. web. reference of Extension

 

Create a new class myplanitem. Cs in the planitem class library to describe the planitem control.

 

3. Introduce the design features of common properties in control development

[Category ("show")]: sets the group name displayed on the property panel.

[Description ("Progress text, retain two decimal places")]: sets the attribute description. After this control is selected, you can see the attribute description at the bottom of the attribute panel.
[Defaultvalue ("0.00")]: sets the default value of an attribute.

4. First, I should know that the control is actually a class, and the final base class of the control is the control class. in the development of net controls, we often use three classes: control, webcontrol, and compositecontrol. Here we let them inherit control, and webcontrol is a subclass of control, so it has more attributes than control, such as style...

 

In the following. net control development, we will use a render () rewrite method to output the control to the page ,. the final display format of the. Net Control is HTML-marked.

Therefore, before developing any controls, we can first draw them out with dreamver8 and then encode them.

Finally, set planitem. after CS is compiled into a DLL class library and added to the Toolbox panel, it can be used like.. Net Control.

Compile the command. (CSC/Target: Library planitem. CS)

 protected override void Render(HtmlTextWriter writer)  160.        {  161.            string div1 = "<div style='position:static;float:left;width:" + this.DivWidth + "px;height:" + this.DivHeight + "px;z-index:1;background-image: url(" + this.BgImageDown + ");_background-image: none;'/>";  162.            writer.Write(div1);  163.            string div2 = "<div style='position:static;width:" + this.ImgWidth + "%;height:" + this.DivHeight + "px;z-index:2;float:left;background-image: url(" + this.BgImageUp + ");_background-image: none; '/>";  164.            writer.Write(div2);  165.            string div3 = "<div style='position:static;margin-left:auto;margin-right:auto;width:" + DivWidth + "px;height:" + DivHeight + "px;line-height:" + DivHeight + "px;z-index:3; text-align:center; vertical-align:middle;color:" + TextColor + ";font-size:12px;'>";  166.            writer.Write(div3);  167.            writer.Write(this.Text + "%");  168.            writer.Write("</div>");  169.        }  

 

Careful friends may find that _ Background-image: none appears in the render (htmltextwriter writer) method, which is set to solve the misappropriation in IE6. For example, (the result is displayed normally on the left and the result of inception in IE6 on the right ):

Infiltration of IE6: The two divs with the background are superimposed, even if the width of the DIV above is smaller than the width of the DIV below, the above Div will also completely overwrite the following Div. Because I have used three divs here, it cannot solve the problem of their swallowing. If there are two divs, you can add override: hidde dren in the code, here, I asked IE6 not to display the progress background, but only the progress text (for the purpose of testing ). Here, I will briefly mention that the most direct solution to the Internet Explorer 6 misappropriation is to upgrade Internet Explorer to 7.0. Microsoft announced the official elimination of Internet Explorer 6 two years ago, appeal to friends all over the world to use a later version of Internet Explorer.

I don't know if you have found it. My control uses three Div overlays to display the project progress. The following two divs have set the background image, the bottom Div indicates the total width. The width of the background image of the middle Div indicates the progress of the project, and the top Div displays the progress of the project in text (center display ), here I use position: static, instead of making the parent Div relatively positioned, the Child div is absolutely positioned. This is because the control is nested in the collgridview control. If it is not set to position: static, once scrolling occurs, the DIV will float in Google's browser, the following occurs:

The implementation of this control is relatively simple, but it is difficult to understand the compatibility of the browser. Linyuan Xiaoyu, it's better to get out of the net and try it!

Myplanitem. Cs source code:

Using system; using system. collections. generic; using system. LINQ; using system. text; using system. web; using system. web. ui; using system. componentmodel; namespace planitem {public class myplanitem: Control {private string text; [category ("")] [description ("Progress text, retain two decimal places")] [defaultvalue ("0.00")] Public String text {get {If (text = NULL | text = "") {return "0.00 ";} else {decimal num = convert. todeci Mal (text); int Index = num. tostring (). indexof ('. '); If (index <1) {return math. round (Num, 2 ). tostring () + ". 00 ";} else {int sum = (Num. tostring (). length-index-1); If (sum = 1) {return math. round (Num, 2 ). tostring () + "0";} else {return math. round (Num, 2 ). tostring () ;}}}set {text = value ;}} [category ("show")] [description ("Progress image width")] [defaultvalue (0)] public uint64 imgwidth {get {r Eturn (text = "0.00 ")? 0: convert. touint64 (convert. todouble (text);} [category ("show")] [description ("background image path")] Public String bgimagedown {get {string S = (string) viewstate ["imagedownurl"]; return s;} set {viewstate ["imagedownurl"] = value ;}} [category ("show")] [description ("Progress image path")] Public String bgimageup {get {string S = (string) viewstate ["imageupurl"]; return s ;} set {viewstate ["imageupurl"] = value ;}} private int divwidth; [category ("")] [description ("width")] [defaultvalue (100)] public int divwidth {get {return divwidth;} set {divwidth = value ;}} private int divheight; [category ("")] [description ("")] [defaultvalue (30)] public int divheight {get {return divheight;} set {divheight = value ;}} private string textcolor; [category ("")] [description ("text color")] [defaultvalue ("black")] Public String textcolor {get {return textcolor;} set {textcolor = value ;}} private string bgcolor; [category ("show")] [description ("Progress background color")] [defaultvalue ("blue")] Public String bgcolor {get {return bgcolor ;} set {bgcolor = value ;}// display the control in the browser with protected override void render (htmltextwriter writer) {string div1 = "<Div style = 'position: static; float: Left; width: "+ this. divwidth + "PX; Height:" + this. divheight + "PX; Z-index: 1; Background-image: URL (" + this. bgimagedown + "); _ Background-image: none; '/>"; writer. write (div1); string div2 = "<Div style = 'position: static; width:" + this. imgwidth + "%; Height:" + this. divheight + "PX; Z-index: 2; float: Left; Background-image: URL (" + this. bgimageup + "); _ Background-image: none; '/>"; writer. write (div2); string div3 = "<Div style = 'position: static; margin-left: auto; margin-Right: auto; width:" + divwidth + "PX; height: "+ divheight +" PX; line-Height: "+ divheight +" PX; Z-index: 3; text-align: center; Vertical-align: middle; color: "+ textcolor +"; font-size: 12px; '> "; writer. write (div3); writer. write (this. text + "%"); writer. write ("</div> ");}}}