实验3-内置对象应用、母版及主题.doc

实验3.1 内置对象的应用
目的与要求
(1) 熟练掌握Application、Session对象的使用。
(2) 熟练掌握Request、Response对象的使用。
(3) 熟练掌握Cookie对象的使用。
内容和步骤
【练习1】使用Application和Session对象统计在线人数(必做)
(1) 启动Visual Studio 2010，使用Visual C# 语言新建一个ASP.NET网站。
(2) 在网站中添加Global.asax全局应用程序文件，要求应用程序生命周期开始时，初始化在线人数。新用户会话开始时，在线人数加1，会话结束时，在线人数减1。Global.asax代码如下：
void Application_Start(object sender, EventArgs e)
{ // 在应用程序启动时运行的代码
// 初始化
Application["counter"] = 0;
}
void Session_Start(object sender, EventArgs e)
{ ……
}
void Session_End(object sender, EventArgs e)
{ ……
}
(3) 在Default.aspx网页设计视图中放置3个Label控件，所包含的控件及属性列于表T-1中。
表T-1 Default.aspx文件控件及其属性
控件类别
控件名
控件标识
属性
属性值
备注
Web控件
Label
Label1
Text
统计在线人数

Label
Label2
Text
当前在线人数为：

Label
Label3
Text
（空）
用于显示计数值
在页面第一次加载时，将在线人数Application["counter"] 赋给Label3.Text，实现在界面显示在线人数。其代码如下：
Label3.Text=Application["counter"].ToString ();
(4) 运行程序，结果如图T.4所示。连续按下”刷新” 按钮，观察网页上在线人数的变化。

图T.4 运行结果
【练习2】利用Cookie对象统计IP地址登录次数。(必做)
(1) 在练习1建立的网站中，新建页面IPCounter.aspx，在界面中添加一个文本框和一个按钮。
(2) 当用户首次访问 IPCounter.aspx页面时，利用Cookie对象向客户端硬盘写入一个永不过期的Cookie，同时计数器置1；当用户再次访问时，读取Cookie并将计数器加1后再写入Cookie，这些功能均在页面的Page_load()事件代码中实现，程序代码如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
……
}
}
(3) 在 IPCounter.aspx页面中，单击按钮即可在文本框中显示统计IP地址登录次数，按钮的单击事件代码如下：
protected void Button1_Click(object sender, EventArgs e)
{
if (Request.Cookies["lastVisitCounter"] == null)
{
TextBox1.Text = "1";
}
else
{
HttpCookie aCookie = Request.Cookies["lastVisitCounter"];
TextBox1.Text = Server.HtmlEncode(aCookie.Value);
}
}
(4) 运行程序，结果如图T.5所示。单击“统计”按钮，观察文本框中的值是否变化。

图T.5 运行结果
【练习3】统计网站的总访问量。(必做)
(1) 在练习1建立的网站中，新建页面WebCounter.aspx，用来显示总访问量。
(2) 统计网站的总访问量主要是在Global.asax全局应用程序文件中实现，要利用Application对象来统计总访问量，另外要利用文件来保存总访问量。实现的技术要点是在应用程序启动时，从计数文件中读取总访问量的值；当用户会话启动时对总访问量加1后再写入counter.txt计数文件；当应用程序关闭时将当前的总访问量写入counter.txt文件。Global.asax程序代码如下：
<%@ Application Language="C#" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.ComponentModel " %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.SessionState" %>
<%@ Import Namespace=" System.IO " %>

<script RunAt="server">
void Application_Start(object sender, EventArgs e)
{ ……
}
void Application_End(object sender, EventArgs e)
{ …….
}
void Session_Start(object sender, EventArgs e)
{ ……
}
</script>
(3) 在页面WebCounter.aspx中添加如下代码来显示总访问量：
<font face ="宋体" style="font-weight: bold; color: red; font-family: 隶书">您是第<%=Application["webcounter"]%>位访问者</font>
(4) 运行程序，结果如图T.6所示。页面中显示出总访问量值，当关闭浏览器后再次浏览本页面时，总访问量计数值将加1。

图T.6 运行结果

实验3.2 母版和主题
目的与要求
(1) 熟练掌握母版的使用方法。
(2) 熟练掌握主题及皮肤的使用与切换方法。
内容和步骤
【练习1】母版应用及动态加载母版。(必做)
(1) 启动Visual Studio 2008，使用Visual C# 语言新建一个ASP.NET网站，命名为“实验四”。
(2) 右键单击网站“实验四”，选择【添加新项】，在打开的对话框中选择【母版页】，创建母版页，命名为Master1.master。
图T.12 Master1设计界面

(3) 打开Master1.master，切换到【设计】视图，仿照图T.12进行母版页设计，放置一个表格用以布局，网页左侧上部放置一个Calendar控件，网页头部设计网站名称并在右侧添加一个Image控件，脚部放置版权信息等，在适当位置放置两个ContenPalceHolder控件。根据喜好放置其他控件，设置控件属性。
(4) 新建另一个母版页Master2.master，切换到【设计】视图，仿照图T.13进行母版页设计，放置一个表格用以布局，网页左侧上部放置一个AdRotator控件，下部放置一个Calendar控件。网页头部设计网站名称，脚部放置版权信息等。在左侧和右侧适当位置放置两个ContenPalceHolder控件。根据喜好放置其他控件，设置控件属性。
(5) 右键单击网站“实验四”，添加新项，选择【Web窗体】，勾选右下角的复选框【选择母版页】，在弹出的对话框中选择“Master1.master”，将新建的网页命名为sy1.aspx。设计网页，如图T.14所示，在左侧的Content中放置两个HyperLink控件，分别设置属性NavigateUrl为"sy1.aspx?master=master1"和"sy1.aspx?master=master2"。在右侧的Content中布置用于调查的表单：放置一个复选框列表控件CheckBoxList1并编辑ListItem；放置两个按钮控件Button1和Button2，分别用于提交和重选；放置一个标签控件Label1，用于显示调查结果。
图T.14 选择母版一的运行结果

图T.13 Master2设计界面

(6) 双击“提交”按钮button1，为其添加Click事件代码：
protected void Button1_Click(object sender, EventArgs e)
{ int i;
string str = "你选择的是：<br>";
……
Label1.Text = str;
}
(7) 双击“重选”按钮button2，为其添加Click事件代码：
protected void Button2_Click(object sender, EventArgs e)
{
CheckBoxList1.ClearSelection();
Label1.Text = "";
}
(8) 在网页的后台文件sy1.aspx.cs中添加Page_PreInit事件，设计切换母版的代码：
protected void Page_PreInit(object sender, EventArgs e)
{ string mm = Request["master"];
if (mm == "master1")
this.MasterPageFile = "master1.master";
else
this.MasterPageFile = "master2.master";
}
图T.15 选择母版二的运行结果

(9) 保存sy1.aspx，调试，按F5运行网页，点击选择母版，查看效果分别如图T.14和T.15所示。

【练习2】主题应用与动态加载主题。(选做)
(1) 在练习1建立的网站“实验四”中，新建文件夹App_Themes，右键单击App_Themes，选择【添加ASP.NET文件夹】，再选择【主题】，将出现的“主题1”文件夹重命名为Theme1。右键单击Theme1，添加新项，选择【外观文件】，命名为SkinFile1.skin。右键单击Theme1，添加新项，选择【样式表】，命名为cssfile1.css。同样的方法创建Theme2及其外观文件和样式表文件。结构如图T.16。
图T.16 主题文件夹结构

(2) 在网站的默认网页Default1页面中，在【设计】视图下，分别拖放TextBox、Label、Button、Calendar、AdRotator、Image、HyperLink控件各一个，为了便于将来在皮肤文件中改造它，一行放置一个。在属性窗口中设置这些控件的外观属性，风格为暖色调。运行调试直至色调风格满意为止。风格可参考图T.17。切换到【源】视图，复制控件代码至SkinFile1文件。去掉控件的ID属性，改造成皮肤文件代码如下：
<asp:TextBox runat="server" BackColor="#FFCCFF" BorderColor="#CC00CC" BorderStyle="Groove" BorderWidth="2px" Font-Bold="True" Font-Names="幼圆" Font-Size="Large" ForeColor="#0066FF" Height="50px" Width="200px"></asp:TextBox>
<asp:Label runat="server" BackColor="#FFCCFF" BorderColor="#CC00CC" BorderStyle="Groove" BorderWidth="2px" Font-Bold="True" Font-Names="幼圆" Font-Size="Large" ForeColor="#0066FF" Height="100px" Width="300px" ></asp:Label>
<asp:Button runat="server" BackColor="#FFCCFF" BorderColor="#CC00CC" BorderStyle="Groove" BorderWidth="2px" Font-Bold="True" Font-Names="幼圆" Font-Size="Large" ForeColor="#0066FF" Height="30px" Width="80px" />
<asp:Image runat="server" BackColor="#FFCCFF" BorderColor="#CC00CC" BorderStyle="Groove" BorderWidth="2px" ForeColor="#0066FF" Height="100px" Width="150px" ImageUrl="~/image/f2.jpg" />
<asp:Calendar runat="server" BackColor="#FF99CC" BorderColor="#CC00FF" BorderStyle="Groove" BorderWidth="2px" Caption="万年历" CaptionAlign="Top" Font-Bold="False" Font-Names="幼圆" Font-Size="Large" ForeColor="#3333CC">
<OtherMonthDayStyle BackColor="#FFCCCC" />
<NextPrevStyle BackColor="#FF66CC" BorderColor="#CC00FF" />
</asp:Calendar>
<asp:AdRotator runat="server" BackColor="#FFCCFF" BorderColor="#CC00CC" BorderStyle="Groove" BorderWidth="2px" Font-Bold="True" Font-Names="幼圆" Font-Size="Large" ForeColor="#0066FF" Height="30px" Width="200px" />
<asp:HyperLink runat="server" BackColor="#FFCCFF" BorderColor="#CC00CC" BorderStyle="Groove" BorderWidth="2px" Font-Bold="True" Font-Names="幼圆" Font-Size="Large" ForeColor="#0066FF"/>
(3) 打开cssfile1.css，在空白处单击右键，选择【添加样式规则】，添加需要设置的样式。在生成的样式内单击右键，选择【生成样式】。在弹出的对话框中分别设置【字体】、【块】等样式风格，格调仍旧为暖色调。重复这两步，直到符合需要的样式添加生成完毕。cssfile1.css文件中部分代码如下：
BODY {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
FONT-SIZE: 14px;
PADDING-BOTTOM: 0px;
MARGIN: 10px 0px 10px 0px;
PADDING-TOP: 0px;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #ec98c9;
WORD-WRAP: break-word
}
table
{
font-family: 幼圆;
font-size: larger;
background-color: #FFCCFF;
图T.17 选择Theme1的运行结果

}
(4) 仿照步骤2和3，设计另一个主题中的Theme2中的SkinFile2.skin和cssfile2.css，整体风格为冷色调。风格可参考图T.18。
(5) 在网站“实验四”中新建网页sy2.aspx，新建时使用母版，选择练习一中创建的母版二。参考图T.17设计内容页面，在左侧的Content中添加两个HyperLink控件，并分别设置分别设置属性NavigateUrl为"sy2.aspx?theme=1"和"sy2.aspx?theme=2"。在右侧的Content中布置用于调查的表单：放置一个复选框列表控件CheckBoxList1并编辑ListItem；放置两个按钮控件Button1和Button2，分别用于提交和重选；放置一个标签控件Label1，用于显示调查结果。
(6) 双击“提交”按钮button1，为其添加Click事件代码：
protected void Button1_Click(object sender, EventArgs e)
{ int i;
string str = "你选择的是：<br>";
……
Label1.Text = str;
图T.18 选择Theme2的运行结果

}
(7) 双击“重选”按钮button2，为其添加Click事件代码：
protected void Button2_Click(object sender, EventArgs e)
{
CheckBoxList1.ClearSelection();
Label1.Text = "";
}
(8) 在网页的后台文件sy2.aspx.cs中添加Page_PreInit事件，设计动态切换网站主题的代码：
protected void Page_PreInit(object sender, EventArgs e)
{
……
}
(9) 保存sy2.aspx，调试，按F5运行网页，点击切换网站皮肤，查看效果分别如图T.17和T.18所示。