ASP.NET Component Programming Step By Step

xiaoxiao2021-03-06 83

Prior to statement: This article is only suitable for the initial and intermediate programmers of component programming. If you are programmed by the component, you can skip this. Welcome to guide and express comments and suggestions.

The cause of things (purely in order to enhance the fun of articles)

I have never had a cold, recently online, "10-sided ambush" advertisement and comment on the TV, plus Zhang Yimou also got a party in CCTV, specializing in promoting the film, can inevitably move. I didn't go to the cinema to watch the cinema, so if I went online to watch online. When I happened to chat with QQ, a group of members sent a link, saying that I can download "10-sided ambush", I tried it, really, there is still more than 70 K, more than 100 M East is so fast (is it particularly easy to satisfy?). However, the effect is not very good, the color is basically no, like the black and white movie in the past, it is not clear, but the free thing is like this, it will be.

I have seen it for ten minutes, I finally can't see it, I am playing killing, three major characters are playing, no handsome guy is not beautiful, seeing my dizziness straight snoring. In order to prevent it from seeing Zhou Gong, the mouse is uneasy in my hand, I use the player to see this movie just downloaded RealPlay10, this is a first time, I used to use 8.0, the interface has no new version (although I I don't feel good, stupid), so I want to see what function, in the end, I opened the interface below:

Hey, I look at the blue background, "Name" tag and file box combine into a composite control, the background color can also change, a bit creative, the effect is not bad, then I also do it, haha, Sometimes an idea is what is not intentionally generated.

Basic knowledge

Being a composite control in ASP.NET is not very difficult, but if you just get in touch, you may still need to point to the direction, so you may wish to be here, the master is not a misery.

JavaScript: Today's most popular client scripting language, if you want to make special effects, he is most resistant.

CSS: Cascade style sheet for setting up elements.

DHTML: Dynamic HTML, and browser interactions.

System.Web.ui.WebControls.WebControl: The base class of the control in ASP.NET, we may rewrite some of his methods, commonly available:

CreateChildControls (): Give the control to create an opportunity to create an internal stator control, the preset situation onprender () method calls this method to request the control to create its sub-control, if a situation is called by the FindControl () method.

OnPrender (): Triggered the prerender event, happening before drawing the control.

Render (): Draw control.

AddAttributeStorender (): Add HTML style or properties to the tag.

In addition, there is also a method: EnSureChildControls (), which is used to determine if the server control control contains sub-controls. If not included, create sub-controls and work in design phases.

Other slowly look, these are used in our example. final effect

Let's take a look at the effect, so you have a clear goal.

No mouse action mouse moves to the control, the mouse is removed and restored

how about it? What is the effect? (I am boast)

Step by step by step

Now, please listen to my instruction: I like this effect of the left side, I don't like this effect or the right side of the very disdainful station. Ok, please close your browser on the right, please continue your favorite online journey, please come with me on the left:

1. Let's complete the effect section first, that is, write JavaScript scripts. My method is to write an HTML file, the correctness of the test script:

</ title> <script language = javaScript> Var Oldcolor; Function Mouseover (Ctrl, Color) { OldColor = Ctrl.style.BackgroundColor; Ctrl.style.color = "#fffff"; Ctrl.style.backgroundcolor = color; } Function Mouseout (Ctrl) { Ctrl.style.BackgroundColor = OldColor; Ctrl.style.color = "# 000000"; } </ script> </ HEAD> <Body> <table border = "0" style = "font-size: 9pt" onmouseover = "mouseover (this, '# ff0044')" onmouseout = "mouseout (this)"> <tr> <TD> Name: </ td> <td> <input name = "_ CTL2" type = "text" /> </ td> </ TR> </ TABLE> </ Body> </ Html> Create this text file, copy this code past, then change the extension of the file to .html, open with IE, is there a desired effect? 2, the previous work is ready, then open vs.net IDE, create a new project, select the Visual C # item (Don't ask me to vb.net, I will not), select "Web Control Library" in the list , Enter the project name: LabelTextBox. 3, delete the automatically generated code, leaving only one class frame, like this (namespace self-qualified): Using system; Using system.Web.ui; Using system.Web.ui.webcontrols; Using system.componentmodel; Using system.drawing; Namespace lzhtextbpx { Public class labeltextbox: System.Web.ui.WebControls.WebControl { } } 4, the effect of the above is actually a line of two columns, we set the Border property of the table into 0, so you can't see it, where the left cell is put on the label, the right cell is sent a text box, so we want Generate this form with code. The class used is: a) Table: Represents the form b) Tablelow: Represents the table c) TableCell: Indicates cells in the table Note: A table can have multiple tables, and multiple cells can be placed in a table row. The generated code is as follows: / / Define a table object Table t = new table (); // Add a line TableRow Tr = New TableRow (); // Add two cells Tablecell TC1 = New TableCell (); Tablecell TC2 = New TableCell (); // Add the control to the Controls set. TC1.Controls.Add (label); Tc2.controls.add (TextBox); Tr.Controls.Add (TC1); Tr.Controls.Add (TC2); T.Controls.Add (TR); This.Controls.Add (t); We also have to respond to the form of mouse to move out of the event, the background color change is triggered here, the following code completes this: // Add mouse event T.attributes.add ("OnMouseover", "Mouseover (this, '" "#" R G B ""); T.attributes.add ("onmouseout", "mouseout (this)"); Attribute indicates the property set of the table, and the add () method is used to add a new property. By the way, put the fonts in the form also set: // Add a style to control the font T.Style.Add ("Font-size", "10PT"); Did you see the three variables above R, G, and B? These three variables are a hexadecimal string representation of a color. Use the following method to decompose the color: // The following will transform the color value into hexadecimal representation String r, g, b; R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x"); G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X"); B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x"); Where _backgroundcolor is a custom property. All code in this step is as follows: Private void createControls () // Create controls and setting controls related properties { // The following will transform the color value into hexadecimal representation String r, g, b; R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x"); G = (convert.Toint32 (this._backroundcolor.g)). TOSTRING ("X"); b = (convert.Toint32 (this._backroundcolor.b)). Tostring ("x"); / / Define a table object Table t = new table (); // Add mouse event T.attributes.add ("OnMouseover", "LTMOUSEOVER (this, '" "#" R G B ""); T.attributes.add ("OnMouseout", "LTMOUSEOUT (THIS)"); // Add a style to control the font T.Style.Add ("Font-size", "10PT"); // Add a line TableRow Tr = New TableRow (); // Add two cells Tablecell TC1 = New TableCell (); Tablecell TC2 = New TableCell (); // Add the control to the Controls set. TC1.Controls.Add (label); Tc2.controls.add (TextBox); Tr.Controls.Add (TC1); Tr.Controls.Add (TC2); T.Controls.Add (TR); This.Controls.Add (t); } 5, this control provides three properties, and BackgroundColor means that the mouse is moved into the background color of the control, Labelstring is the text of the tag, TextString is the text box. Defined as follows: Private label label = new label (); // Create a label Private textBox textbox = new textbox (); // Create a text box Private color _BackgroundColor; // mouse moving into the background color Public Color BackgroundColor { get { IF (_BackgroundColor == Color.empty) Return color.blue; Return_BackgroundColor; } set { _BACKGROUNDCOLOR = VALUE; } } Public String Labelstring { get { Return label.text; } set { Label.Text = Value; } } Public String TextString { get { Return TEXTBOX.TEXT; } set { Textbox.text = value; } } 6, this step needs to overwrite the CreateChildControls () method, which is automatically called to generate a child control. Protected Override Void CreateChildControls () { This.ensureChildControls (); // is created if the child control is not created Base.createChildControls (); // Call method CreateControls (); } 7. Save the script of the first step to a constant: Private const string mouse_script = // Used to trigger a script for mouse events "<script language = javascript> / n" "var oldcolor; / n" "Function LTMouseOver (Ctrl, Color) / N" // When the mouse is moved, Ctrl is a table, and the color is the color value to be changed. "{/ N" "OldColor = Ctrl.Style.backgroundColor; / N" // Record the original document background color "ctrl.style.color = '#ffffff'; / n" // change the font color to white "Ctrl.Style.BackgroundColor = color; / n" // Changk Table Background Color "} / n" "Function LTMOUSEOUT (CTRL) / N" // The mouse is transferred, the parameter is the same as above "{/ N" "Ctrl.Style.BackgroundColor = Oldcolor; / N" // Restore Background Color "ctrl.style.color = '# 000000';" // Restore font color into black "} / n" "</ script> / n"; Over-write the onprender () method Outing the script to the browser, considering the situation where the same page may have multiple controls, there is no need to generate a script for each control, but all controls share this script, So, we have to use page.isclientscriptblockregistered () to determine if the script has been output, if the output does not need to be output again. Protected Override Void OnPrender (Eventargs E) { // Output the script to the page. IF (! page.isclientScriptBlockRegistered ("MouseScript")) / / Prevent duplicate output. { Page.RegisterClientScriptBlock ("Mousescript", Mouse_Script); } Base.onprender (e); } Use of controls Using controls is obviously much simpler than the creation control, let's talk about the use of the control (suitable for beginners): After compiling the project, a set of assemblies called LabelTextBox.dll is generated. 1. Create a test item, open the toolbox, click Right click, select "Add / Shift", as shown below: 2, "Custom Toolbox", select the ".NET Framwork Components" tab, click "Browse", find the "LabelTextBox.dll" assembly in the LabelTextBox project directory, as shown: 3, after the determination, the icon of the control appears in the toolbox, as shown below: 4. Drag the control directly to the Web form. This program debugging environment: Windows2000 Server, MS.NET2003. Posted on July 23, 2004 3:45 PM Feedback # 回: It is a little bug // below to convert the color value into hexadecimal representation String r, g, b; R = (convert.Toint32 (this._backgroundcolor.r)). TOSTRING ("X"); g = (convert.Toint32 (this._backgroundcolor.g)). Tostring ("x"); B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x"); IF (r.Length == 1) r = "0" r; IF (g.length == 1) g = "0" g; IF (B.Length == 1) b = "0" b; 2004-08-21 9:52 PM | Liangliang (Feky) # 回: ASP.NET component programming Step by step Thank you. 2004-08-22 8:27 AM | lizanhong # 回: ASP.NET Component programming Step by Step Thank, Good 2004-08-24 10:52 AM | Aoioa # 回: ASP.NET Component Programming Step By Step Good Instance. You are a good material written, you should go out 2004-08-24 1:45 PM | Darkit # 回: ASP.NET Component programming Step by step tour you! 2004-08-24 2:13 PM | YSCFDavid # 回: ASP.NET Component programming Step by Step THNKS A LOT, IT IS Good 2004-08-24 2:52 PM | Yhy # 回:: ASP.NET Component Programming Step by Step If everyone is like you, huh, huh. 2004-08-24 3:10 PM | FAINTBOY # 回: ASP.NET Component Programming Step By Step can drag the control directly to the web form. ?? The tool is gray, can't be used 2004-08-24 3:11 PM | S.f.lau # 回: ASP.NET Component Programming Step By Step There is a problem, the child controls, such as TextBox, can not accept runtime assignment, how to solve it? 2004-08-24 3:12 PM | Insect # 回: ASP.NET Component Programming Step By Step Thank you 2004-08-24 3:23 PM | NEU_LEAF # 回: ASP.NET Component Programming Step By Step Seeing that many people seeing so many people know that this article is put in the 9CBS home page, some netizens should not pass, now I upload the source code of the entire project, but if To download it first, please register, I have to trouble. Download address: http://www.codesky.net/show.asp? Id = 2886 2004-08-24 3:23 PM | lizanhong # 回: ASP.NET component programming step by step this /// <summary> /// Get or set the text box content /// </ summary> Public String TextString { get { THIS.ENSURECHILDCONTROLS (); Return TEXTBOX.TEXT; } set { THIS.ENSURECHILDCONTROLS (); Textbox.text = value; } } 2004-08-24 3:50 PM | Insect # 回: ASP.NET Component Programming Step By Step There is a proposal to change the event to the text box to get the focus, then restore the background color when the focus is lost. How to achieve this incident lost? 2004-08-24 3:57 PM | Insect # 回: ASP.NET Component programming Step by Step Haha, I have written modifications according to your code. Using system; Using system.Web.ui; Using system.Web.ui.webcontrols; Using system.componentmodel; Using system.drawing; Namespace INSECT.WEBCONTROLS.LabelTextBoxs { /// <summary> /// LabelTextBox's summary description. /// </ summary> [DefaultProperty ("Text"), ToolboxData ("<{0}: labeltextbox width = '100px' runat = server> </ {0}: labeltextbox>")] Public class labeltextbox: system.Web.ui.WebControls.WebControl, inamingContainer { Private label label = new label (); // Create a label Private textBox textbox = new textbox (); // Create a text box Private color _BackgroundColor; // mouse moving into the background color Private int _fontsize; // font size /// <summary> /// Get or set up a high bright background color /// </ summary> Public Color BackgroundColor { get { THIS.ENSURECHILDCONTROLS (); IF (_BackgroundColor == Color.empty) Return color.blue; Return_BackgroundColor; } set { THIS.ENSURECHILDCONTROLS (); _BACKGROUNDCOLOR = VALUE; } } Public String Labelstring { get { THIS.ENSURECHILDCONTROLS (); Return label.text; } set { THIS.ENSURECHILDCONTROLS (); Label.Text = Value; } } /// <summary> /// Get or set the text box content /// </ summary> Public String TextString { get { THIS.ENSURECHILDCONTROLS (); Return TEXTBOX.TEXT; } set { THIS.ENSURECHILDCONTROLS (); Textbox.text = value; } } /// <summary> /// Get or set the cell font size, unit is PT /// </ summary> Public int fontsize { get { THIS.ENSURECHILDCONTROLS (); Return_fontsize; } set { THIS.ENSURECHILDCONTROLS (); _fontsize = value;} } /// <summary> /// Get or set CSSClass /// </ summary> Public String TextBoxCSSCLASS { get { THIS.ENSURECHILDCONTROLS (); Return this.TextBox.cssclass; } set { THIS.ENSURECHILDCONTROLS (); THIS.TEXTBOX.CSSCLASS = VALUE; } } /// <summary> /// Used to trigger a script for mouse events /// </ summary> Private const string mouse_script = "<script language = javaScript> / n" "Var OldColor; / N" "Function LTMouseOver (Ctrl, Color) / N" // When the mouse is moved, Ctrl is a table, and the color is the color value to be changed. "{/ N" "OldColor = Ctrl.Style.backgroundColor; / N" // Record the original document background color "ctrl.style.color = '#ffffff'; / n" // change the font color to white "Ctrl.Style.BackgroundColor = color; / n" // Changk Table Background Color "} / n" "Function LTMOUSEOUT (CTRL) / N" // The mouse is transferred, the parameter is the same as above "{/ N" "Ctrl.Style.BackgroundColor = Oldcolor; / N" // Restore Background Color "ctrl.style.color = '# 000000';" // Restore font color into black "} / n" "</ script> / n"; Private const string mouse_script_regestiger_key = // Keywords registered to the client page "INSECT.WEBCONTROLS.LabelTextBox.mousescript"; /// <summary> // / / Create a control and setting control related properties /// </ summary> Private void createControls () { / / Define a table object Table t = new table (); // Add a style to control the font IF (this._fontsize == 0) T.Style.Add ("Font-size", "10PT"); Else T.Style.Add ("Font-size", "" THIS._FONTSIZE "PT"); // Add a line TableRow Tr = New TableRow (); // Add two cells Tablecell TC1 = New TableCell (); Tablecell TC2 = New TableCell (); // Add the control to the Controls set. TC1.Controls.Add (label); Tc2.controls.add (TextBox); Tr.Controls.Add (TC1); tr.controls.add (tc2); T.Controls.Add (TR); This.Controls.Add (t); } /// <summary> /// Rewote CreateChildControls () /// </ summary> Protected Override Void CreateChildControls () { This.ensureChildControls (); // is created if the child control is not created THIS.CREATECONTROLS (); Base.createchildControls (); // Call the base class method } /// <summary> /// Override onprender () /// </ summary> /// <param name = "e"> </ param> Protected Override Void OnPrender (Eventargs E) { // Add mouse event For (int i = 0; i <controls.count; i ) { IF (Controls [I] is Table) { // The following will transform the color value into hexadecimal representation String r, g, b; R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x"); G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X"); B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x"); IF (r.Length == 1) R = "0" r; IF (g.ley == 1) G = "0" g; IF (B.Length == 1) B = "0" b; Table T = (Table) Controls [i]; T.attributes.Add ("ID", T.ClientID; This.TextBox.attributes ["onfocus"] = "" " " # "#" # " R G B " "; This.TextBox.attributes ["onblur"] = "LTMOUSEOUT (" T. ClientID ")" } } // Output the script to the page. IF (! page.isclientscriptblockregistered (mouse_script_regestiger_key)) / / Prevent duplicate output. { Page.registerClientScriptblock (mouse_script_regestiger_key, mouse_script); } Base.onprender (e); } } } 2004-08-24 4:49 PM | Insect # 回: ASP.NET Component programming Step by step ToolboxData ("<{0}: labeltextbox width = '100px' runat = server> </ {0}: LabelTextBox>")] ToolboxData ("<{0}: labeltextbox width = '100px' runat = server textstring = '> </ {0}: labeltextbox>")] 2004-08-24 5:00 PM | Insect # 回: ASP.NET Component Programming Step by Step Inso: Oh, thinking is quite rigorous. Nice. 2004-08-24 5:16 PM | lizanhong # 回: ASP.NET Component programming step by step Thank you 2004-08-24 6:03 PM | Dondon # 回: ASP.NET Component Programming Step by Step This book has an electronic version? If some, please send it to me, thank you mydotnet@163.com 2004-08-24 8:42 PM | Stupid cat .net # 回: ASP.NET component programming step by step thanks ~~~~~ I hope that I can watch the new work of the tall building ~~ 2004-08-25 8:56 AM | Have a lot of mistakes # 回: ASP.NET Component Programming Step by Step This book has an electronic version? If some, please send it to me, thank you Xiao-maolover@163.com thanks landlord. . Saved. . 2004-08-25 9:27 AM | Matrix # ASP.NET Component Programming Step by Step Ping Back from: blog.9cbs.net 2004-08-25 11:01 AM | Kanshangren # Asp.net paging components learn and use - Use Ping Back from: blog.9cbs.net 2004-08-25 5:40 PM | Coconut forest # Asp.net paging components learn and use - Use Ping Back from: blog.9cbs.net 2004-08-25 7:52 PM | GZ's Toby # ASP.NET Component Programming Step by Step Ping Back from: blog.9cbs.net 2004-08-26 1:07 AM | Nanshan # 回: ASP.NET component programming step by step leave a mark! 2004-08-26 9:21 AM | xjm # 回: ASP.NET component programming Step by step back to me back ------------------- # 回:: a little bug // The following will transform the color value into hexadecimal representation String r, g, b; R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x"); G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X"); B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x"); IF (r.Length == 1) r = "0" r; IF (g.length == 1) g = "0" g; IF (B.Length == 1) B = "0" b; -------------------------------- - In fact, the following code can be changed to a line of code to get it -------------------- // The following will transform the color value into hexadecimal representation String r, g, b; R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x"); G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X"); B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x"); IF (r.Length == 1) R = "0" r; IF (g.ley == 1) G = "0" g; IF (B.Length == 1) B = "0" b; Table T = (Table) Controls [i]; T.attributes.Add ("ID", T.ClientID; This.TextBox.attributes ["onfocus"] = "" " " # "#" # " R G B " "; -------- Change to ------------------------- This.TextBox.attributes.add ("OnMouseover", "LTMouseOver (this, '" colorTranslator.tohtml (this._mouseovercolor) "); Simple! Inadvertently discovered! Because I think MS is not possible to convert a color to yourself.</div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-122709.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div>New Post(0) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="122709" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: 0.041, SQL: 9</div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'ja2zJWpYNO5zvXYADoV9GscTXMZI8AETrf2w93JkuobxYVH7qmcnN_2BwPxY8He9yk9UCiU5C7L_2F2PdVBQ6uZLbg_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>