[ASP.NET] Make a simple multi-page TAB function

xiaoxiao2021-03-06  50

We often browse the classification information in the homepage, in the C / S mode, often use the TAB paging method, then put different information in different TAB pages, then click the tab to view the different pages. content. We can use the web version of IFRAME to implement a master WebForm1, put two buttons to simulate the page sign (you can also create more beautiful tabs in the future), then build two sub-Form, WebForm2 WebForm3, when the button is pressed, switch the IFRAME's SRC property to display different sub-pages. The specific code is as follows:

Webform1.aspx

<% @ Page language = "c #" codebehind = "Webform1.aspx.cs" autoeventwireup = "false" inherits = "iframetest.webform1"%> 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"> <STYLE> .aaa {BORDER-TOP-STYLE: none; Border-right-style: none; border-left-style: none; background-color: # ffcc33; border-bottom-style: none} .bbb {border-top-style: none; border-right-style: none; Border-left-style: none; background-color: # 99ffcc; border-bottom-style: none} </ stop> </ head> <body ms_positioning = "gridLayout> <form id =" form1 "method =" POST "Runat =" server "> <asp: button id =" Button1 "style =" z-index: 101; Left: 16px; position: absolute; top: 24px "runat =" server "text =" cssclass = " AAA> </ asp: button> <asp: button id = "button2" style = "z-index: 102; Left: 72px; position: absolute; top: 24px" runat = "server" text = "button" cssclass = "bbb"> </ asp: Button> <iframe id = "iFrame1" style = "border-right: 0px solid; border-top: 0px solid; z-index: 103; left: 16px; border-left: 0px solid;</p> <p>Width: 648px; border-bottom: 0px solid; Position: absolute; top: 40px; height: 288px "runat =" server "> </ iframe> </ form> </ body> </ html> Webform1.aspx.cs</p> <p>... Private void Button1_Click (object sender, System.EventArgs e) {IFRAME1.Attributes.Add ( "src", "Webform2.aspx");} private void Button2_Click (object sender, System.EventArgs e) {IFRAME1.Attributes .Add ("src", "webform3.aspx");</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-83206.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="83206" 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.052</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 = 'kVF_2BgOr0i20EoFSvYmPU49wZmBE9UHzyyRYtV_2BJyzrucjEcB9bc3yltIENxGr1lI_2F3Hl8f92G45hVd60mEouzQ_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>