Creating a Site- Wide Layout Using Master Pages (C#)Download Code or Download PDFThis tutorial will show master page basics. Namely, what are master pages, how does one create a master page, what are content place holders, how does one create an ASP. NET page that uses a master page, how modifying the master page is automatically reflected in its associated content pages, and so on. At the time of this writing, every page. As Figure 1 shows, the very. Microsoft Communities. Beneath. that is the site logo, the list of languages into which the site has been translated. Home, Get Started, Learn, Downloads, and so forth. Likewise. the bottom of the page includes information about advertising on www. Figure 1 shows the www. March 2. 00. 8, but between. Perhaps. the menu items along the top will expand to include a new section for the MVC framework. Applying such changes to the entire site should be a fast and simple process. In a nutshell, a master page is a special type of ASP. NET page that. defines the markup that is common among all content pages as well as regions. Each tutorial is. C# and Visual Basic versions and includes a download of the complete. We discuss how. master pages work, look at creating a master page and associated content pages using. Visual Web Developer, and see how changes to a master page are immediately reflected. Joomla 3 Template Design. However, if you really want a unique look, you need to create your own template. PHP Template Free PHP Tutorial. With this php web template setup, we create a css. Remember to work on your hard drive and keep a backup of all 'master.Master pages allow for developers to create a site-wide template with. 1) A template/Master Page under PHP which contains the header. PHP Template or Master Page. Create a Basic HTML Template. The video is here: How to Create a HTML Template. Simple Responsive Template is a template for responsive web design. Create a website with Simple. This tutorial is intended for anyone who. What is the best way to create JSP layout template? New tutorial will tell. Creating a HTML5 & CSS3 Single Page Web. Today we will create HTML5 web template with. For example. while each tutorial or forum post on www. Home, Get Started, Learn, and so on. A naive approach is to simply copy and paste the common layout markup. For starters, every. Such copying and pasting operations are ripe for error as you may. And to top. it off, this approach makes replacing the existing site- wide appearance with a new. Unfortunately. Visual Studio . NET 2. 00. 2 and 2. Visual Studio used to create. ASP. NET 1. x applications - rendered User Controls in the Design view as gray boxes. A master page is. ASP. NET page that defines both the site- wide markup and the regions. As we will see. in Step 1, these regions are defined by Content. Place. Holder controls. The Content. Place. Holder. control simply denotes a position in the master page's control hierarchy where custom. Note: The core concepts and functionality of master pages has not. ASP. NET version 2. However, Visual Studio 2. Visual Studio 2. 00. Note that the. master page defines the common site- wide layout - the markup at the top, bottom. Content. Place. Holder in the middle- left, where. Figure 0. 2: A Master Page Defines the Site- Wide Layout and the Regions. Editable on a Content Page- by- Content Page Basis. Once a master page has been defined it can be bound to new ASP. NET pages through. These ASP. NET pages - called content pages - include a Content. Content. Place. Holder controls. When the content. ASP. NET engine creates the master page's control. This combined control hierarchy is rendered and the resulting HTML is returned. Consequently, the content page emits both the common. Content. Place. Holder controls and. Content controls. Figure 3 illustrates. If you have not yet upgraded to ASP. NET 3. 5. don't worry - the concepts discussed in these tutorials work equally well with ASP. NET. 2. 0 and Visual Studio 2. However, some demo applications may use features new. NET Framework version 3. I include. a note that discusses how to implement similar functionality in version 2. Do. keep in mind that the demo applications available for download from each tutorial. NET Framework version 3. Web. config. file that includes 3. ASP. NET pages' code- behind classes. See. Dissecting ASP. NET Version 3. 5's Web. File for more information. You will also need to remove the using statements that. Start by creating a new file system- based ASP. NET website. To. accomplish this, launch Visual Web Developer and then go to the File menu and choose. New Web Site, displaying the New Web Site dialog box (see Figure 4). Choose the. ASP. NET Web Site template, set the Location drop- down list to File System, choose. C#. This will create a new. Default. aspx ASP. NET page, an App. Web Site Projects lack a project file. Web Application Projects mimic the project architecture in Visual Studio. NET 2. 00. 2/2. 00. Visual. Studio 2. Web Site Projects, although the. Web Application Project model was reintroduced with Service Pack 1; Visual. Studio 2. 00. 8 offers both project models. The Visual Web Developer 2. Web Site Projects. I use the Web Site Project model for my. If you are using a non- Express edition and want to. Web Application Project model instead, feel free to do so but be aware that. Note. that master pages end with the extension . Name this new master. Site. master and click Add. The @Master directive is similar. Page. directive that appears in ASP. NET pages. It defines the server- side language. C#) and information about the location and inheritance of the master page's code- behind. The page includes static HTML along with four server- side. A Web Form (the < form runat=. The < head> element is implemented this. For example, setting an ASP. NET page's. Title property changes the < title> element rendered. A Content. Place. Holder control named head - this Content. Place. Holder. control appears within the < head> server control and can be used. Feel free to edit the HTML or to add additional Web controls. Content. Place. Holders to the master page. Figure 6 shows the end result of the master page when one of its. The red circled region in Figure 6 is. Default. aspx); the other content. The top. Content< div> contains the markup. Content, left. Content. Content< div> s are used to display the. These various. rules define the look and feel of each < div> element noted above. Similarly. you will also need to create a folder named Images and copy the . For more on CSS, check out the. CSS Tutorials at W3. Schools. com. Some of my clients had an existing site layout they wanted to use; others. A few entrusted me to design the website layout. Such pages are referred to as content pages. Right- click on the project name in Solution Explorer and choose the. Add New Item option. Select the Web Form template, enter the name About. Doing so. will display the Select a Master Page dialog box (see Figure 8) from where you can. Note: If you created your ASP. NET website using the Web Application. Project model instead of the Web Site Project model you will not see the . To create. a content page when using the Web Application Project model you must choose the. Web Content Form template instead of the Web Form template. After selecting the. Web Content Form template and clicking Add, the same Select a Master Page dialog. Figure 8 will appear. If you did. not rename this Content. Place. Holder control's ID in the same way, your. The ASP. NET engine determines. Page directive's Master. Page. File. attribute. As the above markup shows, this content page is bound to ~/Site. Figure 9 shows the About. Visual Web Developer's Design view. Note that while the master page. The Content controls. Content. Place. Holders are, however, editable. And. just like with any other ASP. NET page, you can create the content page's interface. Web controls through the Source or Design views. As you. can see in Figure 1. I entered an . After creating this interface. About. aspx page through a browser. The end. user's browser is then sent the resulting, fused HTML. To verify this, view the. HTML received by the browser by going to the View menu and choosing Source. Note. that there are no frames or any other specialized techniques for displaying two. Unfortunately, converting an existing ASP. NET page to a master page is not. Bind all new ASP. NET pages to this master. Don't worry if the initial master page is very simple or plain; you can update. Note: When creating a new ASP. NET application, Visual Web Developer. Default. aspx page that isn't bound to a master page. If you. want to practice converting an existing ASP. NET page into a content page, go ahead. Default. aspx. Alternatively, you can delete Default. Therefore, updating. Add a Label named Date. Display. to the left. Content< div>.< div id=. With this change, revisit one of your content pages. As Figure. 1. 1 shows, the resulting markup is immediately updated to include the change to the. Note: As this example illustrates, master pages may contain server- side. Web controls, code, and event handlers. Creating master pages and their associated content pages is. ASP. NET pages, as Visual Web Developer offers rich. We only specified markup for the. Main. Content Content. Place. Holder control in our content page, however. Scott works as an independent. His latest book is Sams Teach Yourself ASP. NET 3. 5 in 2. 4 Hours. Scott can be reached. Guys. From. Rolla. Scott. On. Writing. NET. If so, drop me a line at. Guys. From. Rolla. My name is Scott Mitchell and I am a web developer who has been working with Microsoft's ASP and ASP. NET technologies since 1. I founded the popular ASP resource site 4. Guys. From. Rolla. I work as a freelance writer, trainer, and consultant from San Diego, California. Master Pages and Site Navigation. Contents of Tutorial 3 (Visual C#)Introduction. Step 1: Creating the Master Page. Step 2: Adding a Homepage to the Web Site. Step 2: Creating a Site Map. Step 3: Displaying a Menu Based on the Site Map. Step 4: Adding Breadcrumb Navigation. Step 5: Adding the Default Page for Each Section. Summary. Introduction. One common characteristic of user- friendly websites is that they have a consistent, site- wide page layout and navigation scheme. ASP. NET 2. 0 introduces two new features that greatly simplify implementing both a site- wide page layout and navigation scheme: master pages and site navigation. Master pages allow for developers to create a site- wide template with designated editable regions. This template can then be applied to ASP. NET pages in the site. Such ASP. NET pages need only provide content for the master page's specified editable regions . This model allows developers to define and centralize a site- wide page layout, thereby making it easier to create a consistent look and feel across all pages that can easily be updated. The site navigation system provides both a mechanism for page developers to define a site map and an API for that site map to be programmatically queried. The new navigation Web controls . We'll be using the default site navigation provider, meaning that our site map will be defined in an XML- formatted file. To illustrate these concepts and make our tutorials website more usable, let's spend this lesson defining a site- wide page layout, implementing a site map, and adding the navigation UI. By the end of this tutorial we'll have a polished website design for building our tutorial web pages. Figure 1. The End Result of This Tutorial. Step 1: Creating the Master Page. The first step is to create the master page for the site. Right now our website consists of only the Typed Data. Set (Northwind. xsd, in the App. I cleaned out those pages and files demonstrating using the DAL and BLL from the first two tutorials since we will be reexamining those examples in greater detail in future tutorials. Figure 2. The Files in Our Project. To create a master page, right- click on the project name in the Solution Explorer and choose Add New Item. Then select the Master Page type from the list of templates and name it Site. Figure 3. Add a New Master Page to the Website. Define the site- wide page layout here in the master page. You can use the Design view and add whatever Layout or Web controls you need, or you can manually add the markup by hand in the Source view. In my master page I use cascading style sheets for positioning and styles with the CSS settings defined in the external file Style. While you cannot tell from the markup shown below, the CSS rules are defined such that the navigation < div> 's content is absolutely positioned so that it appears on the left and has a fixed width of 2. Site. master< %@ Master Language=. These content editable regions are indicated by the Content. Place. Holder control, which can be seen within the content < div>. Our master page has a single Content. Place. Holder (Main. Content), but master page's may have multiple Content. Place. Holders. With the markup entered above, switching to the Design view shows the master page's layout. Any ASP. NET pages that use this master page will have this uniform layout, with the ability to specify the markup for the Main. Content region. Figure 4. The Master Page, When Viewed Through the Design View. Step 2: Adding a Homepage to the Web Site. With the master page defined, we're ready to add the ASP. NET pages for the website. Let's start by adding Default. Right- click on the project name in the Solution Explorer and choose Add New Item. Pick the Web Form option from the template list and name the file Default. Add a New Web Form, Checking the . While you can have multiple master pages in your project, we have only one. Figure 6. Choose the Master Page this ASP. NET Page Should Use. After picking the master page, the new ASP. NET pages will contain the following markup: Default. Page Language=. The Content control is where you place the markup you want to appear in the corresponding Content. Place. Holder. Set the @Page directive's Title attribute to Home and add some welcoming content to the Content control: Default. Page Language=. We can also set the title programmatically, using Page. Title. Also note that the master page's references to stylesheets (such as Style. ASP. NET page, regardless of what directory the ASP. NET page is in relative to the master page. Switching to the Design view we can see how our page will look in a browser. Note that in the Design view for the ASP. NET page that only the content editable regions are editable . The Design View for the ASP. NET Page Shows Both the Editable and Non- Editable Regions. When the Default. ASP. NET engine automatically merges the page's master page content and the ASP. NET's content, and renders the merged content into the final HTML that is sent down to the requesting browser. When the master page's content is updated, all ASP. NET pages that use this master page will have their content remerged with the new master page content the next time they are requested. In short, the master page model allows for a single page layout template to be defined (the master page) whose changes are immediately reflected across the entire site. Adding Additional ASP. NET Pages to the Web Site. Let's take a moment to add additional ASP. NET page stubs to the site that will eventually hold the various reporting demos. There will be more than 3. Since there will also be many categories of demos, to better manage the demos add a folder for the categories. Add the following three folders for now. Basic. Reporting. Filtering. Custom. Formatting. Finally, add new files as shown in the Solution Explorer in Figure 8. When adding each file, remember to check the . Add the Following Files. Step 2: Creating a Site Map. One of the challenges of managing a website composed of more than a handful of pages is providing a straightforward way for visitors to navigate through the site. To begin with, the site's navigational structure must be defined. Next, this structure must be translated into navigable user interface elements, such as menus or breadcrumbs. Finally, this whole process needs to be maintained and updated as new pages are added to the site and existing ones removed. Prior to ASP. NET 2. With ASP. NET 2. 0, however, developers can utilize the very flexible built in site navigation system. The ASP. NET 2. 0 site navigation system provides a means for a developer to define a site map and to then access this information through a programmatic API. ASP. NET ships with a site map provider that expects site map data to be stored in an XML file formatted in a particular way. But, since the site navigation system is built on the provider model it can be extended to support alternative ways for serializing the site map information. Jeff Prosise's article, The SQL Site Map Provider You've Been Waiting For shows how to create a site map provider that stores the site map in a SQL Server database; another option is to create a site map provider based on the file system structure. For this tutorial, however, let's use the default site map provider that ships with ASP. NET 2. 0. To create the site map, simply right- click on the project name in the Solution Explorer, choose Add New Item, and choose the Site Map option. Leave the name as Web. Add button. Figure 9. Add a Site Map to Your Project. The site map file is an XML file. Note that Visual Studio provides Intelli. Sense for the site map structure. The site map file must have the < site. Map> node as its root node, which must contain precisely one < site. Map. Node> child element. That first < site. Map. Node> element can then contain an arbitrary number of descendent < site. Map. Node> elements. Define the site map to mimic the file system structure. That is, add a < site. Map. Node> element for each of the three folders, and child < site. Map. Node> elements for each of the ASP. NET pages in those folders, like so: Web. Each < site. Map. Node> element in Web. Figure 1. 0. The Site Map Represents a Hierarchical Navigational Structure (click image to enlarge)ASP. NET exposes the site map's structure through the . NET Framework's Site. Map class! href(http: //msdn. This class has a Current. Node property, which returns information about the section the user is currently visiting; the Root. Node property returns the root of the site map (Home, in our site map). Both the Current. Node and Root. Node properties return Site. Map. Node! href(http: //msdn. Parent. Node, Child. Nodes, Next. Sibling, Previous. Sibling, and so on, that allow for the site map hierarchy to be walked. Step 3: Displaying a Menu Based on the Site Map. Accessing data in ASP. NET 2. 0 can be accomplished programmatically, like in ASP. NET 1. x, or declaratively, through the new data source controls. There are several built- in data source controls such as the Sql. Data. Source control, for accessing relational database data, the Object. Data. Source control, for accessing data from classes, and others. You can even create your own custom data source controls. The data source controls serve as a proxy between your ASP. NET page and the underlying data. In order to display a data source control's retrieved data, we'll typically add another Web control to the page and bind it to the data source control. To bind a Web control to a data source control, simply set the Web control's Data. Source. ID property to the value of the data source control's ID property. To aid in working with the site map's data, ASP. NET includes the Site. Map. Data. Source control, which allows us to bind a Web control against our website's site map. To bind the site map data to one of these two controls, simply add a Site. Map. Data. Source to the page along with a Tree. View or Menu control whose Data. Source. ID property is set accordingly.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |