Preface:
For a project, we may use a combination of many master pages and content pages. when we use multiple master pages, we may encounter such problems. load the same JS and CSS content in different master pages.
If the position of a JS or CSS file in the project changes, we need to modify the JS and CSS link of multiple master pages.
In this regard, we may be able to use the form of nested master pages, so that we try to change only one link, so that JS or CSS of all pages can be updated.
The following is an example.
Example:
In this example, we have the following content:
1. A main. Master page. on this page, there is a button with ID btn_main and a div
2. A sub1.master page. on this page, there is a button with ID btn_sub1 and a div
3. A webform1.aspx content page with a button and a div ID btn_page
4. A 1. js file. The JS file contains a myalert () function.
5.a. CSS file with. myback styles
The document structure is as follows:
Example:
1. How to reference common JS and CSS files through main. Master
2. How to access the button of Main. Master and the button of sub1.master through the webform1.aspx page
Example:
Main. MasterCode:
<% @ Master language =" C # "Autoeventwireup =" True "Codebehind =" Main. master. CS "Inherits =" Webmastertest. masterpages. Main "%> <! Doctype HTML public" -// W3C // dtd xhtml 1.0 transitional // en "" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <HTML xmlns =" Http://www.w3.org/1999/xhtml "> <Head runat =" Server "> <Title> </title> <link href =" ../CSS/1.css "Rel =" Stylesheet "Type ="Text/CSS "/> <SCRIPT src =" <% = Request. applicationpath %>/scripts/1.js "Type =" Text/JavaScript "> </SCRIPT> <asp: contentplaceholder id =" Head "Runat =" Server "> </ASP: contentplaceholder> Form1 "Runat =" Server "> <Div> <asp: button id =" Btn_main "Runat =" Server "Text =" I am a button on the master page "Onclientclick =" myalert (' I am a button on the master page '); "/>
<Div Class = 'Myback'> main template page </div>
<Asp: contentplaceholder id =" Contentplaceholder1 "Runat =" Server ">
</ASP: contentplaceholder>
</Div>
</Form>
</Body>
</Html>
Note:
1.css file path is relative to the master page.
2. The JS file path is equivalent to the content page. At this time, we use the absolute path method to reference the JS file. What we use is<% = Request. applicationpath %>/to obtain the path.
Note: No space is allowed between applicationpath and %>.
Sub1.master code
<% @ Master language =" C # "Masterpagefile =" ~ /Masterpages/Main. Master "Autoeventwireup =" True "Codebehind =" Sub1.master. CS "Inherits =" Webmastertest. masterpages. sub1 "%> <Asp: Content ID =" Content1 "Contentplaceholderid =" Head "Runat =" Server "> <Asp: contentplaceholder id =" Head "Runat =" Server "> </ASP: contentplaceholder> </ASP: content> <asp: Content ID =" Content2 "Contentplaceholderid =" Contentplaceholder1 "Runat =" Server "> <Asp: button id =" Btn_sub "Runat =" Server "Text =" Button on my mother's page "Onclientclick =" myalert (' Button on my mother's page '); "/> <Div Class = 'Myback'> subtemplate page </div> <asp: contentplaceholder id =" Contentplaceholder11 "Runat =" Server "> </ASP: contentplaceholder> <asp: contentplaceholder id =" Contentplaceholder12 "Runat =" Server "> </ASP: contentplaceholder> </ASP: content>
Webform1.aspx Content Page code:
<% @ Page title =""Language ="C #"Masterpagefile ="~ /Masterpages/sub1.master"Autoeventwireup ="True"Codebehind =" Webform1.aspx. CS "Inherits =" Webmastertest. pages. webform1 "%> <Asp: Content ID =" Content1 "Contentplaceholderid =" Head "Runat =" Server "> </ASP: content> <asp: Content ID =" Content2 "Contentplaceholderid =" Contentplaceholder11 "Runat ="Server "> </ASP: content> <asp: Content ID =" Content3 "Contentplaceholderid =" Contentplaceholder12 "Runat =" Server "> <Asp: button id =" Btn_page "Runat =" Server "Text =" This is the button on the Content Page. "Onclientclick =" myalert (' I am a button on the Content Page '); "/> <Div Class = 'Myback'> content page </div> "Height ="120 "Src =" ../CSS/images/growth history .jpg "Width =" 120 "/> </ASP: content>
At this time, if the file path of JS or CSS changes, we only need to change main. the link path on the master page. at the same time. we also placed the contentplaceholder element with the ID of head on the sub1.master page. In this way, you can add the required JS file or function on the webform1.aspx page.
We can see that in the DIV on these three pages, we can all reference the CSS class whose class is myback.
So how can we access the buttons in the main. Master and sub1.master pages on the webform1.aspx page? In webform1.aspx. CS, the Code is as follows:
Protected VoidPage_load (ObjectSender, eventargs e ){// Obtain main. MasterVaR mainmaster = page. Master. MasterAsMasterpage;// Obtain the button on the main. Master pageVaR btnmaster = mainmaster. findcontrol ("Btn_main")AsButton;// Obtain the button on the sub1.master page// This is special. You cannot use page. master. findcontrol ("btn_sub ")// Obtain the button on the child mother page in the following wayVaR btnsub = mainmaster. findcontrol ("Contentplaceholder1"). Findcontrol ("Btn_sub")AsButton ;}
in this way, we can access the content of the master page on the Content Page.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
