First, what is the component?
View MSDN, Microsoft is such a definition to component: In .NET Framework, component refers to a class that implements the System.comPonentModel.icomponent interface, or a class directly or indirectly derived from the category that implements IComponent. This is a definition, popular speaking, component is "independently operated software unit", which emphasizes independent operation, which means that the components must have low coupling, high rejection characteristics. Microsoft divides the software into two parts: one is Component, which means that there is a specific function, can operate independently, does not have a Unit of the UI interface; the second is Control, that is, the controls we often say, it means a specific function, Independently operated UI interface unit.
Second, learn the knowledge that the ASP.NET component needs to be mastered
Any master .NET language, it is recommended to use C #, C # is a brand new language, but borrowed from C and Java grammar, and introduced some new concepts, don't get good in programmers.
Understand the running mechanism of IIS and the operation mode of ASP.NET.
Skilled JavaScript, the scripting language power is very good during processing client action, and all custom components are inseparable from JavaScript, and CSS and DHTML are also well-known. No way, they rarely appear alone and always like the collective performance.
Third, the difficulty of component design
This problem doesn't have to ask, maybe you guess a bit, a word: difficult.
You may be aware that when writing ASP.NET applications, rarely works in-depth research on ViewState, because the user object designed by ViewState itself is not an application, but a component designer. If it is not because the client needs, you will not write a large number of JavaScript scripts in the ASP.NET, and in the component design, it is difficult to escape the dry system. More than this, is it designed as a server component? Is our component inherited Control or inherited WebControl or inherited Component? Do you need to customize Attribute in the component? Do you need data binding? How to draw the appearance of the component? How to communicate with IIS? Need Post-back? Many of the problems need to be a component designer - hard to think about it.
So, if you don't want to say anything: Isn't it designed a component? What is difficult? So, I will smile, because I know, you must be joking.
But don't be afraid, "programmers need to explore the spirit!"
Fourth, the choice of base class
If we design a web visible control, and constitute a part of the web page, you can inherit the Control class or the WebControl class. If it is a non-visible control, you can inherit the component, inherit this type of control, not appearing on the page, but appears in Component TRAY. Remember the OpenFileDialog control? This file opens the dialog control is in the Component TRAY control.
If we just enhance the function based on existing controls, then inherit the existing control.
5. Practice realism
Suppose we want to design a component that only allows the user to enter numbers, which naturally should be placed in the client, and the client's verification script can be written:
</ title></p>
<p><script language = "javascript"></p>
<p>Function Virty (CTRL)</p>
<p>{</p>
<p>Event.keycode == 13)</p>
<p>Return True</p>
<p>Event.Keycode <48 || Event.Keycode> 57)</p>
<p>Return False;</p>
<p>Else</p>
<p>Return True;</p>
<p>}</p>
<p></ script></p>
<p></ HEAD></p>
<p><Body></p>
<p><form method = "pos"></p>
<p><p></p>
<p><input type = "text" name = "t1" size = "20" onkeypress = "javascript: return virty (this);">>>>>></p>
<p></ p></p>
<p></ form></p>
<p></ Body></p>
<p></ Html></p>
<p>Of course, these verification code cannot be written by the user, and should be written by the component designer, that is, when the user dragged the component from the toolbox to the page, the verification code should be automatically generated. Picture of code to the web page, we overprender () method is OK.</p>
<p>Write a few constants before rewriting the onprender () method:</p>
<p>Private const string scp_number_only_script_id = "{29FD7A41-49FD-4FC4-AFA9-6A0B875A1A51}";</p>
<p>Private const string scp_number_only_hook = "Return Virty (this);"</p>
<p>Private const string scp_number_only_script =</p>
<p><script language = / "javascript1.2 /"> / nfunction var) / n {{/ / n " </p>
<p>"if (event.keycode == 13) / n return true; / n if (event.keycode <48 || Event.keycode> 57) / N Return False; / N else / n return true; / n}}" </p>
<p>"</ script>";</p>
<p>The following method is used to verify the generation of code:</p>
<p>Private void renderjavaScript ()</p>
<p>{</p>
<p>if Page.RegisterClientScriptBlock (SCP_NUMBER_ONLY_SCRIPT_ID, string.Format (SCP_NUMBER_ONLY_SCRIPT, base.ID)) (Page.IsClientScriptBlockRegistered (SCP_NUMBER_ONLY_SCRIPT_ID)!);</p>
<p>}</p>
<p>Why is there page.isclientscriptblockregistered (SCP_NUMBER_ONLY_Script_ID)? We imagine that if there is ten this control in the web page, is it to output ten such scripts? Obviously, this is a snake to add, so we need to use IsClientScriptBlockRegistered () to determine if the script is output in the client, if the script is registered in the client, no longer output. Next is to override the onprender () method, this method is responsible for drawing a script to the client.</p>
<p>Protected Override Void OnPrender (Eventargs E)</p>
<p>{</p>
<p>Base.onprender (e);</p>
<p>RenderjavaScript ();</p>
<p>}</p>
<p>Everyone should notice that the script requires an event trigger to execute, when the user enters data from the browser, if it is not a number, it is ignored that the action is only accepted. This requires onkeypress = "JavaScript: return Virty (this);" this code. So how do this code output to the client? Rewrite the addAttributeStorender () method, which is responsible for drawing the properties of the component. So we wrote the following code:</p>
<p>Protected Override Void AddattributeStorender (HTMLTextWriter Writer)</p>
<p>{</p>
<p>Base.addattributeStorender (Writer);</p>
<p>Writer.Addattribute ("onkeypress", scp_number_only_hook;</p>
<p>}</p>
<p>The final source code is as follows:</p>
<p>/</p>
<p>/// Note that the copyright owner of this code is Mr. Huang Zhongcheng.</p>
<p>/// This means thank you for writing the book "ASP.NET component design"</p>
<p>Using system;</p>
<p>Using system.text;</p>
<p>Using system.drawing;</p>
<p>Using system.Web;</p>
<p>Using system.Web.ui;</p>
<p>Using system.Web.ui.webcontrols;</p>
<p>Namespace PowerASP.NET.CONTROLS</p>
<p>{</p>
<p>[Toolboxbitmap (TypeOf (Numbereditor), "PowerASP.NET.CONTROLS.NUMBEREDITOR.BMP"]]]</p>
<p>Public Class Numbereditor: BaseEditor</p>
<p>{</p>
<p>Private const string scp_number_only_script_id = "{29FD7A41-49FD-4FC4-AFA9-6A0B875A1A51}";</p>
<p>Private const string scp_number_only_hook = "Return Numbereditor_KeyPress_Handle (this);"</p>
<p>Private const string scp_number_only_script =</p>
<p><script language = / "javascript1.2 /"> / nfunction number (ctrl) / n {{/ / n " </p>
<p>"if (event.keycode == 13) / n return true; / n if (event.keycode <48 || Event.keycode> 57) / N Return False; / N else / n return true; / n}}" "</ script>";</p>
<p>// Rending Number-Limit JavaScript.</p>
<p>Private void renderjavaScript ()</p>
<p>{</p>
<p>if Page.RegisterClientScriptBlock (SCP_NUMBER_ONLY_SCRIPT_ID, string.Format (SCP_NUMBER_ONLY_SCRIPT, base.ID)) (Page.IsClientScriptBlockRegistered (SCP_NUMBER_ONLY_SCRIPT_ID)!);</p>
<p>}</p>
<p>Protected Override Void AddattributeStorender (HTMLTextWriter Writer)</p>
<p>{</p>
<p>Base.addattributeStorender (Writer);</p>
<p>Writer.Addattribute ("onkeypress", scp_number_only_hook;</p>
<p>}</p>
<p>Protected Override Void OnPrender (Eventargs E)</p>
<p>{</p>
<p>Base.onprender (e);</p>
<p>RenderjavaScript ();</p>
<p>}</p>
<p>Public numbereditor (): Base ()</p>
<p>{</p>
<p>}</p>
<p>}</p>
<p>}</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-8553.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="8553" 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.042</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 = 'TPTpmJ9kXqmlRc22aYrkuI6YW7bGsigTT_2FhyBmhVNnFX0Lvl5Wwl_2F52cTycD96nteKrN7XZe5fi12mBZ';
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>
