2. Tech
  3. Dynamically Adding Controls to A Web Page ...

Dynamically Adding Controls to A Web Page ...

xiaoxiao2021-03-06  71

You May Add Controls to a Web Page Dynamically As Needed At Run Time Rather Than At Design Time. This Short Article Shows You How.

By: John Kilgo Date: April 5, 2003 Download The Code.

Printer Friendly Version

Sometimes when building a web form you do not know exactly how many controls of a certain type you will need on the form at run time. This problem can be easily solved by dynamically adding the forms at run time rather than adding them at design time. In this example we will use a simple interface to allow the user to state how many DropDownLists he or she wants on the web form. In real life you will probably determine based upon input from some other control (s) on the page. Either way The Solution To The Problem Is The Same.

As usual, lets get straight to the code. The .aspx file contains our

and allows the user to enter the number of DropDownLists to be created by the code-behind program. Following is the code for the .aspx page. The Only Thing of Note Here Is The OnClick Event for the Button. It is here (in the code-behind page) Thatur controls will be created.

<% @ Page language = "VB" autoeventwireup = "false" src = "DynamicDropdowns.aspx.vb" inherits = "DynamicDropdowns"%> DynamicDropdowns </ title> <meta name = "generator" content = "Microsoft Visual Studio.Net 7.0> <meta name =" code_language "content =" Visual Basic 7.0 "> <meta name = vs_defaultClientScript content = "JavaScript"> <meta name = vs_targetSchema content = "http://schemas.microsoft.com/intellisense/ie5"> </ head> <body MS_POSITIONING = "GridLayout"> <form id = "Form1 "Method =" post "runat =" server "> <h4> Enter number of dropdownloadlists: </ h4> <ask: TextBox ID =" txtnumcontrols "runat =" server "/> <ask: button id =" btncontrols "text = "OK" onclick = "btncontrols_click" runat = "server" /> </ form> </ body> </ html> now for the code-behind page. As promised, all of the code to producture weddownloadlists Appers in the Button's Click Event. Here We Have Two for ... Next Loops. The Outer Loop (i) Creates The DropdownLists, Sets Their ID's, and THEN, BELOW The Inner L oop (J) adds a <p> paragraph tag to add spacing between the controls, adds the litheral controls and adds the DropDownList controls themselves. The inner loop (J) simply adds some list items for each of the DropDownList controls. If you run The Example Program You Will Better See The List Items That Were Added.</p> <p>Public Class DynamicDropDowns: Inherits System.Web.UI.Page Protected WithEvents txtNumControls As System.Web.UI.WebControls.TextBox Protected WithEvents btnControls As System.Web.UI.WebControls.Button Protected WithEvents Form1 As System.Web.UI.HtmlControls. HtmlForm Public Sub btnControls_Click (ByVal sender As System.Object, ByVal e As System.EventArgs) Dim I, J As Integer For I = 1 to txtNumControls.Text Dim ctrlDropDown = New System.Web.UI.WebControls.DropDownList ctrlDropDown.ID = "ddlDynamic" & I For J = 1 To 4 Dim listItem As New System.Web.UI.WebControls.ListItem listItem.Text = "DropDownList" & I & ":" & J ctrlDropDown.Items.Add (listItem) Next Dim literalControl = New System.Web.UI.LiteralControl literalControl.Text = "<p>" form1.Controls.Add (literalControl) form1.Controls.Add (ctrlDropDown) Next End SubEnd ClassThere you have it. DropDownLists added dynamically at runtime. you can , of course, add most Any Other Type of Control Using this Same Method. You can also use panels to add even more controls and to better control their formatting.</p> <p>You May Run The Program Here.you May Download The Code Here.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-110026.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="110026" 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.046</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 = 'Kd7irh5ya3S5_2Bccx4SJIRYIO6ZMDOBDGvr9W38hfjwrp9deDkWx3zu3rWqYnUgKGo0VJbOZNh2T7I54c7JgaFg_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>