Monday, January 17, 2011

Notes For Assignment Three

This assignment is mostly about using Master Pages. A Master page is essentially a template for giving your web site a consistent formatting. The structure of a site with a master page is a little different. The master page is a frame and all the other pages are content pages.

I am going to go through a simplified version of the computer sale example. Here is the Master page source.

MasterPage.master
************************************
<%@ 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>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<h1>Master Computer Sales</h1>
<p><a href="Default.aspx">Home</a>|<a href="Default2.aspx">Order form</a></p>

<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
*************************************************
Anything you put on the master page will show on the other pages. On the master page, you never put anything in the contentPlaceHolder. Note the simple menu.

Here is the Stylesheet used with the master page. It is very simple. It is just intended to give the idea of how you would use a style sheet with the Master page.

Stylesheet.css
*****************************************
body
{
font-family:Verdana;
}

h1
{
background-color:Navy;
color:White;
font-weight:bold;
text-align:center;
}

h2
{
color:Navy;
}
*******************************************
To add other pages you need to have the focus on the Master page. That means it must be in the text editor window. Go to Website on the Menu and choose "Add Content Page".

Here is the Default.aspx content page. It contains the overview. It is also the page that will show up when the site is launched.

Default.aspx
*****************************************
<%@ Page Title="Overview" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Overview</h2>
<p>Master computer is the main purveyor of laptops in the world.</p>
</asp:Content>
******************************************************
Note that the content must be between the contentPlaceHolder tags. The first place holder section is for header elements like scripts or alternate style sheets. The title is specified in the page header.

Here is the Default2.aspx source. It contains a simplified version of the order form.
Default2.aspx
*****************************************
<%@ Page Title="Order" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
<p>Choose your computer</p>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="400">14 inch</asp:ListItem>
<asp:ListItem Value="500">15 inch</asp:ListItem>
<asp:ListItem Value="600">17 inch</asp:ListItem>
</asp:DropDownList>
<p>Pick hard disk size</p>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="300">350 gigabytes</asp:ListItem>
<asp:ListItem Value="450">500 gigabytes</asp:ListItem>
<asp:ListItem Value="500">750 gigabytes</asp:ListItem>
</asp:RadioButtonList>
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
</asp:Content>
************************************************
Here is the code behind for the form page.
Default2.aspx.cs
**********************************************
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Computer comp = new Computer();
comp.Size = DropDownList1.SelectedItem.ToString();
comp.SizePrice = double.Parse(DropDownList1.SelectedValue.ToString());
comp.Harddrive = RadioButtonList1.SelectedItem.ToString();
comp.HarddrivePrice = double.Parse(RadioButtonList1.SelectedValue.ToString());

Session["MyComputer"] = comp;
Response.Redirect("Default3.aspx");
}
}
*****************************************************
Here is the Computer Class
Computer.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

///
/// Summary description for Computer
///

public class Computer
{
public Computer()
{


}

private string size;

public string Size
{
get { return size; }
set { size = value; }
}
private double sizePrice;

public double SizePrice
{
get { return sizePrice; }
set { sizePrice = value; }
}
private string harddrive;

public string Harddrive
{
get { return harddrive; }
set { harddrive = value; }
}
private double harddrivePrice;

public double HarddrivePrice
{
get { return harddrivePrice; }
set { harddrivePrice = value; }
}

public double CalculatePrice()
{
return HarddrivePrice + SizePrice;
}
}
****************************************************
Here is the source for the Confirmation page
Default3.aspx
******************************************************
<%@ Page Title="Confirmation" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
<h2>Confirmation</h2>
<p>Please confirm the following information</p>
<asp:Label ID="lblSize" runat="server" Text=""></asp:Label><asp:Label ID="lblSizePrice"
runat="server" Text="Label"></asp:Label><br />
<asp:Label ID="lblHardDrive" runat="server" Text="Label"></asp:Label><asp:Label ID="lblHardDrivePrice"
runat="server" Text="Label"></asp:Label><br />
<asp:Label ID="Label1" runat="server" Text="Total: "></asp:Label><asp:Label ID="lblTotal"
runat="server" Text=""></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Confirm"
onclick="Button1_Click" />
</asp:Content>
*********************************************************
Here is the code behind for the confirmation page.
Default3.aspx.cs
**********************************************************
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Computer comp = (Computer)Session["MyComputer"];
lblSize.Text = comp.Size;
lblSizePrice.Text = comp.SizePrice.ToString();
lblHardDrive.Text = comp.Harddrive;
lblHardDrivePrice.Text = comp.HarddrivePrice.ToString();
lblTotal.Text = comp.CalculatePrice().ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Redirect("Default4.Aspx");
}
}
*********************************************************
Finally, here is the source for the Thank you page
Default4.aspx
************************************************************
<%@ Page Title="Thank You" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
<h2>Thanks</h2>
<p>Thank you for your order</p>
</asp:Content>
************************************************************
Here are some screen shots of the web page running:

 



 



 


No comments:

Post a Comment