How to achieve no refresh DROPDOWNLIST linkage effect

xiaoxiao2021-03-06  93

ASP.NET brings us a programming mechanism for event models, which makes we put all the tasks on the server, which is a small change, in fact, this is not a problem, but we can't stand it, if we Changing the content page in an input box To refresh, change the DROPDOWNLIST selection requires that another DropDownList needs to be refreshed, it is really depressed.

Below I will describe an original method, which is why it is because this approach is already before asp.net, I don't have to describe the relationship between these two, we have to say today. How do you not refresh the page to update DropDownList, which is designed to throw bricks. In fact, use this method to achieve many applications that do not refresh the webpage and the background interaction. If you don't say anything, look at our example, first we need one Place two DROPDOWNLIST pages, if it is called WebForm2.aspx, the page code is as follows: <% @ page language = "c #" codebehind = "Webform2.aspx.cs" autoeventwireup = "false" inherits = "WebAppTest1.webform2"%% > Webform2 </ 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> function load (state) {var drp2 = document.getlementByid ("DropdownList2"); for (i = drp2.length; i> = 0; i -) {drp2.options.remove i);} var} var httpreq = new activXObject ("msxml2.xmlhttp"); var = new activiXObject ("msxml2.domdocument"); // Use escape to solve Chinese problem OH TTPREQ.OPEN ("post", "getData.aspx? state =" escape (state), false); httpreq.send (""); result = OHTTPREQ.RESPONSETEXT ;ODOC.LoadXML (Result); items = ODOC. SelectNodes ("// City / Table"); for (Var item = items.nextNode (); item; item = items.nextnode ()) {var city = item.nodetyped accuue; var newoption =</p> <p>Document.createElement ("option"); newOption.text = city; newOption.Value = city; drp2.Options.add (newiption);}} </ script> </ head> <body ms_positioning = "flowLayout> <form"> <form ID = "form1" method = "post" runat = "server"> <ask: DropdownList ID = "DropdownList1" runat = "server"> </ asp: dropdownload = "DropDownList2" runat = "server "> </ ask: DropDownList> </ form> </ body> </ html></p> <p>There are two DROPDOWNLISTs and a js script in the page, which can be written directly on the page. You can also write in the background on the regeist to the page (the latter is more flexible) This page of the background code is as follows, write inside Page_Load The following code: if (! This.ispostback) {// Establish a data source to load the first DropDownList, or load the second SQLConnection Con = New SqlConnection by default ("Server = localhost; dataBase = PUBS; UID = SA; PWD = sa; "); sqldataadapter da = new SqldataAdapter (" Select State from Authors Group By State ", CON); DataSet DS = New DataSet (); DA.FILL (DS); this.dropdownList1.datasource = DS; this. DropdownList1.datatextField = "State"; this.dropdownList1.DataValuefield = "state"; this.dropdownList1.database (); // This is a binding client event, and inspire the following event onchange when the first DropDownList is changed. This event will call a client method loading () this.dropdownlist1.attributes.add ("onchange", "", ",");} I did it in the code above Two things: 1, help one of the DropDownList (you can also bind two). 2. Specify the client script of the control. Below we will introduce the above JS code, first get the DorpdownList object to be connected on the page, clear his options, create two client objects OHTTPREQ and ODOC objects, one of the responsible requests to receive the response results, We send the user selected to the page called Webform6.aspx, which will process this request and return a response. The result of the response is an XML file, which is later introduced in WebForm6.aspx. We use the result of the load using loadXML method LOAD to the ODoc object, and then you can use the SelectNodes method to get all the CITY node, then loop these nodes to create an Option object in the client, and finally put these Option object Add to DropdWonList2.</p> <p>Let's take a look at what WebFowm6.aspx has done something. The HTML page of this page is an unsearable page that includes <@Page> instructions, the background of the background is as follows: Private Void Page_Load (Object Sender, System. Eventargs e) {// put user code to initialize the page head f ("state"]! = Null) {string state = this.request ["state"]. ToString (); sqlconnection con = New SqlConnection ("Server = localhost; database = pubs; uid = sa; pwd = sa;"); sqldataadapter Da = new SqlDataAdapter ("Select City from authors where state = ' state "' ", etc; DataSet DS = New DataSet ( "CITY"); da.Fill (ds); XmlTextWriter writer = new XmlTextWriter (Response.OutputStream, Response.ContentEncoding); writer.Formatting = Formatting.Indented; writer.Indentation = 4; writer.IndentChar = ''; DS.WriteXML (Writer); Writer.Flush (); response.end (); Writer.close ();} This method gets the user selected by the STATE to get a DataSet object after query, using the object's WriteXML method to directly Write to Response.OutputStream and passed to the client, the client's LOAD method passes an XML string by result = ohttpreq.responseText; sentence to a XML string, and finally resolve the string. This method can achieve no refreshed linkage DropdownList, data is obtained from the background database, I hope that the role of the brick introduction, what opinions or views have any opinions or opinions on the article, can send me an email or give me in 9cbs Keep SMS My ID is cuike519! thanks for reading! What do you have any mistakes in the text, please refer to you!</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-124516.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="124516" 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.035</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 = 'q5eXJm2t7UaJHXCaUTF5WE4_2FCp7kbAnoUYsQyi4BLRYncuB6r2C8Or32AQv12s21h1Xbk2FTpUPDFtGd'; 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>