Web程序设计实验指导书1116
Web程序设计
实验指导书
杨松波
一．实验一C#和实验目的
(1)了解C#语言规范
(2)掌握C#基础语法、流程控制和异常处理等。
(3)掌握创建C#类并应用于Web窗体中的方法。
二.实验内容及要求
1.转换输入的成绩到相应的等级
要求如下：
（1）页面浏览效果如图1-1所示
（2）成绩输入使用TextBox控件。
（3）点击Button控件时输出相应的等级信息，其中等级信息输出在一个Label上
图1-1 成绩转换浏览效果
2.在Web窗体上输出九九乘法表
浏览效果如图1-2所示
图1-2 “九九乘法表”浏览效果
3.输入一组以空格间隔的共10个以内的整数，输出该组整数的降序排列
要求如下：
（1）页面浏览效果如图1-3所示。
（2）输入使用TextBox控件。
（3）单击Botton控件时输出所有整数的降序排列。
（4）必须使用数组。
图1-3 降序排列浏览效果
4.计算两个数的商
要求如下：
（1）页面浏览效果如图1-4和图1-5所示。
（2）输入使用两个TextBox控件。
（3）单击Botton控件时输出两个数的商。
（4）必须包含异常处理。
图1-4 计算商浏览效果（1）
图1-5计算商浏览效果（2）
5.设计一个用户信息类UserInfo
要求如下：
（1）包括两个属性：姓名（Name）和生日（Birthday）。
（2）包括一个方法DecideAge（）用于判断用户是否达到规定年龄。当年龄大于等于18岁时返回值“XXX，您是成年人了!”; 当年龄小于18岁时返回值“XXX，您还没长大呢!”。
6.将UserInfo类应用于Web窗体中
页面浏览效果如图1-6和图1-7所示。
图1-6 UserInfo类浏览效果图（1）
图1-7 UserInfo类浏览效果图（2）
三.实验步骤
1. 转换输入的成绩到相应的等级
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图1-8所示，向页面添加1个TextBox控件、1个Botton控件和1个Lable控件。
图1-8 设计界面
（2）设置属性
Web窗体中各控件的属性设置如表1-1所示。
表1-1 各控件的属性设置表
（3）编写事件代码
按钮btnSubmit被单击时执行的事件代码如下：
protected void btnSubmit_Click(object sender, EventArgs e)
{
float fGrade = ;
int iGrade = (int)(fGrade / 10);
switch (iGrade)
{
case 10:
case 9:
= "优秀";
break;
case 8:
="良";
break;
case 7:
="中";
break;
case 6:
="及格";
break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
= "不及格";
break;
}
}
（4）浏览建立的Web窗体进行测试。
2. 在Web窗体上输出九九乘法表
新建一个Web窗体，切换到设计视图。在空白处双击，编写Web窗体载入时执行代码如下：protected void Page_Load(object sender, EventArgs e)
{
for (int i = 1; i <= 9; i++)
{
for (int j = 1; j <= i; j++)
{
() + "*" + () + "=" + (i * j).ToString());
(" ");
}
("
");
}
}
最后，浏览建立的Web窗体查看效果。
3.输入一组以空格间隔的共10个以内的整数，输出该组整数的降序排列
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图1-9所示，向页面添加1个TextBox控件、1个Botton控件。
图1-9设计界面
（2）设置属性
Web窗体中各控件的初始属性设置如表1-2所示。
表1-2 各控件的属性设置表
（3）编写事件代码
按钮btnSubmit被单击时执行的事件代码如下：
protected void btnSubmit_Click(object sender, EventArgs e)
{
string sInput;
" ";
int j=0;
int[] aInput = new int[10];
string temp = "0";
for (int i = 0; i <= - 1; i++)
{
if (i, 1) != " ")
{
temp += (i, 1);
}
else
{
aInput[j] = (temp);
j++;
temp = "0";
}
}
(aInput);
(aInput);
foreach (int i in aInput)
{
if (i != 0)
{
(i + " ");
}
}
}
（4）浏览建立的Web窗体进行测试。
4.计算两个数的商
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图1-10所示，向页面添加2个TextBox控件、1个Botton控件。
图1-10设计界面
（2）设置属性
Web窗体中各控件的初始属性设置如表1-3所示。
表1-3 各控件的属性设置表
（3）编写事件代码
按钮btnSubmit被单击时执行的事件代码如下：
protected void btnSubmit_Click(object sender, EventArgs e)
{
try
{
float divsor = ;
float dividend = ;
("商为:" + divsor / dividend);
}
catch(Exception ee)
{
("系统提示"++"
");
("请输入正确的数字");
}
}
（4）浏览建立的Web窗体进行测试。
5.设计一个用户信息类UserInfo
（1）右击App_Code文件夹，选择“添加新项”→“类”模板，重命名为,单击“添加”按钮。
（2）输入代码如下：
public class UserInfo
{
private string _Name;
private DateTime _Birthday;
public string Name
{
get
{
return _Name;
}
set
{
_Name = value;
}
}
public DateTime Birthday
{
get
{
return _Birthday;
}
set
{
_Birthday = value;
}
}
public UserInfo(string name,DateTime birthday)
{
UserInfo类应用于Web窗体中
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图1-11所示，向页面添加2个TextBox控件、1个Botton控件。
图1-11设计界面
（2）设置属性
Web窗体中各控件的初始属性设置如表1-4所示。
表1-4 各控件的属性设置表
（3）编写事件代码
按钮btnSubmit被单击时执行的事件代码如下：
protected void btnSubmit_Click(object sender, EventArgs e)
{
string name = ;
string birthday = ;
UserInfo userInfo = new UserInfo(name, (birthday, "yyyymmdd", null));
());
}
（4）浏览建立的Web窗体进行测试。
实验二标准控件
一．实验目的
(1)理解页面事件处理流程。
(2) 理解标注控件的应用。
二.实验内容及要求
1.设计并实现一个简易的计算器
要求如下：
(1)页面浏览效果如图2-1所示
(2)仿照一般计算器的工作方式，实现加和减的功能。
图2-1 “简易计算器”浏览效果
2.设计并实现一个用于查询教师课表的联动下拉列表框页面
要求如下：
(1)页面浏览效果如图2-2所示
(2)“学年”下拉列表框中添加十个数据项：当前学年及之前的九个学年。
(3)“学期”下拉列表框中添加两个数据项：1和2.
(4)“分院”下拉列表框中添加三个数据项：“数学与信息工程学院”、“机电学院”和“外
国语学院”。
(5)“教师”下拉列表框中的数据项根据不同的分院产生。
图2-2 联动下拉列表框浏览效果
3.设计并实现一个用于单项选择题的测试页面
要求如下：
(1)页面浏览效果如图2-3所示
(2)试题要求和选择题必须动态生成。
(3)如图2-4所示，当单击提交按钮时，给出选择的答案。
图2-3 测试页面效果（1）图2-4 测试页面效果（2）
三.实验步骤
1. 设计并实现一个简易的计算器
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图2-5所示，向页面添加1个用于布局的1行1列黑色边框表格。向表格中添加一个TextBox控件、6个Botton控件。
图2-5
（2）设置属性
Web窗体中各控件的属性设置如表2-1所示。
表2-1 各控件的属性设置表
（3）编写事件、方法代码
在所有事件、方法外声明静态字段。静态字段保证了其中的数据可以在所有的事件、方法中被访问，并能在事件代码或方法代码执行结束后保留数据。其中，静态字段num1用于存储算式中的第一个数字字符串，初始值为“0”；num2用于存储算式中的第二个数字字符串，初始值为“0”；total用于存储将所有输入的数连接后的数字字符串，初始值为“”（空字符串）；sign用于存储运算符号，初始值为“”。代码如下：
static string num1 = "0", num2 = "0", total = "", sign = "";
按钮btnOne被单击时执行的事件代码如下：
protected void btnOne_Click(object sender, EventArgs e)
{
total += "1"; 2”oString();
num1 = "0";
num2 = "0";
total = "";
sign = "";
break;
case "-":
= (num1) - (num2)).ToString();
num1 = "0";
num2 = "0";
total = "";
sign = "";
break;
}
}
}
（4）浏览建立的Web窗体进行测试。
2. 设计并实现一个用于查询教师课表的联动下拉列表框页面
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图2-6所示，向页面输入“学年：”、“学期：”、“分院：”和“教师：”等信息，适当设置字体大小。再向页面添加4个DropDownList控件，适当调整个控件的大小和位置。
图2-6
（2）设置属性
Web窗体中各控件的属性设置如表2-2所示。
表2-1 各控件的属性设置表
（3）编写事件、方法代码
Web窗体首次载入时执行的代码如下：
protected void Page_Load(object sender, EventArgs e)
{
oString() + "-" + ()));
}
oString() + "-" + ();
}
自定义方法BingTerm()的代码如下：
protected void BindTerm()
{
d
设计并实现一个用于单项选择题的测试页面
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图2-7所示，向页面添加1个PlaceHolder控件、1个Botton控件和1个Label控件，适当调整个控件的大小和位置。
图2-7
（2）设置属性
Web窗体中各控件的初始属性设置如表2-3所示。
表2-3 各控件的属性设置表
（3）编写事件代码
Web窗体首次载入时执行的代码如下：
protected void Page_Load(object sender, EventArgs e)
{
验内容及要求
1.设计并实现一个带验证控件的用户注册页面
要求如下：
(1)页面浏览效果如图3-1和图3-2所示
(2)“用户名”、“密码”、“确认密码”、“生日”、“电话号码”和“身份证号”等信
息必须输入。
(3) “密码”和“确认密码”的输入值必须一致。
(4) “生日”的输入值必须在1900-1-1到2010-1-1之间。
(5) “电话号码”
(6) “身份证号”中的出生年月信息必须为合法的日期数据。
(7) 能汇总显示所有的验证错误信息，并以独立的对话框显示。
(8)当验证控件出现验证错误时，焦点会定位在出现验证错误的文本框中。
(9)若通过所有的验证，则显示“验证通过”的信息。
图3-1 “用户注册验证”浏览效果（1）
图3-2 “用户注册验证”浏览效果（2）
2.设计并实现同一个页面的分组验证功能
要求如下：
(1)页面浏览效果如图3-2所示
图3-3 “分组验证”浏览效果（1）
(2) 如图3-4所示，当点击“用户名是否可用”按钮时，仅对“用户名”进行验证。
图3-4 “分组验证”浏览效果（2）
(3) 如图3-5和图3-6所示，当在“用户名”文本框中输入jxssg，再单击“用户名是否可用”
按钮时输出“抱歉！该用户名已被占用！”的信息；当在“用户名”文本框中输入其它信息，再单击“单击用户名是否可用”按钮时输出“恭喜！该用户名可用！”的信息。
图3-5 “分组验证”浏览效果（3）
图3-6 “分组验证”浏览效果（4）
(4) 如图3-7所示，当单击“确定”按钮时，对“密码”、“确认密码”、“生日”、“电
话号码”和“身份证号”进行验证。
图3-7 “分组验证”浏览效果（5）
三.实验步骤
1. 设计并实现一个带验证控件的用户注册页面
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图3-8所示，向页面输入“用户名”、“密码：”、“确认密码：”、“生日：”、“电话号码：”和“身份证号：”等信息；添加6个TextBox控件、6个RequiredFieldValidator控件、1个CompareValidator控件、1个
RangeValidator控件、1个RegularExpressionValidator控件、1个CustomValidator控件，1个Botton控件、1个Label控件和1个ValidatorSummary控件。适当调整个控件的位置和大小。
图3-8 设计界面（1）
（2）设置属性
Web窗体中各控件的属性设置如表3-1所示。
表3-1 各控件的属性设置表
（3）编写事件、方法代码
“自定义验证”控件cvIdentity的ServerValidate事件代码如下：
protected void cvIdentity_ServerValidate(object source, ServerValidateEventArgs args) {
设计并实现同一个页面的分组验证功能
（1）设计Web窗体
新建一个Web窗体，切换到设计视图。如图3-9所示，在图3-8的基础上，再向页面添加1个Botton控件、1个Label控件和1个ValidationSummary控件。适当调整个控件的位置和大小。
图3-9 设计界面（2）
（2）设置属性
在表3-1的基础上，设置“必须输入验证”控件rvfName的属性ValidatorGroup值为groupName；设置其他验证控件和“确定”按钮的属性ValidationFroup值为groupSubmit；新添加控件的属性设置如表3-2所示。
表2-1 各控件的属性设置表
控件属性名属性值说明
Button ID BtnValidateName “用户名是否可用”按钮的编程名称Text 用户名是否可用“用户名是否可用”按钮上显示的文
本
ValidationGroup groupName 单击按钮时验证groupName组Label ID lblName 显示“用户名是否可用”信息的Label
控件编程名称
Text 空初始不显示任何内容
ValidationSu mmary ID vsName “汇总验证”控件的编程名称ShowMessageBo
x
True 以对话框形式显示汇总的验证错误
信息
ShowSummary False 不在网页上显示汇总的验证错误信
息
ValidationGroup GroupName 汇总groupName组的错误验证信息
（3）编写事件代码
除包含实验步骤1中cvIdentity_ServerValidate和btnSubmit_Click事件代码外，还要添加按钮btnValidateName被单击时执行的事件代码如下：
protected void btnValidateName_Click(object sender, EventArgs e)
{
验内容及要求
1.设计并实现一个简易聊天室
要求如下：
(1) 页面浏览效果如图4-1~图4-4所示。
(2) 用户名和密码信息存储在二维数组中。
(3) 图4-2~图4-4使用框架技术。
(4) 必须包含HttpResponse、Session和Application的应用。
图4-1 “聊天室”浏览效果（1）
图4-2 “聊天室”浏览效果（2）
图4-3 “聊天室”浏览效果（3）
图4-4 “聊天室”浏览效果（4）
2.设计并实现同一个简易的购物车
要求如下：
(1)页面浏览效果如图4-5所示
图4-5 购物车效果（1）
(2) 选择相应宠物，单击放入“放入购物车”按钮，可看到供选择的宠物，如图4-6所示。
图4-6 购物车效果（2）
(3) 如图4-7所示，单击“清空购物车”按钮，将清除购物车中的宠物信息，并显示“没有
选择任何宠物”的提示信息。
图4-7 购物车效果（3）
三.实验步骤
1. 设计并实现一个简易的聊天室
（1）新建网站
新建一个网站，添加Web窗体、Web窗体、Web窗体、HTML页和全局应用程序类。
其中用于聊天室用户登录；用于显示聊天信息；用于发送聊天信息；用于设置框架页；用于存储Application_Start事件代码。
（2）设计
如图4-8所示，在设计视图添加一个用于布局的表格，向表格输入说明信息，添加2个TextBox控件、2个RequiredFieldValidator控件和1个Button控件，适当调整各控件的大小和位置。
中各控件的属性设置如表4-1所示。
图4-8 设计界面（1）
表4-1 各控件的属性设置表
（3）编写事件代码
在所有事件代码外声明一个存放用户名和密码的数组，代码如下：
4”oString();
}
（6）设计
如图4-9所示，在设计视图添加1个Label控件、1个TextBox控件和1个Button控件。适当调整各控件的大小和位置。
图4-9 设计界面（2）
中各控件的属性设置如表4-2所示。
表4-2 各控件的属性设置表
（7）编写事件代码
Web窗体首次载入时执行的代码如下：
protected void Page_Load(object sender, EventArgs e)
{
= "发言人：" + Session["user"];
if (!IsPostBack)
{
Application["message"] += Session["user"] + "进入聊天室
";
}
}
按钮btnSend被单击时执行的事件代码如下：
protected void btnSend_Click(object sender, EventArgs e)
{
();
Application["message"] += Session["user"] + "说：" + + "（" + + "）
";
();
= "";
}
（8）编写
可在FrontPage或Dreamweaver中建立一个“上下框架”网页，再将HTML源代码复制出来。也可以在Visual Studio2008中建立一个HTML页，再输入代码如下：
PUBLIC"-3C设计并实现一个简易的购物车
（1）新建网站
新建一个网站，添加Web窗体、Web窗体。其中用于选择宠物并放入到购物车中；用于查看购物车中宠物信息、清空购物车和返回。
（2）设计
如图4-10所示，在“设计”视图添加1个CheckBoxList控件和2个Button控件。适当调整个控件的位置和大小。
图4-10 设计界面（3）
中各控件的属性设置如表4-3所示。其中复选框列表空间中的列表项请参考图4-10设置
表4-3 各控件的属性设置表
（3）编写事件代码
Web窗体首次载入时执行的代码如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
elected)
{
ext + ",";
}
}
}
按钮btnView被单击时执行的事件代码如下：
protected void btnView_Click(object sender, EventArgs e)
{
("");
}
（4）设计
如图4-11所示，在“设计”视图添加1个Label控件、1个CheckBoxList控件和2个Button控件。适当调整个控件的位置和大小。
图4-11 设计界面（4）
中各控件的属性设置如表4-4所示。
表4-4 各控件的属性设置表
（5）编写事件代码
Web窗体首次载入时执行的代码如下：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Session["cart"] == null | Session["cart"] == "") oString();
验内容及要求
1.利用SqlDataSource 和LINQ to SQL进行SQL Server Express 2005的数据管理
要求如下：
(1) 建立数据管理的导航页面，浏览效果如图5-1所示。
图5-1 SQL数据管理导航页浏览效果
(2) 如图5-2所示，单击“显示全部”按钮时，显示MyPetShop数据库中Category表的内容。要求利用SqlDataSource实现。
图5-2 “显示全部”浏览效果
(3) 在图5-1中，单击“模糊查找”按钮呈现如图5-3所示的界面；如图5-4所示，输入要查找的内容，当未找到满足条件的数据时显示‘“没有满足条件的数据！”，如图5-5所示，当找到满足条件的数据时以GridView形式显示数据。要求利用SqlDataSource实现。
图5-3 “模糊查找”浏览效果（1）
图5-4 “模糊查找”浏览效果（2）
图5-5 “模糊查找”浏览效果（3）
(4) 在图5-1中，单击“插入”按钮呈现如图5-6所示的界面；输入“分类名”和“描述”，
再单击图5-6中“插入”按钮后，将向Category表添加一条记录，其中新增记录中的“分类Id”自动递增；单击“返回”按钮将返回到数据管理的导航页面，要求利用SqlDataSource 实现。
图5-6 SQL“插入”浏览效果
(5) 在图5-1中，输入“分类Id”，再单击“编辑”按钮呈现如图5-7所示的界面；此时可
修改“分类名”和“描述”，但不能修改“分类Id”。修改完成后单击“修改”按钮将修改Category表中对应的数据。单击“返回”按钮将返回到数据管理的导航页面。要求利用SqlDataSource。
图5-7 “修改”浏览效果
(6) 在图5-1中，输入“分类Id”，再单击“编辑LINQ”按钮实现“要求（5）”的功能，
但必须使用LINQ to SQL实现。
(7) 在图5-1中，输入“分类Id”，再单击“删除”按钮实现“要求（5）”的功能，但必
须使用LINQ to SQL实现。
2.利用LINQ 技术将Category表转换成XML文档文档
要求转换后的结构如图5-8所示
图5-8 浏览效果
3.利用LINQ to XML管理XML文档
要求如下：
(1)建立数据管理的导航页面，浏览效果如图5-9所示。
图5-9 XML数据管理的导航页浏览效果
(2) 单击“显示全部”按钮，将新开一个IE窗口或选项卡显示文档内容。
(3) 如图5-10所示，输入“分类名”，单击“查询”按钮，当未找到满足条件的数据时显
示‘“没有满足条件的数据！”，如图5-11所示，当找到满足条件的数据时以Label形式显示满足条件数据。
图5-10 “查询”效果（1）
图5-11 “查询”效果（2）
(4) 在图5-9所示，单击“插入”按钮呈现如图5-12所示的界面；输入“分类Id”、“分类
名”和“描述”，再单击图5-12中“插入”按钮，将向中添加相应的元素。
图5-12 XML“插入”效果
三.实验步骤
1. 利用SqlDataSource 和LINQ to SQL进行SQL Server Express 2005的数据管理
（1）新建网站
新建一个网站，添加Web窗体、Web窗体、Web窗体、Web窗体、Web窗体。其中作为数据管理的导航页面；用于模糊查询数据；用于插入数据；利用SqlDataSource修改数据；
利用LINQ to SQL修改数据。
将建立MyPetShop数据库复制到App_Data文件夹。
（2）设计
如图5-13所示，向页面输入“分类Id：”，添加1个TextBox控件、6个Button控件、1个GridView控件和1个SqlDataSource。适当调整各控件的大小和位置。
图5-13 设计界面（1）
Web应用程序设计综合实验报告材料
Web应用程序设计综合实验报告题目：网上购物系统 学生姓名： XXX 学号： XXXXXXXXXXX 院（系）： XXXXXXX 专业： XXXXXXXXXX 指导教师： XXXXXXXXXX 2014 年 7月 6 日
1、选题背景 随着计算机技术的发展和网络人口的增加，网络世界也越来越广播，也越来越来越丰富，网上商城已经成为网上购物的一股潮流。互联网的跨地域性和可交互性使其在与传统媒体行业和传统贸易行业的竞争中是具有不可抗拒的优势。在忙碌丰富的社会生活中，人们开始追求足不出户就能买到心仪的商品，是越来越多的上网爱好者实现购物的一种方式，对于企业来说，网络交易能大大提高交易速度、节约成本。在这种形势下，传统的依靠管理人员人工传递信息和数据的管理方式就无法满足企业日益增长的业务需求，因而开发了这样一个具有前台后台的网上商城系统，以满足购物者和企业的需求。 因此这次毕业设计题目就以目前现有的网上商城系统为研究对象，研究一般的网上商城的业务流程，猜测其各个功能模块及其组合、连接方式，并分析其具体的实现方式，最后使用Java加web服务器和数据库完成一个网上商城系统的主要功能模块。通过这样一个设计，可以提高自己Java编程的水准，也练习了怎样构建一个完整的系统，从系统的需求分析到设计，直至编码、测试并运行，熟悉并掌握一个完整的Web开发流程，为今后工作打下基础。 1.1设计任务 从以下几个方面实现网络商城的基本功能： 1、用户部分： （1）用户的登录和注册，用户必须注册才能购物，注册时系统会对注册信息进行验证，进入系统或是结账时，用户可以进行登录，登录时，如果密码错误，系统会进行验证并提示错误。 （2）浏览商品，实现用户可以在网络商店中随意浏览商品，商品按类别分类，方便用户查找不同类别的商品 （3）购物车管理，能实现添加商品、删除商品、更新商品的功能。 （4）生成订单，查看购物车后单击下一步则生成订单信息表，一旦提交订单，则购物车就不能被改变。 2、管理员部分：
Web程序设计实验报告
Web程序设计实验报告 姓名：冯刚 学号：200905030324 班级：计科3班
Html代码： 1.首页代码