Introduction
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 selectmaster 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
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 Bgcolor.
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">
</asp:Content>
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.
Gdf
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:
