User interface and master pages

A hallmark of modern websites is certainly the attention to detail and ease of use of the various pages that compose them. For example, the most popular sites are based on patterns of color and character sets are identical in every page and also provide simple and intuitive means of navigating through the pages themselves. The rest will happen a little bit for everyone to access to sites with pages all different and difficult to use, here is this is what we must avoid for our sites.

The solution to give the pages a common look and feel of a site is to create a primary class from which all the pages derive. Because ASP.NET is based on a model focused on the Page class just to implement a primary page (Page Primary) whose properties will be inherited from the pages of our site

All pages. Aspx page derived from the primary which in turn derives from System.Web.UI.Page. The primary page deals with the loading of the common elements between pages and every single page handles the rest.

The tools provided by ASP.NET to create this type of structure is the so-called Master Page. These pages are very similar to a typical page of a site and are defined in files with extension. Master.

A master page is used as a template and then when a user navigates to a page that depends on a master page requests and responses are filtered by the latter. ASP.NET master page and then combines the content page (. Aspx) in a single class. When the content page is requested inserting the master page in the file. Aspx form of a control that is added to the collection of controls on the page.

Let us now see how to define and use a master page. We start Visual Studio and create a new project of type Empty Web Site. Add a new element of type Master Page in our project

The page-level view is similar to normal web forms seen in previous lessons and the code generated by Visual Studio is the following

Let me note that was added to the ContentPlaceHolder control which will be discussed later. For the rest of the master page can be customized at will as a normal page on our site.

For example, let's change the body tag by setting a background color (background) other than

the master page now has a gray background (# bbbbbb).

Let's add a new element to our project a web form (call it Default.aspx), checking the bottom of the Add New Item dialog boxes the Select master page

Click OK vein we presented another dialog box in which we can select the master page for the page you're adding to the project (in our case there will be only one)

If we look in the Design tab to the Default.aspx page we will see that it has the same background color for the master page and this shows that the page inherits the template settings.

This is the code generated by Visual Studio to the Default.aspx page

in it we see the page reference MasterPage.master.

At this point we can create all the pages you want (each with custom content) and we attach to our master page. If then we are going to change the contents of the master page will be updated in one step all the pages that depend on it.

Clearly what is presented as a simple but suggests the potential of these tools, especially in sites with complex graphics.

• <<Previous Lesson
• Help Index
• Next Lesson>>