《Web应用程序设计》实训指导书

1、WEB应用程序设计实训指导书WEB应用程序设计 实验指导书目 录实训一 熟悉HTML语言基本结构3实训二 CSS样式设计综合应用5实训三 Response与Resquest对象应用7实训四 初识NET控件：文本框、按钮、文本标签9实训五 动态增删NET控件11实训六 NET静态控件数据绑定14实训七 初识NET数据库访问技术17实训一 熟悉HTML语言基本结构实训目的学生通过该实训熟悉HTML语言的基本使用方法，进一步体会浏览器解释执行HTML的原理，为以后ASP.net网络编程打下扎实的基础。实训任务与要求1. 利用Dreamweaver CS3编辑HTML页面，并在浏览器中观察效果，体会并

2、掌握HTML语言的基本操作和文件结构。见效果图2. 风格与布局与所选样例类似。文字内容与图片可另选。3. 不能以整张图片代替网页。4. 网页中至少有一个文字链接至中国大学生在线：5. 网页中至少有一个图片链接至九江职业技术学院首页：实训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容1仿样例制作网页。效果样例实训二 CSS样式设计综合应用实训目的学生通过该实训熟悉 A网站与项目的创建及CSS样式元语言的基本语法及在ASP中的应用，为以后高级网络编程打下扎实的基础。实训任务与要求1. 利用A创建站点。2. 利用A创建WebForm1.asp

3、x网页文件。3. 利用A创建CSS样式实现效果图。实训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容1. WebForm1.aspxWebForm1.aspx字随窗口大小而自动扩展；并保持与上下间距分别为20px、10px，左侧50px；内部间距为上下20px,左右20px。2. 两张图片叠加成如图样式。3. 表格随窗口变化而始终处于浏览器窗口右下角位置。4. 定义标签p样式：仿宋体，颜色#333399，大小为12pt，行间距为1.25字体高，字间距为0.3字体高，首行缩进2字符，文字内容选自“什么是Javascript脚本语言”文档前

4、3段。效果样例实训三 Response与Resquest对象应用实训目的学生通过该实训熟悉Response与Resquest对象的基本语法及在HTML超文本语言嵌入ASP中。实训任务与要求1. 利用A创建应用项目。2. 利用A创建WebForm1.aspx网页文件。3. 初识A的代码后置特点及WebForm1.aspx.vb代码分离文件的编辑。4. 利用VB.net语言作为Asp脚本语言编写WEB程序5. 在A中利用HTML超文本标识语言创建效果图。实训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容完全利用A的代码后置文件WebForm

5、1.aspx.vb的Page_Load过程编写程序实现效果图中九九乘法表。核心代码示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim i, j As Integer Response.Write("<div align='center'><H2>九九乘法表</H2></div>") Response.Write("<table align='

6、;center' border='1' bordercolor='blue'>") Response.Write("<tr hight='35' align='center'>") Response.Write("<td width='50'>&nbsp</td>") For i = 1 To 9 Response.Write("<td width='50'>"

7、 & i & "</td>") Next Response.Write("</tr>") For i = 1 To 9 Response.Write("<tr hight='35' align='center'>") Response.Write("<td width='50'>" & i & "</td>") For j = 1 To 9 If j <

8、;= i Then Response.Write("<td width='50'>" & i * j & "</td>") Else Response.Write("<td width='50'>&nbsp</td>") End If Next Response.Write("</tr>") Next Response.Write("</table>")End Sub效

9、果样例实训四 初识NET控件：文本框、按钮、文本标签实训目的1. 要求学生熟练掌握静态设计TextBox、Lable、Button控件应用。2. 要求学生熟练掌握网页首次加载与环回的执行过程，熟练掌握IsPostBack的使用。3. 正确区分与掌握Button对象、行为事件（单击）、方法的关系。4. 熟练掌握对TextBox、Lable内容的读取与赋值，区别对两者分段换行的处理方法。实训任务与要求1. 利用A创建应用项目。2. 利用A创建WebForm1.aspx网页文件。3. 初识NET控件：文本框、按钮、文本标签。4. 掌握按钮回传事件与ISPOSTBACK5. 简单客户留言板。效果图。实

10、训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容完全利用A的代码后置文件WebForm1.aspx.vb的Page_Load与Button1_Click过程编写程序实现简单客户留言板。核心代码示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 'net控件一：文本框、按钮、文本标签 '首次加载页面运行初始化TextBox1 If Not IsPostBack Then TextBo

11、x1.Text = "黄飞鸿" End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Dim str As String str = "先生，你好！" '比较两种控件中换行的方法 '标签控件中，两个文本框之间换行用<br/>，多行文本中内容自身的换行用<pre>格式化 Label1.Text = "<pre>" &am

12、p; TextBox1.Text & str & "<br/>" & TextBox3.Text & "</pre>" '以多行文本框显示另一文本框和多行文本框内容时，文本框之间用函数chr(13)换行，其余不变 TextBox4.Text = TextBox1.Text & str & Chr(13) & TextBox3.TextEnd Sub效果样例实训五 动态增删NET控件实训目的1. 要求学生熟练掌握ListBox、CheckBox、CheckBoxList

13、、RadioButton、RadioButtonList控件应用。2. 要求学生熟练掌握动态添加常用Web控件的方法。3. 要求学生熟练掌握动态移去（删除）常用Web控件的方法。4. 正确区分增删控件与增删控件项的方法。5. 常用控件默认选项的设置方法。6. 创建CheckBoxList图形选取形式与读取选择项状态值的方法实训任务与要求1、 ListBox、CheckBox、CheckBoxList、RadioButton、RadioButtonList控件对比与操作。实训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容完全利用A的代码后

14、置文件WebForm1.aspx.vb的Page_Load与Button1_Click过程编写程序实现动态增删NET控件。核心代码示例： Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click If TextBox1.Text = "" Then Label1.Text = "你没有输入内容。" Else Label1.Text = "<pre>" & TextBox1.Text

15、& "</pre>" End If End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button2.Click TextBox1.Text = "" ListBox1.ClearSelection() ListBox2.ClearSelection() CheckBox1.Checked = False CheckBox2.Checked = False CheckBox3.Checked = False

16、 CheckBox4.Checked = False CheckBoxList1.ClearSelection() CheckBoxList2.ClearSelection() RadioButton1.Checked = False RadioButton2.Checked = False RadioButton3.Checked = False RadioButton4.Checked = False RadioButtonList1.ClearSelection() '重新设定默认选项 CheckBoxList1.Items(3).Selected = True RadioBut

17、tonList1.Items(2).Selected = True End Sub Protected Sub Button3_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button3.Click Dim TextBox2 = New TextBox() TextBox2.ID = "TextBox2" TextBox2.Width = New Unit(100) TextBox2.TextMode = TextBoxMode.SingleLine TextBox2.Style("Lef

18、t") = "20px" Panel1.Controls.Add(TextBox2) '添加一个名为"九江"的项，且状态值为"九江" ListBox1.Items.Add("九江") '添加一个名为"九江"的项，且状态值为"9" ListBox2.Items.Add(New ListItem("九江", "9") '插入新增项并设定索引为1 CheckBoxList1.Items.Insert(3, &

19、quot;九江") '新增项且设定为选中状态 CheckBoxList1.Items.Add("江西") CheckBoxList1.Items(CheckBoxList1.Items.Count - 1).Selected = True End Sub Protected Sub Button4_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button4.Click '移去选定的选项 ListBox2.Items.Remove(ListBox2.SelectedItem)

20、 '移去指定索引的项 CheckBoxList1.Items.RemoveAt(1) ListBox2.Items.RemoveAt(2) End Sub效果样例实训六 NET静态控件数据绑定实训目的1. 要求学生熟练掌握VB数组的应用方法。2. 要求学生熟练掌握DropDownList控件3. 要求学生熟练掌握将数组绑定到Web控件的方法。4. 要求学生熟练掌握Web控件状态值发生变化时调用方法。5. 初识验证控件。实训任务与要求1、 定义数组及重置数组，将数组值绑定到DropDownList控件。实训设备 Windows xp/2003/2008 server+ Dreamweav

21、er CS3/实训内容完全利用A的代码后置文件WebForm1.aspx.vb的Page_Load与Button1_Click过程编写程序实现将数组绑定到DropDownList控件的方法。验证控件的简单应用核心代码示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load '数据绑定 If Not IsPostBack Then Dim maxy As Integer = Year(Now() - 25 Dim i As Integer Dim y(9

22、) y(0) = "请选择年份" For i = 1 To 9 y(i) = maxy maxy += 1 Next DropDownList_y.DataSource = y DropDownList_y.DataBind() End If Label1.Text = "" End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Label1.Text = "已回传服务器" End

23、Sub Protected Sub DropDownList_y_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList_y.SelectedIndexChanged DropDownList_m.Enabled = True End Sub Protected Sub DropDownList_m_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList_m

24、.SelectedIndexChanged Dim d(30) As Integer Dim i As Integer For i = 0 To 30 d(i) = i + 1 Next Dim y, m As Integer y = CInt(DropDownList_y.SelectedItem.Text) m = CInt(DropDownList_m.SelectedItem.Text) Select Case m Case 4, 6, 9, 11 ReDim Preserve d(29) Case 2 If y Mod 4 = 0 And y Mod 100 <> 0 O

25、r y Mod 400 = 0 Then ReDim Preserve d(28) Else ReDim Preserve d(27) End If End Select DropDownList_d.DataSource = d DropDownList_d.DataBind() DropDownList_d.Enabled = True End Sub效果样例实训七 初识NET数据库访问技术实训目的1、 要求学生熟练掌握NET数据库写入技术。2、 要求学生熟练掌握自定义验证控件RegularExpressionValidator正则表达式的规则。实训任务与要求1、 设计学生注册信息页面并建

26、立学生信息数据库。实训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容利用SQL Server 2000创建数据库完全利用A的代码后置文件WebForm1.aspx.vb的Page_Load与Button1_Click过程编写程序实现将数据库数据绑定。表达式验证控件RegularExpressionValidator的高级应用核心代码示例：<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server"

27、; ControlToValidate="TextBox6" Display="Dynamic" ErrorMessage="RegularExpressionValidator" ValidationExpression="(d3)|d3-)|(d4)|d4-)|(d4)|(d3)(d8|d7)">（号码错误）</asp:RegularExpressionValidator>Imports System.Data.SqlClientPartial Public Class WebForm12 I

28、nherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load '第二阶段测试题 验证控件及数据库访问 If Not IsPostBack Then Dim maxy As Integer = Year(Now() - 25 Dim i As Integer Dim y(9) y(0) = "请先选择年份" For i = 1 To 9 y(i) = maxy maxy += 1 Next D

29、ropDownList1.DataSource = y DropDownList1.DataBind() End If End Sub Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList1.SelectedIndexChanged DropDownList2.Enabled = True DropDownList2.ClearSelection() DropDownList2.Items(0).Selected =

30、True '每当重新选择年后重置月，但必须先清除原选择项 Dim i, day(30) As Integer For i = 0 To 30 day(i) = i + 1 Next DropDownList3.DataSource = day DropDownList3.DataBind() DropDownList3.Enabled = True End Sub Protected Sub DropDownList2_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownL

31、ist2.SelectedIndexChanged Dim i, day(30) As Integer For i = 0 To 30 day(i) = i + 1 Next Dim y As Integer = CInt(DropDownList1.SelectedItem.Text) Select Case CInt(DropDownList2.SelectedItem.Text) Case 4, 6, 9, 11 ReDim Preserve day(29) Case 2 If y Mod 4 = 0 And y Mod 100 <> 0 Or y Mod 400 = 0 T

32、hen ReDim Preserve day(28) Else ReDim Preserve day(27) End If End Select DropDownList3.DataSource = day DropDownList3.DataBind() End Sub Protected Sub DropDownList6_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList6.SelectedIndexChanged Dim dep As Integer = Drop

33、DownList6.SelectedItem.Value Select Case dep Case 1 Dim specialty() As String = "数控技术", "汽车维修", "空调维护", "检测技术" DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 2 Dim specialty() As String = "自动化", "应用电子" DropDownList7.Data

34、Source = specialty DropDownList7.DataBind() Case 3 Dim specialty() As String = "电子商务", "注册会计", "酒店管理", "国际贸易" DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 4 Dim specialty() As String = "计算机应用", "网络工程" DropDownList7.Dat

35、aSource = specialty DropDownList7.DataBind() Case 5 Dim specialty() As String = "商务英语", "旅游英语" DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 6 Dim specialty() As String = "船舶建造", "船舶导航" DropDownList7.DataSource = specialty DropDownList7.Da

36、taBind() End Select End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click '数据库结构： '数据库名: demo '表名：login '字段：姓名（name nvarchar(20)）性别（sex char(2)）密码（password char(32)）出生日期（birthday datetime(8)）生源地（nativeplace varchar(20)） '入学成绩（grad

37、e real(4)）报考类别（types char(10)）院系（depart varchar(20)）专业（specialty varchar(20)）爱好（fond varchar(50)） '手机（mobile char(11)）电话（phone char(12)）邮箱（email varchar(50)）近照（photo varchar(50)）备注（notes varchar(600)） If IsValid Then '如果所有验证都通过 '获取出生年月日 Dim y As Integer = CInt(DropDownList1.SelectedItem.

38、Text) Dim m As Integer = CInt(DropDownList2.SelectedItem.Text) Dim d As Integer = CInt(DropDownList3.SelectedItem.Text) '合并日期 Dim birth As Date = DateSerial(y, m, d) '获取爱好选择 Dim sfond As String = "N" Dim i As Integer For i = 0 To CheckBoxList1.Items.Count - 1 If CheckBoxList1.Items

39、(i).Selected Then If sfond = "N" Then sfond = CheckBoxList1.Items(i).Text Else sfond &= "|" & CheckBoxList1.Items(i).Text End If End If Next Dim mobileNum As String = "N" Dim phoneNum As String = "N" Dim emailAdd As String = "N" If TextBox5.T

40、ext <> "" Then mobileNum = Trim(CStr(TextBox5.Text) End If If TextBox6.Text <> "" Then phoneNum = Trim(CStr(TextBox6.Text) End If If TextBox8.Text <> "" Then emailAdd = Trim(TextBox8.Text) End If '获取个人说明 Dim remark As String = "N" If Text

41、Box9.Text <> "" Then remark = TextBox9.Text End If '上传个人照片至服务器存储 Dim filepath, filename, fileExtname As String filepath = FileUpload1.PostedFile.FileName fileExtname = filepath.Substring(filepath.LastIndexOf(".") If mobileNum <> "N" Then '如果有手机号 file

42、name = mobileNum & fileExtname '以手机号命名照片文件名 Else filename = TextBox1.Text & CStr(y) & CStr(m) & CStr(d) & fileExtname '否则以个人姓名+出生日期命名照片文件名 End If FileUpload1.SaveAs(Server.MapPath("images") & filename) '定义数据库连接字符串 Dim ConnStr As String = "Server=(lo

43、cal);user id=sa; pwd=; Database=demo" '建立数据库连接Connection对象，并创建一个实例 Dim conn As SqlConnection = New SqlConnection(ConnStr) '打开指定数据库 conn.Open() '定义SQlStr变量，建立含有参数的SQL语句 Dim SQLStr As String = "INSERT INTO login (name,sex,password,birthday,nativeplace,grade,types,depart,specialty

44、,fond,mobile,phone,email,photo,notes) VALUES (name,sex,password,birthday,nativeplace,grade,types,depart,specialty,fond,mobile,phone,email,photo,notes)" '创建数据库命令Command对象，并创建实例 Dim Cmd As SqlCommand = New SqlCommand(SQLStr, conn) '设置参数型别 Cmd.Parameters.Add(New SqlParameter("name&quo

45、t;, SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlParameter("sex", SqlDbType.Char, 2) Cmd.Parameters.Add(New SqlParameter("password", SqlDbType.Char, 32) Cmd.Parameters.Add(New SqlParameter("birthday", SqlDbType.DateTime, 8) Cmd.Parameters.Add(New SqlParameter("

46、nativeplace", SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlParameter("grade", SqlDbType.Real, 4) Cmd.Parameters.Add(New SqlParameter("types", SqlDbType.Char, 10) Cmd.Parameters.Add(New SqlParameter("depart", SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlPara

47、meter("specialty", SqlDbType.VarChar, 20) Cmd.Parameters.Add(New SqlParameter("fond", SqlDbType.VarChar, 50) Cmd.Parameters.Add(New SqlParameter("mobile", SqlDbType.Char, 11) Cmd.Parameters.Add(New SqlParameter("phone", SqlDbType.Char, 12) Cmd.Parameters.Add(N

48、ew SqlParameter("email", SqlDbType.VarChar, 50) Cmd.Parameters.Add(New SqlParameter("photo", SqlDbType.VarChar, 50) Cmd.Parameters.Add(New SqlParameter("notes", SqlDbType.VarChar, 500) '设置参数值 Cmd.Parameters(0).Value = TextBox1.Text Cmd.Parameters(1).Value = RadioBut

49、tonList1.SelectedItem.Text Cmd.Parameters(2).Value = FormsAuthentication.HashPasswordForStoringInConfigFile(TextBox2.Text, "MD5") Cmd.Parameters(3).Value = birth Cmd.Parameters(4).Value = DropDownList4.SelectedItem.Text Cmd.Parameters(5).Value = Val(TextBox4.Text) Cmd.Parameters(6).Value = DropDownList5.SelectedItem.Text Cmd.Parameters(7).Value = DropDownList6.SelectedItem.Text Cmd.Parameters(8).Value = DropDownList7.SelectedItem.Text Cmd.Parameters(9).Value = sfond Cmd.Parameters(10).Value = mobileNum Cmd.Parameters(11).Value = phoneNum Cmd.Parameters(12).Value = emailAdd Cmd.Par