ASP.NET programming language is composed of different suite packages of programming tools. However, the most exciting thing to learn from this language is to create a website because you don’t have to put in a lot of effort for building a complex website. In this language, you don’t need to find some flat form in order to make a beautiful and flexible website because there is already a package on how we are going to handle and locate those important matters to build a website. The advantages of why ASP.NET is popular? It’s because, you can write least amount of code. Unfortunately, it depends on the programmer side which programming tools they are going to choose. The most interesting part of ASP.NET Web programming is the use of Master Page. The master page is the template for how your pages will look like. It enables you to store the same content among multiple content pages in a website.
For instance, if you would like to display a standard header and footer in each page of your website, then you can generate the standard header and footer in a Master Page. That’s how powerful a master page is to handle multiple forms and is easier to maintain throughout what the website looks like. Take note, the
ID attribute uniquely identifies the placeholder, allowing you to put more than one placeholder in a master page.
To start - open your Visual Studio 2010, File and choose New Web Site, choose C#.
Choose ASP.NET Empty Web Site. Make the default File System; you can change the file directory of your file. Just simply browse and name your folder where your file is being saved and click Ok.
When we notice there’s no display, what are we going to do. We are going to Add a Master Page. To do that, in your solution explorer, right click the name of your website and choose Add new item. Choose
MasterPage.master, the default name is
MasterPage. Make sure that the check box is checked, only place code in a separate file, not a select master page.
This is the master build in code:
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<asp:ContentPlaceHolder id="head" runat="server">
<form id="form1" runat="server">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
Under the code, either you can choose Source, Split, and design. In order to show only the code, use the design just like above, split shows both source and design and design shows only a design.
Now, we are going to use design in order to see the full design of our Master Page. Click design; first delete the current placeholder because we are going to create a new one.
In the above menu, click table and insert table:
Click Ok, we are going to merge cells, the header and footer. Highlight the entire first row, right click and choose modify merge cells. Expand the height - it looks like a website and fill some color to make it look like an interesting site, look at the properties settings. If you want to add color for header and footer, click the cells and locate the properties and choose
In toolbox, choose Hyperlink and drag in your Page. Make 3 copies and name them Home, About, and Settings.
So, this is how your Master Page looks like. In order to make multiple Web Forms, in your Solution Explorer, click your web site name, right click and Add new item. Choose C# and click Web Form. The default name is default, change it to Home to make it more meaningful. Remember; make sure to check the select master page and Add. When you notice another dialog box appears, it does mean that you are in the Master Page control. Click
MasterPage.master, then Ok.
This is the build in code.
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
Do the same procedure like what you created in the Home web form and name it About and Setting. Now you’ve already created 3 Web Forms.
Back to the Master Page, drag Content PlaceHolder from your toolbox in your Master Page.
Click Home menu hyperlinks, in your properties setting, locate Navigate URL, click … and choose Home Web Form that corresponds to your menu. Do the same procedure when you link About and Settings Menu.
In Solution Explorer, double click Home Web Form. When you notice your cursor, only
ContentPlaceHolder is active, it means you could not write anything except the place holder. Now, we are going to put something in the place holder. Type “This is my Home Page”, do the same as what you created in your home web form and type that relate in every pages.
Note: If you couldn’t write in the placeholder, click the place holder and click the greater than arrow >.
Save your work.
Now, click debug to start debugging or press F5 to run you program. The first time you run your program, it shows dialog box, click ok to continue. Then the output of your program looks like:
Try to navigate your HOME, ABOUT, and SETTING menus to see if they work!
- 6th February, 2012: Initial version