Video: How Do I: Work with Master Pages Declaratively and Programmatically in ASP.NET

In this video Chris Pels will show several aspects of defining and using master pages in an ASP.NET web site. First, see how to create master pages declaratively using the ASP.NET master page model and learn what information is best suited to a master page compared to an individual content page. Next, see how to programmatically assign master pages on-the-fly in an individual content page. Also learn how to create a base page class which assigns a master page programmatically for all pages that inherit from the base class. In addition, see how to set the master page in the web.config file. Lastly, see how to access elements in a master page from an individual content page including some best practices for structuring access to master page elements.

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video


Minute 0

Of whole skills so you will learn how to work with Master pages in ASP net website lets get started by creating a simple website now many of you are probably familiar with the concept of the Master page because it s something that I m sure many of us who developed websites have encountered from one time twin other until Visual Studio 2005 to really wasn t a systematic way to approach this in ASP net or at least he had to roll your own when created what so just went to assess to what the concept of a master page is and how we can use it let s go over to the ASP net website and look at the layout of this page and many

Minute 1

Any times you have a website similar to this where you have the header area at the top where you have your navigation in a various types of content inside the page and every time you move to a different section of the website you would want the header area with navigation to remain constant you might also have a footer area down the bottom such as we see here and you would also want that to be constant from one page of the website to the next no prior to the Master pages in ASP net who had to figure out a way to do this either on your own where you would have created what is essentially a Master page Roche would have to include the header and footer HTML content in every webpage that you created that becomes problematic because obviously then that s like repetitive code in that every time you want to make a change at the code each

Minute 2

Individual pages and make that change so Master pages and addresses this issue Back to ASP net and Master pages are essentially nested HTML pages and by that I mean you create a Master page and then every time you create an individual page you refer to the Master page and say yes I want my individual page to be based on the master page and then in essence your individual page is nested inside of the Master page and that gives you a consistent look to all your pages in that they all have whatever content you put on a Master page where to start by creating what s called a Master page file for our website like what the website and add a new item and notice here the list templates is one called Master page that sought to use for treating the

Minute 3

Shoes and Murdoch called this default master adds it to the website and noticed that it has a dive master extension and the reason I call the default master that s by no means requirement have been named master within the page name but that helps me avoid conflicts with pages called just default a call to fault master does the little nuance that I ve learned over the time of using Master pages took a semester page here looks very similar to a traditional default ASP X page with a few differences there is an added master directive rather than an act page directive and then there s a server side control called content placeholder and content placeholder essentially represents the location in the Master page where any content

Minute 4

From the individual ASP X page is placed in what I can do is create an individual page here and not that utilizes this default master page and doubt become a little more clear and never to come back and fleshed out the layout of this master page splits can create a new webpage and I m a call this webpage of furniture with Sabre creating a online store type website and would have pages represent the different categories of things we sell and want to go to create this page to notice is a checkbox select master page will check that here s a list of our Master pages in the website kernel really have one default masterful take that notice this furniture page looks pretty different than the regular default ASP

Minute 5

Page there s a lot more elements here in the default ASP experts in our furniture all we have is what s called a content element or control that represents a link back to the content placeholder on the master page notice here we have an attribute called content placeholder IDE and that s content placeholder one back to the Master page received that is the relationship to this content placeholder here on the master page and then hearing content one whatever we put inside of this is essentially any regular HTML or ASP net server control that would put on a typical ASP page so let s just put our furniture here has any these attacks that allow us to see that we are indeed on this page

Minute 6

And now let s go back overtly to say that we ll go back over to the master page no master page by default here just has this content placeholder so it really doesn t look anything like our ASP net page of a cell with a header and footer so let s go ahead and put some additional elements here in the master page and add another dude here which we can call header and a medical one down here below the content area and will put the text footer in there for the moment Elijah said a little bit of in line style here so this will or wouldn t do here is routed to say how a height of 40 pixels and will save background and it will make this a yellow De Soto stand out a little bit only look at it and on the

Minute 7

Be that style mountaineer put it in the footer gave and what we ll do down here is will just put blue is the color so now was starting to have a Master page looks a little bit like ASP net and the censors got a header followed by a content area and the footer on the bottom else back to our furniture paid for a moment and we still only have the text furniture here but let s go into the design mode on our furniture page and now organizing for the first time is the impact of using a Master page Sybil was here visually is the merged of the individual furniture page with the Master page at the header area to top the footer area at the bottom and then here in the middle is our content area and noticed that it

Minute 8

Is an area where we have the design surface just like we would have the full page design service in a regular default aspx page that does not tied to a Master page however we can only so called idiot or a content in our furniture page within the content area are essentially that s representing what s inside the content control so if I were to take something like a button and drag and drop it onto the design surface of the furniture page and we go back to the source It that button is being edited here inside of the content server tag in our furniture page on it as a line break in their now what makes this furniture page tied to the master page is the master page file attribute up

Minute 9

During the page directive and notice that Paul points to the default master page and we created up in the root of the website so essentially when you tie in the GUI designer when he reentered the new item added a web form and selected the Master page although that s doing is putting this master page directive and then including an ASP content control by default so we can do that manually as just as easily summer take this master page attribute that we have here when a gorgeous default SPX and I m in a paste that into default SPX and what we need now is to remove some of this extra HTML element is afterward were getting an era here already so that world to his scientists cannot take all this HTML and get rid of it

Minute 10

And go back over to the furniture page and I m going to take a content control would have put it in here and then we ll just close set out to now are default page is identical to her furniture in that it s using our default master page with the design mode here on the default and you can use it with a safe welcome to the shopping site and that s being added here inside of our content tag on the default page so seen how do creed or associated in any individual page with a master paid using a GUI wizard declaratively here with a Master page file attribute you can also do it programmatically lets go do that you can add another page to the site web form and Islam Burkett were going to call household

Minute 11

For household goods and I m not going to select a Master page went back to our site and we want to end up with is a has a large as they tied to a Master page plummeted do is just get rid of all the HTML inside the page and believed leave the page directive and now we want to go over into the code behind here the code behind page what we can do is programmatically assign a Master page so it went as a defense

Minute 12

I ll add you that we saw in the declarative syntax of the SPX page so many to do it is here we would just put the default master master and that will attach that master page to the individual household page slots go back over the SPX and to put some content in there and women do is copy will we had in the furniture page and put a content tag in here and what does that change furniture and household and now if we go to view this page will will see is that this will have all of the contents of the Master page just like we saw with the other pages and there s a few nuances here notice that I did not assign a master page declared Tivoli here and what that does is it prevents us from going into the design mode

Minute 13

And seeing the representation of the Master page in practicing in an era creating the content control hot because it needs to be in the context of a master page so we could go in here and go to the Master page file at the root and in their pick the default master and then if we go to the design mode we would see the contents of the Master page merged with our individual page so where this is is more useful this programmatic approach is when you have a safe standard Master page and then you may have a situation where you want to apply a different master page when the page is being loaded so you can externalize that to the web config file or you could he bring them in from information database and other situations like that but if

Minute 14

Emulated the little nuances are limitations in terms of going at in design mode that you need to have a Master page file here in the declarative syntax and if you need to set the Master page programmatically across multiple pages on your site or effect may want to do it in a number the pages another approach to this is to actually subclass the net page class and set the default page in narrative must say the Master page in their the way we do that is we would have a class to her website and let s call it a site page at an app code folder and we need to inherit from the page class lets at an import statement and Web UI and then we need to inherit from the page class

Minute 15

Then within this new class we need to go in and create embedded and if its members are sitting in a sign the Master page programmatically has to be an opinionated event or earlier in the page rendering cycle and hear what we might do is very similar to what we had before and we could lead this value from a database Web config file or other location and that s what we would likely be doing here because we would want to set it based upon the current situation barometer do is just hardcoded in here and then you can flush out on your own how you might want to read the Master page file from a different location soldiers in the default master and that will set the Master page file smell in order to use the site page class list at another page to her website and call this one tool

Minute 16

And one didn t do so I get there that do we support them and then the light is that I m going to select the Master page and it will just take the default master this as our page however I m going to into the code behind and instead of hat and hurting from system Web UI page will get into is within inherit from the site page class that we created this is automatically going to a sign that Master page and we do have a Master page file directive here so that when we see it in a design mode we get our header and footer and what we want to do however is let s create a second master page and use that one is

Minute 17

Original assigned programmatically at our site page class a battle flush out the concept little bit more for you this also shows us that we can have multiple master pages within our website project was that a new item Master page in one uses that I found for an additional Master pages used to have one master page that has my navigation another so called standalone and what this does is it is made look very similar to the default master but it doesn t have the navigation for examples on the order to my default master and just take what we have here as far as it did go back over to the standalone master pays things in and in this one I m deleted as his government would back to the default master and were within it do in this one

Minute 18

Is now and we see we ve added a menu so will he go back over to the standalone wanted to do is take that many of them out of there so this would be a non navigational page and then I m going to go over here and instead of default master in the site behind class I m had the standalone so now even though we have the Master page in tools right here as the default master with the navigation will only run this page we should actually see that it is using the standalone ouster before you do that let me just put the word tools inside our content control so we can tell were on this page to now will view tools in the browser and will we see is our header and footer but no menu so it is using

Minute 19

Standalone Master page and just to assure you that s true let s go back to furniture which uses the default master and do that and here in that furniture page and we get the navigational menu now witnessing the Master page file using several different methods in each individual page either with the vast page file attribute are with this new site page class and there is another way they can do it if you know that you can use the same master page file across all your pages in your site you can set it in the web config in fact is that even the majority of pages are using the same master page if you do that and then you could override it on those individual pages or you want to use a different master page the way we do that in the web config that stunningly pages element and you can see that there is a Master page file attribute of the pages

Minute 20

Only and only need to do is use fill in information here just like you did in this attribute in the page directive on an individual basis of a disco default master master and doubtless saw in the default master page as the master for all of the pages on our website and I m going to take that out here because we can continue to use the individual Simon of master pages so let me just close this out now I liked the little time on is the issue of communication between a content page which is your individual page such as furniture aspx and its corresponding master page default master and what s going to default master and I ll show you what we might want to do he and his page is formatted and would like to do in this page is for some of the

Minute 21

Menu and it s so addictive and we cannot leave the header tags as it is for Molyneux in at another give an insight as to because this is a shopping site we like a list of hot products for just that detects hot products in here and the issue is that this list of hot products which is in our master page we would like it to be different for each one of our content pages so for example war on furniture aspx we like to display a list of the hot furniture products up in the header area of our masturbation many documentation between the Master page in the content page so how would we do that although they go into this Dave and I can make it a server side control by putting a run at equal server and amusing addition this example you could beat any ASP net control that you have in your

Minute 22

Header file war anywhere else in the Master page having to this ID who don t call this a hot products contact us and now we have this dude inside of our Master page who want to access it from a content page so let s go down into furniture and inside the code behind for the furniture of content page lets go into the load event for the page and in the load event is where we want to dynamically change what s inside that tiff on the master page so how do we do that well as a couple ways that we could do that and the first one is this so lets to mention a new tribal animal coaches call this a hot products and will to mention this as a system Web

Minute 23

UI HTML controls guide html generic control and this is could be our artist injected control to the master page and organist at that equal to in the page object Thursday in master page property and this represents the master page so the end and on the master page renews fine control and controller want to look for is the hot products content to no hot products variable represents the gift on the master page and we could just go to hot products inner HTML and inside here we can put any HTML that we would like and let s just put the furniture hot product

Minute 24

And then represents so I was getting a list of the database wherever and of the hot furnishing products and displaying data inside of the diff tool view the first page in the browser and indeed we see that the French hot products text is being inserted into the header of the Master page so that s working the way that we want to just assure you that that should let me comment out fresh hot products they and minorities summoned that Texas is the page again and we ll see this time it just has hot products on comment this of this approach works good it does require us to know the actual name of the give ID in the Master page when we re finding that control and well it works its

Minute 25

Believe not the best approach because if we need to change the name of that gave on the master page then we have this intimate relationship with all of the content pages that might access that do so a better way to approach this ID to expose the contents of that do has a property of the Master page in a status similar to having no exposing a the actual variable in when your classes as compared to exposing the contents of that variable through a property in your class muscle back over to default master am going to go into the code behind Faulk Master and let s enter property here so public property and calls is a hot

Minute 26

Products and content as it is framed and what we want to get here it is in the hot products content did so will say I you wouldn t have a problem like to see is a mechanical top products content for sets the name of fictive so when they go over into the master page and underwear is it right here and we ll just call this container and will solve the problems will go back into the code behind and will call is hot products content container inner HTML so that s going to return the contents of it and

Minute 27

Could do a very similar thing you forgot to return and I go through to get out here and say this is a hot products content container and we can assign the value inbound value to that end we just need to put the inner HTML there as well and it now looks good to know if encapsulating your duty and is public property on our master page and we want to access that down on our furniture page 1 order to do that we need to do what s called strongly typing and master page we need to go into the SPX and we need to add a directive that called Master type and Master type needs to point to the page the master page that is some are pointing to default master is

Minute 28

Star Master page that contains our hot products content property so now with the Master type attribute in our furniture page now to go back to the code behind for furniture and let me just comment out this first approach that we did and only to hear in a sample source code for you if you want to see that approach and now we go to the Master page object here in the code behind the sea that we have direct access to that public property hot products content and we could assign and new hot products who products for furniture to that now only view the page you should see this text in our master page or should I say in the messed up

Minute 29

Each area of the furniture page lets you furniture his jacks and indeed here we see the tax in our header area of the Master page while reviewing the furniture ASP next page is probably a better approach in that it s kind of abstracting away in ashes abstracting away in the Master page to a public property to look at a number of different aspects of master pages of both how to create them and how to use them within individual pages I think the next step for you is to download the sample code that comes with this video look at it in and plan out how you would like to use Master pages in your website and an use some of the sample code as a basis for implementing your particular approach this is Chris tells thanks for watch this video and using Master pages in ASP net

Minute 30

Of rule

Click here to go to original video page