Author: Fritz Onion related technologies: templates, ASP.NET, Master Pages Difficulty: ★★★ ☆☆ types of readers: ASP.NET Developers
[Guide] This article first introduces the implementation of "template" under traditional web development, including the implementation of ASP and ASP.NET 1.x, and then introduces the implementation of ASP.NET 2.0 on Templates - Master Pages, last Explain the principle of implementation of the master page.
For many years, Web developers have been working hard to "template" their site through a variety of technologies, but there is no one certified technique that can maintain the true generality of standardized appearance throughout the site. The master page is one of the most anticipated features in ASP.NET 2.0, and eventually provides a method based on template design page based on the application.
Template design
Defining a standard appearance of all pages in Web site design is pleasing. This may include public headers, footers, and menus that provide a set of core functions and appearances throughout the site. For dynamic sites generated by techniques such as ASP or ASP.NET, if they integrate these common functions on all pages, it will be useful for some type of page template, which allows all pages to contain their own unique Content, and provide a central location in sites and behavior in terms of appearance and behavior. See Figure 1 for a simple and specific example of the site that can benefit from some type of page template technology.
Figure 1 Simple template site
The specific page has a header on the top, with a footer at the bottom, has a navigation bar on the left, and has a region that is filled with the remaining space for the page special content. Ideally, the header, footer and navigation bar should only need to define once and apply in some way to all pages in the site.
This is exactly the problem that the master page in ASP.NET 2.0 can be easily solved. By defining a master page, and then create a lot of content pages according to it, you can create a site with a single template (master page) to create a site. However, before I explore the details of the masterpiece, I understand how the developers will generate a template site in ASP and ASP.NET 1.x.
Generate templates in traditional ASP
Many sites generated by ASP 3.0 use the concept of templates - typically use the server-side include (SSI) instruction. The SSI directive provides the ability to insert file content in a specific location within the ASP page. A general technique is to use SSI instructions to introduce common elements, such as footer, header, and navigation bar. Figure 2 demonstrates this approach.
Figure 2 The server side in the ASP contains instructions
Although the technology takes a step in the correct direction, it still means that each page is in addition to generating all page content, but also generates surrounding layout elements and overall structures. Another more template feature of many sites is: Specify two universal include files (such as pagestart.asp and pagend.asp), and make these two files not only contain universal navigation bar, headers and pages The feet include the surrounding layout elements and overall page structures. All elements you have added to each page are its unique content.
This method provides many developers needed in centralized templates of the entire site; but it also has several disadvantages. First, the designer for editing a file containing the SSI directive is not supported, so the designer must implement the merged presentation effect to view the full page appearance, just later need to be resembled. Second, the included mechanism is too simple because it is just inserting the contents of a file into another file before the ASP analysis program performs server-side calculations. This means that it is easy to make mistakes when matching the HTML element end tag and correctly selecting the location to avoid errors. At the same time, it is difficult to customize some parts of the included file. In the ASP "Technique2" example downloadable from the MSDN Magazine Web site, you can notice that a defect that you can notice is that the title of each page is intentionally reserved empty. This happens is that the title is only specified in the top-level page_start containing files, and there is nothing ingenious to let the page containing the template specify the content that appears in the title element. Finally, using the included file requires system overhead because they add the total size of the ASP scripting engine cache. Based on the above-mentioned server-side, a simple method containing instructions, the real-general templating mechanism should have the following five functions in mind:
Has a function that enables developers to create independent definitions, and can be reused in multiple pages to be able to define the "shell" page for other pages as a template to change the inheritance template page. Elements, such as changing the title element, can specify the standby page template in the page to declare the standby page template to actually view the presentation version of the page with the page associated
The server-side containing files are used for ASP 3.0 to meet the first conditions described above, and can give some degrees to satisfy the second condition, but the last three functions cannot be provided.
Generate template sites in ASP.NET 1.x
ASP.NET introduces a new, object-based programming model, which is likely to provide an updated, more elegant template mechanism. ASP.NET provides you with a server-side representation of each page by rendering to the complete hierarchical object model of the client element, without having to rely on the relatively low SSI mechanism in ASP 3.0. The function that is properly reflecting the functionality of the SSI file is the user control. User controls provide a declarative approach to create custom controls that can insert their contents and behaviors into any location of other pages, so use these controls as a general method of the reusable part of the definition page is very simple, as shown in Figure 3 Indicated.
Figure 3 can be reused page part of the user control
In addition to acting as simple content placeholders, user controls can disclose complete controls for attributes, methods, and event functions. Unlike the server side containing instructions, you can assign user controls that can affect its features rendered on the page. For example, you can create an attribute on the header control called showbreadcrumbs so that you can selectively open or close the crush function as needed.
However, the user control reuse model has some limitations and disadvantages. First, many developers have discovered that there must be a register directive to each page will be added to each page of the user control, so it is very troublesome. Ironically, many ASP.NET developers have turned to use SSI instructions to import Register instructions into all of them so that only one SSI directive replace multiple code rows. However, more importantly, without any built-in way can use user controls to meet any of the five conditions listed above (except for the first condition because you can create Reusable page part).
ASP.NET has indeed a more rich object model, and many people have established their own template mechanism to overcome the shortcomings of lack of native template mechanisms in ASP.NET 1.x. With a little creative and some smart codes, you can generate a common template mechanism. Most implementations rely on the following facts: You have the opportunity to manipulate the control hierarchy before the control hierarchy of the Page class is sent back to the client. For example, a technique is to create a common, derived from the base class (the base class), the generated control in the generated page hierarchy), dynamically load the user control of the page template, and then insert the extracted control Known location in the user control hierarchy. The complete implementation of this technology is included in the code download information of this article. With this similar technique, it can be very close to all five conditions needed to achieve a real useful template mechanism. Has a user control for defining a reusable page portion. With a page template mechanism, through this mechanism, a single template can be defined and applied to any number of pages in the system. Use this technology to define the "replaceable" element in the template and can specify the standby template for each page. One of the missing features is designer integration - if there is no Visual Studio .NET to help with this template technology, it is really impossible to implement this feature. Another disadvantage with this similar custom template technology is that no built-in components of this technique are supported in the .NET Framework in the .NET FRAMEWORK. This means that the template mechanisms used in each site may be completely different.
Although ASP.NET provides you with extremely flexible and more powerful programming models, it still does not have a built-in mechanism for templating sites. In particular, although certain developers have generated template mechanisms by subtly using control hierarchical replacement and user controls, they still need to complete additional configuration steps, and more importantly, they do not have designer support. At this time, let us walk into the master page in ASP.NET 2.0
Master page
ASP.NET 2.0 The advent of the masterpiece page represents Microsoft provides the first template mechanism that satisfies all the conditions outlined in front. They provide a page template for site level, a mechanism for performing fine granular content replacement, which template should be programmed and declared control, perhaps the most striking thing that they provide integrated designer stand by. From a technical point of view, the implementation of the master page is very similar to the implementation of the self-defined template mechanism I have described, but adds designer support from Visual Studio 2005, and it is now recognized. And supported by visual inheritance to build template sites, which makes you eventually have a complete template solution. ASP.NET 2.0 Memare page implementation contains two conceptual elements: masterpiece and content pages. The master page acts as a template for the content page, and the content page provides the content to fill the part of the "Filling" in the master page. The master page is essentially a standard ASP.NET page, which is different in that it uses the extension. Master and instructions (rather than use). The master page file acts as a template for other pages, so it usually contains top HTML elements, main forms, headers, footers, and more. In the master page, you can add an instance of adding the ContentPlaceHolder control at the hope that the page-specific content is available, as shown in Figure 4.
<% @ Master Language = "C #"%>
<ask: contentPlaceHolder runat = "server" id = "_ title"> standard title < / asp: contentPlaceHolder> </ title> </ head> <body> <form runat = "server"> <h2> common header </ h2> <ask: contentPlaceHolder runat = "server" id = "_ maincontent" /> < H2> Common Footer </ H2> </ form> </ body> </ html> Figure 4 Add a placeholder instance</p>
<p>Instead, the content page is just a normal .aspx file that specifies the associated masterpiece in its page instruction using the masterpagefile property. These pages must contain only examples of Content controls because their unique use is to provide content for the transferred master page template. Each Content control must be mapped to a particular ContentPlaceHolder control defined in the parent page referenced (the contents of the control will be inserted into the placeholder to the master page when rendered). The following content page provides content to the SiteETemplate.Master master page shown in Figure 4:</p>
<p><! - file: default.aspx -> <% @ page languagefile = "siteTemplate.master"%> <asp: content constplaceholderid = "_ title" runat = "server"> Main page </ asp : Content> <ask: Content ContentPlaceHolderid = "_ maincontent" runat = "server"> this is the content for the default page. </ asp: content></p>
<p>Note that through this mechanism, you can specify the content you want to place in a very specific location in the Mother Page Template. The example of just shown explains how to provide a subtle problem that generates a unique page title with a template to generate a unique page title by providing a ContentPlaceHolder control in the title element in the master page and provides a corresponding Content Control with a matching ContentPlaceHolderID. This example also clarizes how the master page provides default content for placeholders, so if the content page determines whether the Content control is not provided for a particular placeholder, it will have the default presentation effect.</p>
<p>Figure 5 Using the master page in ASP.NET to present page</p>
<p>After the basic structure of the master page, now I can re-examine the template examples I generated in front. Recall it, this example uses reusable page content elements (user controls in ASP.NET) to define headers, navigation bars, and footers. The template page uses these elements to place the page, and the content page provides internal content for the page. Figure 5 shows the exemplary effect of this example using the master page and the content page. Figure 6 Design support for master page</p>
<p>More eye-catching facts is that the master page can be supported by the designer in Visual Studio 2005, so when you edit the content page in a visual manner, it will display the contents of the master page inherited with gray, thus Make your final presence effect on the page. Figure 6 shows the appearance of a continuation example of using the master page in the content page that is part of my master page.</p>
<p>Implementation details</p>
<p>As mentioned earlier, the implementation of the master page and the content page is very similar to many developers to generate their own custom templanmatism mechanisms in ASP.NET 1.x. In particular, the MASTERPAGE class is derived from userControl, thus inheriting the same general-purpose container feature provided by the user control. Similar to the custom implementation of me in the previous example, the template defined by the master page is inserted into the control hierarchy generated for the requested page. This insertion operation just happens before the INIT event of the Page class so that all controls can be ready before INIT (at this time, the control is usually programmed).</p>
<p>The control hierarchy of the control hierarchy and the control hierarchy of the page performs the actual merged method similar to me. The top control of the master page (this control will be the same name as the file containing the master page) will insert as a root control into a new page hierarchy. Then, insert the content of each Content control in the page into the corresponding ContentPlaceHolder control below. Figure 7 shows an example content page with the Official Parent page, and the obtained consolidated control hierarchy (it is created before the page processing). Note that use different color tagged dependence, which indicates the origin of each control in the hierarchy.</p>
<p>Figure 7 Masterpage and Content Page Mix Level</p>
<p>One of the implementations is that the master page itself is just another control in the page class hierarchy, and you can perform any tasks you are accustomed to the controls on the master page directly. The current master page associated with any given page can always be used by the Master property accessor. As an example of interacting with the master page, you can add a code inside the default.aspx page shown in Figure 7 to access HTMLFORM added by the master page implicitly by programming, as shown in the following code snippet:</p>
<p>Void Page_Load (Object Sender, Eventargs E) {HTMLFORM F = (HTMLFORM) Master.FindControl ("_ theform"); if (f! = null) {// USE f Here ...}}</p>
<p>In addition to accessing the master page, you can change the master page dependence of the content page at runtime. The masterpagefile property is disclosed as public attributes on the Page class and can be modified inside any page code. Any modifications to this property must take effect in the handler of the new Preinit event in the Page class, because the creation of the master page and the merge with the master page will occur before the initial incident. You can rewrite the following onpreinit method to any Page class using the master page to change the master page dependency by programming:</p>
<p>Protected Override Void OnPreinit (Eventargs E) {this.masterpagefile = "OtherTemplate.Master"; base.onpreinit (e);}</p>
<p>Detailed usage</p>
<p>When you start using the master page in the site design, if you never use the extensive station level template mechanism, you may have some problems that have not occurred before. The first problem is related to the relative paths in the reference resource (such as image or style sheet). When you create a master page, be sure to remember: When calculating the relative path, the directory as the starting position is likely to change based on the accessed page. Consider the directory structure of the site shown in Figure 8. Figure 8 Site directory structure</p>
<p>If you want to add a reference to the check.gif image in the image.gif image from the masterpages directory, you may tend to add a simple image element as follows:</p>
<p><Pre class = "clscode"> <img src = "../ images / check.gif" /></p>
<p>Unfortunately, this approach is only valid when the relative directory location is similar to the location where the image is located as the image of the master page (such as page1.aspx). Any other page (such as default.aspx) cannot correctly parse the relative path. One solution to this problem is to use the root path reference syntax in the ASP.NET and ensure that all relatively references are made from the server-side control (this is the unique location that can take effect). The image reference I mentioned earlier will become:</p>
<p><img src = "../ images / check.gif" /></p>
<p>Another option is dependent on the fact that the relative path reference in the server-side control is calculated relative to the master pages they are placed. This means that the image reference can be changed to the following form:</p>
<p><img src = "~ / images / check.gif" runat = "server" /></p>
<p>The server-side path reference in the page of the master page is still relative to the page itself, so you don't have to change any techniques that may be ready to process relative references in the page.</p>
<p>Another common request filed by ASP.NET developers in the first encounter is: they want to be able to request all pages in the application to reference the content page of the specified page. Although there is no such "must-use" attribute, you can specify a master page that uses all pages for the application by default by specifying a generic page to the web.config file. As shown in the following code segment:</p>
<p><! - file: web.config -> <configuration> <pages masterpagefile = "~ / siteteMplate.master" /> </ configuration></p>
<p>Like any settings specified by the application level, a single page can select override the default masterpagefile property, but if you add this statement to your configuration file, you can guarantee that you will not accidentally have any close-up masterpiends. The page is added to your application.</p>
<p>Finally, you may find that it will be useful to have a "yuan" master page (ie, a master page of a group of master pages) will be useful. The master page supports any depth nested, so you can create a master page that you think is any level of the application's meaningfulness. Just like a page with a master page, the master page with a master page must contain only the ContentPlaceHolder control in the top level. Inside these ContentPlaceHolder controls, the master page can add another ContentPlaceHolder control for use in the actual page. Note that the page that references the master page with the mother page can only provide content elements for the ContentPlaceHolder control on the Parent Parent page. There is no way to fill the placeholders directly on the second or more levels of the specific page. As an example, look at the master page definition shown in Figure 9. MetateMplate.Master. <% @ Master%> <html> <head> <title> <asp: contentPlaceHolder runat = "server" id = "_ title"> standard title </ ask: contentPlaceHolder> </ title> </ head> <body> < Form id = "_ theform" runat = "server"> <h2> header </ h2> <ask: contentPlaceHolder runat = "server" id = "_ maincontent" /> <h2> Footer </ h2> </ form> </ Body> </ html></p>
<p>Figure 9 Master page definition</p>
<p>Now, you can define another master page, let it specify the master page as its master page, and provide content elements for each ContentPlaceHolder control in the parent master page (SiteTemplate.Master), as shown in Figure 10 Indicated.</p>
<p><% @ Master masterpagefile = "~ / metatemplate.master"%> <asp: content runat = "server" contentplaceholderid = "_ titleContent"> <asp: contentplaceholder runat = "server" id = "_ title"> Default title </ asp : ContentPlaceHolder> </ askP: Content> <asp: content runat = "server" contentPlaceholderid = "_ maincontent"> <table> <tr> <td> <asp: contentPlaceHolder ID = "_ leftcontent" runat = "server" /> < / TD> <TD> <asp: contentholder ID = "_ rightcontent" runat = "server" /> </ td> </ tr> </ table> </ asp: content> Figure 10 Defining a master page</p>
<p>Please note that in order to grant the page to the parent master page access, I must declare a Content control and nested a new ContentPlaceHolder control to grant pages in the parent master page. Access to this location.</p>
<p>summary</p>
<p>In the ASP.NET 2.0, the master page (people expected a long time template feature) represents a new era, the web developer will be able to create a Web site more easily. Developers will no longer have to ask for a hierarchical manipulation technique that is complex in the ASP or ASP.NET. Now, create all other web pages as the foundation page template is as easy as designed to design any other normal type of web page. I have dare to fight you can't wait to act immediately.</p>
<p>About the author: Fritz Onion is a separate consultant, author and training lecturer that specializes in research ASP.NET. He has a book with Essential ASP.NET (Addison Wesley, 2003) and is working on the second edition of ASP.NET 2.0. He prepared and taught the course for developor, and also speaking on industry conferences.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-47370.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="47370" 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.032</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 = 'HRpCTGjIZ7o5AEWRzk9e43QBo8KqsOuRk3z8DTx8fbQgedrcCHjpZczM6Zw2iM15o85gNj6kBp6kWtXf';
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>
