Source: http://blog.9cbs.net/lizanhong/archive/2004/07/23/49940.aspx
ASP.NET Component Programming Step By Step
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></p>
<p><script language = javaScript></p>
<p>Var Oldcolor;</p>
<p>Function Mouseover (Ctrl, Color)</p>
<p>{</p>
<p>OldColor = Ctrl.style.BackgroundColor;</p>
<p>Ctrl.style.color = "#fffff";</p>
<p>Ctrl.style.backgroundcolor = color;</p>
<p>}</p>
<p>Function Mouseout (Ctrl)</p>
<p>{</p>
<p>Ctrl.style.BackgroundColor = OldColor;</p>
<p>Ctrl.style.color = "# 000000";</p>
<p>}</p>
<p></ script></p>
<p></ HEAD></p>
<p><Body></p>
<p><table border = "0" style = "font-size: 9pt" onmouseover = "mouseover (this, '# ff0044')" onmouseout = "mouseout (this)"></p>
<p><tr></p>
<p><TD> <span> Name: </ span> </ td> <td> <input name = "_ CTL2" type = "text" /> </ td></p>
<p></ TR></p>
<p></ TABLE></p>
<p></ Body></p>
<p></ Html></p>
<p>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?</p>
<p>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.</p>
<p>3, delete the automatically generated code, leaving only one class frame, like this (namespace self-defined): using system;</p>
<p>Using system.Web.ui;</p>
<p>Using system.Web.ui.webcontrols;</p>
<p>Using system.componentmodel;</p>
<p>Using system.drawing;</p>
<p>Namespace lzhtextbpx</p>
<p>{</p>
<p>Public class labeltextbox: System.Web.ui.WebControls.WebControl</p>
<p>{</p>
<p>}</p>
<p>}</p>
<p>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:</p>
<p>a) Table: Represents the form</p>
<p>b) Tablelow: Represents the table</p>
<p>c) TableCell: Indicates cells in the table</p>
<p>Note: A table can have multiple tables, and multiple cells can be placed in a table row.</p>
<p>The generated code is as follows:</p>
<p>/ / Define a table object</p>
<p>Table t = new table ();</p>
<p>// Add a line</p>
<p>TableRow Tr = New TableRow ();</p>
<p>// Add two cells</p>
<p>Tablecell TC1 = New TableCell ();</p>
<p>Tablecell TC2 = New TableCell ();</p>
<p>// Add the control to the Controls set.</p>
<p>TC1.Controls.Add (label);</p>
<p>Tc2.controls.add (TextBox);</p>
<p>Tr.Controls.Add (TC1);</p>
<p>Tr.Controls.Add (TC2);</p>
<p>T.Controls.Add (TR);</p>
<p>This.Controls.Add (t);</p>
<p>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:</p>
<p>// Add mouse event</p>
<p>T.attributes.add ("OnMouseover", "Mouseover (this, '" "#" R G B "");</p>
<p>T.attributes.add ("onmouseout", "mouseout (this)");</p>
<p>Attribute indicates the property set of the table, and the add () method is used to add a new property.</p>
<p>By the way, put the fonts in the form also set:</p>
<p>// Add a style to control the font</p>
<p>T.Style.Add ("Font-size", "10PT");</p>
<p>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:</p>
<p>// The following will transform the color value into hexadecimal representation</p>
<p>String r, g, b;</p>
<p>R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x");</p>
<p>G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X");</p>
<p>B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x");</p>
<p>Where _backgroundcolor is a custom property.</p>
<p>All code in this step is as follows:</p>
<p>Private void createControls () // Create controls and setting controls {related properties {</p>
<p>// The following will transform the color value into hexadecimal representation</p>
<p>String r, g, b;</p>
<p>R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x");</p>
<p>G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X");</p>
<p>B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x");</p>
<p>/ / Define a table object</p>
<p>Table t = new table ();</p>
<p>// Add mouse event</p>
<p>T.attributes.add ("OnMouseover", "LTMOUSEOVER (this, '" "#" R G B "");</p>
<p>T.attributes.add ("OnMouseout", "LTMOUSEOUT (THIS)");</p>
<p>// Add a style to control the font</p>
<p>T.Style.Add ("Font-size", "10PT");</p>
<p>// Add a line</p>
<p>TableRow Tr = New TableRow ();</p>
<p>// Add two cells</p>
<p>Tablecell TC1 = New TableCell ();</p>
<p>Tablecell TC2 = New TableCell ();</p>
<p>// Add the control to the Controls set.</p>
<p>TC1.Controls.Add (label);</p>
<p>Tc2.controls.add (TextBox);</p>
<p>Tr.Controls.Add (TC1);</p>
<p>Tr.Controls.Add (TC2);</p>
<p>T.Controls.Add (TR);</p>
<p>This.Controls.Add (t);</p>
<p>}</p>
<p>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:</p>
<p>Private label label = new label (); // Create a label</p>
<p>Private textBox textbox = new textbox (); // Create a text box</p>
<p>Private color _BackgroundColor; // mouse moving into the background color</p>
<p>Public Color BackgroundColor</p>
<p>{</p>
<p>get</p>
<p>{</p>
<p>IF (_BackgroundColor == Color.empty)</p>
<p>Return color.blue;</p>
<p>Return_BackgroundColor;</p>
<p>}</p>
<p>set</p>
<p>{</p>
<p>_BACKGROUNDCOLOR = VALUE;</p>
<p>}</p>
<p>}</p>
<p>Public String Labelstring</p>
<p>{</p>
<p>get</p>
<p>{</p>
<p>Return label.text;</p>
<p>}</p>
<p>set</p>
<p>{</p>
<p>Label.Text = Value;</p>
<p>}</p>
<p>}</p>
<p>Public String TextString</p>
<p>{</p>
<p>get</p>
<p>{</p>
<p>Return TEXTBOX.TEXT;</p>
<p>}</p>
<p>set</p>
<p>{</p>
<p>Textbox.text = value;</p>
<p>}</p>
<p>}</p>
<p>6, this step needs to overwrite the CreateChildControls () method, which is automatically called to generate a child control.</p>
<p>Protected Override Void CreateChildControls ()</p>
<p>{</p>
<p>This.ensureChildControls (); // is created if the child control is not created</p>
<p>Base.createchildControls (); // Call method CreateControls ();</p>
<p>}</p>
<p>7. Save the script of the first step to a constant:</p>
<p>Private const string mouse_script = // Used to trigger a script for mouse events</p>
<p>"<script language = javaScript> / n" </p>
<p>"Var OldColor; / N" </p>
<p>"Function LTMouseOver (Ctrl, Color) / N" // When the mouse is moved, Ctrl is a table, and the color is the color value to be changed.</p>
<p>"{/ N" </p>
<p>"OldColor = Ctrl.Style.backgroundColor; / N" // Record the original document background color</p>
<p>"ctrl.style.color = '#ffffff'; / n" // change the font color to white</p>
<p>"Ctrl.Style.BackgroundColor = color; / n" // Changk Table Background Color</p>
<p>"} / n" </p>
<p>"Function LTMOUSEOUT (CTRL) / N" // The mouse is transferred, the parameter is the same as above</p>
<p>"{/ N" </p>
<p>"Ctrl.Style.BackgroundColor = Oldcolor; / N" // Restore Background Color</p>
<p>"ctrl.style.color = '# 000000';" // Restore font color into black</p>
<p>"} / n" </p>
<p>"</ script> / n";</p>
<p>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.</p>
<p>Protected Override Void OnPrender (Eventargs E)</p>
<p>{</p>
<p>// Output the script to the page.</p>
<p>IF (! page.isclientScriptBlockRegistered ("MouseScript")) / / Prevent duplicate output.</p>
<p>{</p>
<p>Page.RegisterClientScriptBlock ("Mousescript", Mouse_Script);</p>
<p>}</p>
<p>Base.onprender (e);</p>
<p>}</p>
<p>Use of controls</p>
<p>Using controls is obviously much simpler than the creation control, let's talk about the use of the control (suitable for beginners):</p>
<p>After compiling the project, a set of assemblies called LabelTextBox.dll is generated.</p>
<p>1. Create a test item, open the toolbox, click Right click, select "Add / Shift", as shown below:</p>
<p>2, "Custom Toolbox", select the ".NET Framwork Components" tab, click "Browse", find the "LabelTextBox.dll" assembly in the LabelTextBox project directory, as shown:</p>
<p>3, after the determination, the icon of the control appears in the toolbox, as shown below:</p>
<p>4. Drag the control directly to the Web form.</p>
<p>This program debugging environment: Windows2000 Server, MS.NET2003.</p>
<p>Posted on 2004 July 23, 2004 3:45 PM Feedback</p>
<p># 回: It is a little bug // below to convert the color value into hexadecimal representation</p>
<p>String r, g, b;</p>
<p>R = (convert.Toint32 (this._backgroundcolor.r)). Tostring ("x");</p>
<p>G = (convert.Toint32 (this._backgroundcolor.g)). TOSTRING ("X");</p>
<p>B = (convert.Toint32 (this._backgroundcolor.b). Tostring ("x");</p>
<p>IF (r.Length == 1) r = "0" r;</p>
<p>IF (g.length == 1) g = "0" g;</p>
<p>IF (B.Length == 1) b = "0" b;</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-123659.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"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></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><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="123659" 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:
<b>0.032</b>, SQL:
<b>9</b></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);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'PsleZyXOd8MxBPHdZj1BpKIr5FLCDfjWzOUzozLRS1_2FI37Ehekxzl_2B1WJ8pvRMybW0LGrQhKyK6vdws6eNn16g_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>
