Author: Qing Gu Gang prettywolf@vip.sina.com in ASP.NET applications, server-side controls to our development work has brought a lot of convenience, but the cost is to increase the burden on the server processes, frequent submitted greatly increased network resources Use and server resources. This article describes the use of JavaScript and other means to increase browser-end processing capabilities to improve application performance, which is a good choice for data that is not high in status requirements. By following we understand the use of this method through an example. Suppose there is such a need: register information for several people (for simplicity, only name and age is used in the instance). If you use the server processing method, you will be submitted for each person information for each person's information, even if the improved operation is not very convenient to each time the specified number of personnel information form is still. So what is the effect of using browser-end processing? Please see the picture below:
Click the [Add Personal Information] button to generate a group of "name", "age" input form, and then click to generate several groups. Each group can be deleted separately. When you click the [Submit] button, all personnel added to the above will be submitted to the server through the submission, and the entire entry process is smoothly submitted, and there is also a good improvement to the user experience. The implementation of this feature is actually very simple, please see the following code: <% @ page language = "c #" codebehind = "Webform1.aspx.cs" autoeventwireup = "false" inherits = "scriptform.webform1"%>
3C
// DTD html 4.0 transitional // en ">
Webform1 </ title> <meta content =" Microsoft Visual Studio .NET 7.1 "Name =" Generator "> <meta content =" c # " name = "CODE_LANGUAGE"> <meta content = "JavaScript" name = "vs_defaultClientScript"> <meta content = "http://schemas.microsoft.com/intellisense/ie5" name = "vs_targetSchema"> <script language = "javascript "></p>
<p>Var index = 0;</p>
<p>VAR count = 0;</p>
<p>Function addform ()</p>
<p>{</p>
<p>Document.all.formlist.insertAdjacenthtml ("BeforeEnd", Createform (Index));</p>
<p>COUNT = 1;</p>
<p>INDEX = 1;</p>
<p>Document.all.txtcount.value = index;</p>
<p>}</p>
<p>Function CreateForm (ID)</p>
<p>{</p>
<p>Var code = "<Table ID = /" Table _ " ID " / "Cellspacing = /" 1 / "Cellpadding = /" 1 / "Border = /" 0 / ">; code =" <tr> <TD > Name: </ td> <TD> <input id = / "txtname" id "/" type = / "text /" name = / "txtname" ID "/"> </ td> <td> < Input ID = / "btndelete _ id " / "name = /" nclick = / "οnclick = /" transoveform (this.parentelement.parentelement.parentelement); / "type = /" button / "value = / "Delete /"> </ TD> </ TR> ";</p>
<p>Code = "<tr> <TD> Age: </ td> <TD> <input id = /" txtage " id " / "type = /" text / "name = /" txtage " ID " / " > </ Td> <td> </ td> </ tr> ";</p>
<p>Code = "</ TABLE>";</p>
<p>Return Code;</p>
<p>}</p>
<p>Function Removeform (ID)</p>
<p>{</p>
<p>ID.Removenode ();</p>
<p>Count - = 1;</p>
<p>}</p>
<p></ script></p>
<p></ Head> <body> <form id = "form1" method = "post" runat = "server"> <table id = "table1" cellspacing = "1" cellpadding = "1" width = "100%" border = "1"> <Tr> <TD> <input οnclick = "addform ();" Type = "button" value = "Add person information"> </ td> </ tr> <tr> <td id = "formlist > </ Td> </ tr> <tr> <TD align = "center"> <ask: button id = "btn" runat = "server" text = "Submit"> </ asp: button> </ td > </ Tr> </ table> <input id = "txtcount" type = "hidden" name = "txtcount"> </ form> </ body> </ html> This code is: its work The principle is to click the [Add Personal Information] button (HTML control), write the HTML code of the form (blue font) using JavaScript to the specified location, and specify the ID of the "Input" control, the ID of the control uses the string The way the head plus digital suffix makes the search for the control easier. "Function AddForm ()" and "Function Removeform (ID)" respectively respond to the [Add Personal Information] and [Delete] button, implement the form of addition and deletion. Each additional person information form, "index" and "count" increase "1</p>
<p>"</p>
<p>, Delete a form "count" value reduction "</p>
<p>1</p>
<p>"</p>
<p>. The value of "index" is put in the hidden domain of the ID "txtcount" is that you can get on the server side. Ok, the code of the browser is finished, how do I get the data entry on the server? Please see the following code: USING SYSTEM;</p>
<p>Using system.collections;</p>
<p>Using system.componentmodel; using system.data;</p>
<p>Using system.drawing;</p>
<p>Using system.Web;</p>
<p>Using system.Web.SessionState;</p>
<p>Using system.Web.ui;</p>
<p>Using system.Web.ui.webcontrols;</p>
<p>Using system.Web.ui.htmlcontrols;</p>
<p>Namespace Scriptform</p>
<p>{</p>
<p>/// <summary></p>
<p>/// WebForm1 summary description.</p>
<p>/// </ summary></p>
<p>Public class Webform1: System.Web.ui.page</p>
<p>{</p>
<p>Protected system.Web.ui.WebControls.Button BTN;</p>
<p>Private Void Page_Load (Object Sender, System.EventArgs E)</p>
<p>{</p>
<p>/ / Place the user code here to initialize the page</p>
<p>}</p>
<p>#Region web form designer generated code</p>
<p>Override protected void oninit (Eventargs E)</p>
<p>{</p>
<p>//</p>
<p>// Codegen: This call is necessary for the ASP.NET Web Form Designer.</p>
<p>//</p>
<p>InitializationComponent ();</p>
<p>Base.onit (E);</p>
<p>}</p>
<p>/// <summary></p>
<p>/// Designer supports the required method - do not use the code editor to modify</p>
<p>/// This method is content.</p>
<p>/// </ summary></p>
<p>Private vidinitiRizeComponent ()</p>
<p>{</p>
<p>This.btn.click = new system.eventhandler (this.btn_click);</p>
<p>This.Load = New System.EventHandler (this.page_load);</p>
<p>}</p>
<p>#ndregion</p>
<p>Private Void BTN_Click (Object Sender, System.EventArgs E)</p>
<p>{</p>
<p>INT count = 0;</p>
<p>IF (Request.Params ["txtcount"]! = NULL)</p>
<p>Count = convert.toint32 (Request.Params ["txtcount"]);</p>
<p>String strname = "";</p>
<p>String string = "";</p>
<p>For (int i = 0; i <= count; i )</p>
<p>{</p>
<p>IF (Request.Params ["TXTNAME" i]! = NULL)</p>
<p>{</p>
<p>Strname = Request.Params ["TXTNAME" i] .tostring ();</p>
<p>}</p>
<p>IF (Request.Params ["TXtage" i]! = null)</p>
<p>{</p>
<p>Strage = Request.Params ["TXtage" i] .tostring ();</p>
<p>}</p>
<p>//</p>
<p>// Operate the person information, such as submit to the database.</p>
<p>//</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>}</p>
<p>Does the operation have I have met? And the ASP is similar, using the request to get the data in the Data field in the Form, and then how to deal with it, see your actual needs.</p>
<p>ASP.NET</p>
<p>In the application, server-side controls bring a lot of convenience to our development work, but its price is to increase the burden on server processing, and frequent submission greatly increase the use of network resources and server resources. This article introduces usage</p>
<p>JavaScript</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-132446.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="132446" 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.029</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 = 'PbG2PMAsZej2oaxUVnvFLHtvSFzbY7Yds8QqS48w9ufjgtmeR3L6s2aA_2B3Y7mkCbrsxRyXYmx1mxwRYty8MJlg_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>
