Use the master page quick standardization site

zhaozj2021-02-16 89

Paul Wilson

Microsoft's most valuable expert in the ASP.NET field

October 2003

Applicable to:

Microsoft ASP.NET whidbey

Microsoft Visual Basic .NET

Summary: Understand the master page characteristics, this is a flexible page template system that appears in the ASP.NET version of the world, providing excellent visual designer support, its code "whidbey" (according to the upcoming Microsoft Visual The code named after the Studio .NET released. (10 page print pages)

Download the ASP.NET PRO example.

content

This page

Advantages of multi-region and header tags nested and dynamic master

Note The corresponding software product is officially issued, this document has been written, so we cannot guarantee that any details involved in this document are exactly the same as the final delivery. Description Information in this article is for use in this article, for reference only in planning. If there is any change, no notice.

Most web sites share a layout, but traditional ASP and ASP.NET have never included automatic support for page templates. Although the contained files are usually used in the traditional ASP, and the user controls and basic PAGE classes are often used, but these methods are not built-in and do not have designer support. Microsoft ASP.NET Whidbey changes this situation by joining a flexible page template system named masterpiece. This template system should be simple enough to designer, and its function is strong enough for developers.

To learn this new master page method, the easiest way is to examine some examples, so the remainder of this article will tell you a number of examples, from the simplest case, gradually extend to a higher level.

The first example creates a master with site headings, left and right sidebars, site footnotes, and single content "areas" to illustrate various new concepts and syntax of the master page. First, create a master page as a common layout. The master page is very similar to the user control, and the difference is that it has a new Master file extension and an Master directive. Unlike most user controls, the master page will contain top HTML tags typically located in each individual page, such as , , , and

. Just use normal HTML tags and server controls (in this case, including a table for defining headers and footnotes, and another embedded table for defining the left and right sidebars), create a public layout ( Refer to Figure 1). In the actual page, the content area replaced will then be tagged by the new ContentPlaceHolder control and will match the ID of the control in the actual page. Any content included in this ContentPlaceHolder control is the default content (only this default content will only be present when the actual page does not overwrite the matching content area of this default content.).

Code Example 1. This IntroLayout.Master file is a master page for defining the public layout of other pages. These include title, left and right side bars, footnotes, and single content area.

<% @ Master Language = "VB"%> master pages </ title> <link rel = "stylesheet" type = "text / css" href = "stylesheet.css" /> <stylesheet.css / head> <body> <format = "server"> <table width = "100%" cellpadding = "0" cellspacing = "0"> <tr class = "head"> <td height = "25"> Site Header Goes Here </ TD> <Table Width = "100%" cellpadding = "5" cellspacing = "0"> <tr valign = "top" height = "400"> < Td width = "200" class = "left"> site left sidebar goes here </ td> <td> <h1 align = "center"> master pages </ h1> <ask: contentPlaceHolder ID = "main" runat = " Server "> this is default content - override on page </ ask: contentPlaceHolder> </ td> <td width =" 200 "class =" right "> site right sidebar goes here </ td> </ TR> </ Table> </ td> </ tr> <tr class = "foot"> <TD height = "25"> site footer goes here </ td> </ tr> </ table> </ form> </ body> </ html></p> <p>Finally, create a content page for the content unique to the page, where the new master property is used in the Page instruction to link the mother version. In addition to an optional server script block, the only top-level element that allows usage is a new Content control, which replaces the matching ContentPlaceHolder control (defined in the master page). The Content control has a ContentPlaceHolderID property that must be matched with the IDPLACEHOLDER control it to overwrite. Otherwise, the contents of the page in this content area include ordinary HTML tags and server controls, including a page or control event handler. Note that by containing a <pages> element with master properties, we can specify a default master in the web.config file, but this feature is not supported in the designer. Code Example 2. This INTROCONTENT.ASPX file is a content page that uses the IntroLayout.Master master page. This includes only the page unique content corresponding to the area defined in the master page.</p> <p><% @ page language = "VB" Master = "~ / introlatyout.master"%> <script runat = "server" language = "vb"> sub subsmit_click (byval e AS Object, _ Byval E as system.eventargs) Result .Text = testValue.text end sub </ script> <ask: content id = "main" runat = "server" contentholderid = "main"> <div align = "center> <h3> Introduction To Master Pages </ h3 > This is page content overridden from master <p /> <ask: textbox id = "testvalue" runat = "server" /> <p /> <ask: button id = "submit" runat = "server" text = Submit "οnclick =" submit_click "/> <p /> result: <asp: literal id =" result "runat =" server "/> </ div> </ asp: content></p> <p>We can of course use SDK to prepare this example in Notepad, but when using the IDE like "whidbey" version of Microsoft Visual Studio .net, the value of the master page is really reflected. Figure 1 shows the design time view of the content page when using this master page, thereby displaying how the entire page performs visual rendering when designing. The master page itself is displayed, but the master page is gray because it itself is not editable, and the content page is fully designed, with a new design task panel around it. Unlike all page template methods used in previous versions of Visual Studio .NET, there is all of the all of Microsoft IntelliSense, drag and drop or any other design features. Figure 1. WHIDBEY version of Visual Studio .NET includes support for the masterpiece design. The master page itself is displayed as gray, and the page specific content is editable.</p> <p>Multi-region and header tag</p> <p>The next example illustrates how to use multiple content areas in the master page and demonstrate how to extend the master page with custom public properties. First, change the right sidebar to a ContentPlaceHolder control, in which case is ID Right, which is linked to each page of this master, which can also be replaced with a Content control. This new area will be displayed in the Visual Studio .NET designer and is fully editable, just like other content areas, and if this area is not overwritten in the actual page, the default content will be rendered. Next, the <title> tag is changed to a part of the ContentPlaceHolder control, so you can easily set the title, style sheet link, and metatag in each actual page. Note that this content area will not be displayed in the designer because it is located in Head instead of Body, but like a normal HEAD tag, it is convenient to edit in the HTML source file. Next, create a common string property called LeftSideBar (or in this case, create a field), and create a Literal control for the left sidebar, set the TEXT property of the control to this property mother The value in the prerender event. In this simple example, you can also create another content area, but it is important to know that for more complex situations that may encounter, custom public properties in the master page are easy to create and use.</p> <p>Code Example 3. This MultiPleRegions.master file has multiple zones, one of which is used for title and other HEAD tags. It also defines a custom public property that is conveniently set in each actual page.</p> <p><% @ Master Language = "VB"%> <script runat = "server" language = "vb"> public leftsidebar as string _ = "master.leftsidebar goes here" sub page_prerenter (Byval E AS ISTEM .Eventargs) Left.text = LeftsideBar End Sub </ script> <html> <head> <ask: contentPlaceHolder ID = "Head" runat = "server"> <title> master pages </ title> </ asp: contentplaceholder> <link rel = "stylesheet" type = "text / css" href = "stylesheet.css" /> </ head> <body> <form runat = "server"> <Table width = "100%" cellpadding = "0 "Cellspacing =" 0 "> <TD Height =" 10 "> Site header Goes here </ td> <TR> <Tr> <TD> <Table Width =" 100% "Cellpadding = "5" Cellspacing = "0"> <tr Valign = "TOP" height = "400"> <td width = "200" class = "left"> <ask: literal id = "left" runat = "server" > Master.LesideBar Goes Here </ ask: LITERAL> </ TD> <TD> <h1 align = "center"> master pages </ h1> <ask: contentPlaceHolder ID = "main" runat = "server"> this is DEFAULT Content - Override on page </ ask: ContentPlaceHolder> </ td> <td width = "200" class = "right"> <ask: co NtentPlaceHolder ID = "Right" runat = "server"> Site Right Sidebar Goes here </ ask: contentPlaceHolder> </ td> </ tr> </ table> </ td> </ tr></p> <p><trilas = "foot"> <TD height = "25"> site footer goes here </ td> </ tr> </ table> </ form> </ body> </ html> final, change the content page, Appropriate use of the matching Content control overrides the new area, or if you want to keep the default content defined by each area, you can do not change. Remember, for those areas for HTML HEAD content, including headers, style sheet links, and metatags, you must manually edit in the HTML source file, because only the Body area is displayed in the designer. Finally, although you may need to save or reload the master, set the value of the master page to define the value of the master page in the LOAD event (this value can also be used in IntelliSense).</p> <p>Code Example 4. This MultiPleRegions.aspx file is the content page that uses the MultiPleRegions.master master page. These include multiple regions (including one area in HTML HEAD) and use a custom attribute.</p> <p><% @ page language = "VB" Master = "~ / multipleres.master"%> <script runat = "server" language = "vb"> sub page_load (byval e as system.eventargs) Master .LeftSideBar = "Page-Specific Left SideBar" End Sub Sub Submit_Click (ByVal sender As Object, _ ByVal e As System.EventArgs) Result.Text = TestValue.Text End Sub </ script> <asp: content id = "Head" Runat = "SERVER" ContentPlaceHolderid = "Head"> <title> Master Pages: Multiple and Head Regions </ title> </ asp: content> <ask: content id = "main" runat = "server" contentPlaceHolderid = "main" > <div align = "center"> <h3> Multiple and Head Regions </ h3> this is page content overridden from master <p /> <ask: textbox id = "testvalue" runat = "server" /> <p / > <ask: button id = "submit" runat = "server" text = "submit" οnclick = "submit_click" /> <p /> result: <asp: literal id = "result" runat = "server" /> < / div> </ asp: content> <ask: content id = "right" runat = "server" ContentPlaceholderid = "right"> Page-Specific Right Sidebar </ ask: content> Back to top</p> <p>Nested and dynamic master</p> <p>The last example illustrates the use of the nested motherpage and demonstrates how to enable the dynamic master page determined based on user input based on user input. Please note that at least this test version is concerned, nesting master is not supported, and it is not recommended to implement the method required for dynamic master in this test version, because better release in subsequent versions. Formal support method. First, create a parent master with only site titles, site footnotes, and single sub-content regions and an HTML HEAD area.</p> <p>Next, a child master is created to replace the sub-region, which is disclosed as a custom attribute, and the right side bar is disclosed as a content area, and the central region is disclosed as the main content area. In addition, it is also necessary to cover and replace the HTML HEAD area to disclose the area to the actual page, at least for the current test version (see the code). Finally, changing the content page to link to this master, and override the content area as described above. Next, a "Device Filter" master is added to the page instruction, in which case the master will be named "Alternate". Then, rewrite the TestDeviceFilter method and returns True when the Condition of this Alternate master is met. In this case, the Alternate master is used when there is a return, although the Form collection must be used to determine this situation (because the iSPostback is not available in the early stage of this page survival cycle). Finally, set the custom public property value of the master page in the LOAD event, although this will require the type of mandatory (because the master is now dynamic). In addition, pay attention to this method is not officially recommended, but this is the only way to realize the dynamic master in the test version, which is still discussed and it is likely to make changes before final release to better support. Dynamic master.</p> <p>Code Example 5. This nestedLayouts.aspx file is a content page that is nested in the ChildLayout.Master master page. When the page is fur, MultiPleRegions.master is also dynamically used.</p> <p><% @ page language = "vb" master = "~ / childlayout.master" alternate: master = "~ / multiplereds.master"%> <script runat = "server" language = "vb"> Overrides function testdevicefilter (_ byval deviceFilterName As String) As Boolean If deviceFilterName.Equals ( "alternate") Then If Request.Form.Count> 0 Then Return True End If End If Return MyBase.TestDeviceFilter (deviceFilterName) End Function Sub Page_Load (ByVal sender As Object, _ ByVal e As System.EventArgs) If TypeOf Master Is ASP.ChildLayout_master Then CType (Master, ASP.ChildLayout_master) _ .LeftSideBar = "Nested Layouts Left SideBar" ElseIf TypeOf Master Is ASP.MultipleRegions_master Then CType (Master, ASP.MultipleRegions_master) _. LeftSideBar = "Multiple Regions Left SideBar" End If End Sub Sub Submit_Click (ByVal sender As Object, _ ByVal e As System.EventArgs) Result.Text = TestValue.Text End Sub </ script> <asp: content id = "Head" Runat = "Server" ContentPlaceHolderid = "Head"> <title> Master Pages: NESTED and DYNAMIC MASTERS </ Title> </ asp: co NTENT> <ask: content id = "main" runat = "server" contentPlaceholderid = "main"> <div align = "center"> <h3> nested and dynamic masters </ h3> this is page content overridden from master <p /> <asp: textbox id = "testValue" runat = "server" /> <p /> <ask: button id = "submit" runat = "server" text = "submit" οnclick = "submit_click" /> <p /> Result: <asp: literal id = "result" runat = "server" /></p> <p></ div> </ asp: content> <ask: content id = "right" runat = "server" ContentPlaceholderid = "Right"> Page-Specific Right Sidebar </ ask: content> Back to top</p> <p>Advantages of master page</p> <p>The master page system is easy to use for designers because it is based on the familiar user control model of ASP.NET. Although it ended in a near complete visualization, it is not necessary to write any code. On the other hand, the master page is powerful because they support multi-zone, default, nested templates, and device filters (for browser dependence). The master page is also fully compiled, there is optimal performance while providing a strong type programming model (intelliSense, including the design of the master attribute), although some tradeoffs may be made before the final release Dynamic master.</p> <p>Of course, the formal release version of ASP.NET Whidbey has not been released. However, there are several versions of the master page to run in version 1.0 and 1.1, although these versions have not yet built into the designer of Visual Studio. For additional information, see the following two articles in Paul Wilson's ASP.NET Corner on the ASP.NET Alliance Web site: MasterPages: Introduction is the initial example of Microsoft, and MasterPages: Improved Version provides a custom version Do not destroy existing designers. The code downloads provided herein also include almost identical examples of this article, where I use my custom version of the master page in version 1.0 and 1.1.</p> <p>About author</p> <p>Paul Wilson is an Atlanta Software Architect who has recently joined the Prg-Schultz development team. His WilsonWebForm control allows you to use multi-forms and non-reply forms in ASP.NET. He is the most valuable expert in the ASP.NET field, and the administrator of Microsoft's ASP.NET Forum, or Microsoft Certified Solution Developer, Microsoft Certified Application Developer, Microsoft Certified Database Administrator, and Microsoft Authentication System Engineers. . If you want to contact him, you can access his web site, www.wilsondotnet.com, or send an email to paul@wilsondotnet.com.</p> <p>This article was originally published in ASP.NETPRO MAGAZINE JP 2003. Publisters authorized remarks.</p> <p>Transfer to the original English page</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-12824.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="12824" 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.058</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 = 'RmRmFaCb0dcQNf78wvIlugbTRvKH2hUnIC85pHjKXIibYaZZarT0kssgxOH0hFWzOTsRyh7Ha0i2ZMKHgBw3wg_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>