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

《《Web应用程序设计》实训指导书.docx》由会员分享，可在线阅读，更多相关《《Web应用程序设计》实训指导书.docx（22页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、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页面，并在浏览器中观察效果，体会并掌握HTML语言的基本操作和

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

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

4、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的代码后置文件WebForm1.aspx.vb的Page_Load过

5、程编写程序实现效果图中九九乘法表。核心代码示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim i, j As Integer Response.Write(九九乘法表) Response.Write() Response.Write() Response.Write( ) For i = 1 To 9 Response.Write( & i & ) Next Response.Write() For i = 1 To 9 Response

6、.Write() Response.Write( & i & ) For j = 1 To 9 If j = i Then Response.Write( & i * j & ) Else Response.Write( ) End If Next Response.Write() Next Response.Write()End Sub效果样例实训四 初识NET控件：文本框、按钮、文本标签实训目的1. 要求学生熟练掌握静态设计TextBox、Lable、Button控件应用。2. 要求学生熟练掌握网页首次加载与环回的执行过程，熟练掌握IsPostBack的使用。3. 正确区分与掌握B

7、utton对象、行为事件（单击）、方法的关系。4. 熟练掌握对TextBox、Lable内容的读取与赋值，区别对两者分段换行的处理方法。实训任务与要求1. 利用A创建应用项目。2. 利用A创建WebForm1.aspx网页文件。3. 初识NET控件：文本框、按钮、文本标签。4. 掌握按钮回传事件与ISPOSTBACK5. 简单客户留言板。效果图。实训设备 Windows xp/2003/2008 server+ Dreamweaver CS3/实训内容完全利用A的代码后置文件WebForm1.aspx.vb的Page_Load与Button1_Click过程编写程序实现简单客户留言板。核心代码

8、示例： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load net控件一：文本框、按钮、文本标签 首次加载页面运行初始化TextBox1 If Not IsPostBack Then TextBox1.Text = 黄飞鸿 End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click Dim str As

9、 String str = 先生，你好！ 比较两种控件中换行的方法 标签控件中，两个文本框之间换行用，多行文本中内容自身的换行用格式化 Label1.Text = & TextBox1.Text & str & & TextBox3.Text & 以多行文本框显示另一文本框和多行文本框内容时，文本框之间用函数chr(13)换行，其余不变 TextBox4.Text = TextBox1.Text & str & Chr(13) & TextBox3.TextEnd Sub效果样例实训五 动态增删NET控件实训目的1. 要求学生熟练掌握ListBox、CheckBox、CheckBoxList、

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

11、文件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 = & TextBox1.Text & End If End Sub Protected Sub Button2_Click(ByVal sen

12、der As Object, ByVal e As EventArgs) Handles Button2.Click TextBox1.Text = ListBox1.ClearSelection() ListBox2.ClearSelection() CheckBox1.Checked = False CheckBox2.Checked = False CheckBox3.Checked = False CheckBox4.Checked = False CheckBoxList1.ClearSelection() CheckBoxList2.ClearSelection() RadioBu

13、tton1.Checked = False RadioButton2.Checked = False RadioButton3.Checked = False RadioButton4.Checked = False RadioButtonList1.ClearSelection() 重新设定默认选项 CheckBoxList1.Items(3).Selected = True RadioButtonList1.Items(2).Selected = True End Sub Protected Sub Button3_Click(ByVal sender As Object, ByVal e

14、 As EventArgs) Handles Button3.Click Dim TextBox2 = New TextBox() TextBox2.ID = TextBox2 TextBox2.Width = New Unit(100) TextBox2.TextMode = TextBoxMode.SingleLine TextBox2.Style(Left) = 20px Panel1.Controls.Add(TextBox2) 添加一个名为九江的项，且状态值为九江 ListBox1.Items.Add(九江) 添加一个名为九江的项，且状态值为9 ListBox2.Items.Add(

15、New ListItem(九江, 9) 插入新增项并设定索引为1 CheckBoxList1.Items.Insert(3, 九江) 新增项且设定为选中状态 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

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

17、03/2008 server+ Dreamweaver 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

18、i As Integer Dim y(9) 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 Sub Protected Sub

19、 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.SelectedIndexCha

20、nged 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 Or y Mod 400 = 0 Then ReDim

21、 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、 设计学生注册信息页面并建立学生信息数据库。实训设备 Windows xp/2

22、003/2008 server+ Dreamweaver CS3/实训内容利用SQL Server 2000创建数据库完全利用A的代码后置文件WebForm1.aspx.vb的Page_Load与Button1_Click过程编写程序实现将数据库数据绑定。表达式验证控件RegularExpressionValidator的高级应用核心代码示例：（号码错误）Imports System.Data.SqlClientPartial Public Class WebForm12 Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sen

23、der 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 DropDownList1.DataSource = y DropDownList1.DataBind() End If End Sub Protected

24、 Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList1.SelectedIndexChanged DropDownList2.Enabled = True DropDownList2.ClearSelection() DropDownList2.Items(0).Selected = True 每当重新选择年后重置月，但必须先清除原选择项 Dim i, day(30) As Integer For i = 0 To 30 day(i)

25、= 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 DropDownList2.SelectedIndexChanged Dim i, day(30) As Integer For i = 0 To 30 day(i) = i + 1

26、 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 Then ReDim Preserve day(28) Else ReDim Preserve day(27) End If End Select DropDownList3.Data

27、Source = day DropDownList3.DataBind() End Sub Protected Sub DropDownList6_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList6.SelectedIndexChanged Dim dep As Integer = DropDownList6.SelectedItem.Value Select Case dep Case 1 Dim specialty() As String = 数控技术, 汽车维修,

28、 空调维护, 检测技术 DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 2 Dim specialty() As String = 自动化, 应用电子 DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 3 Dim specialty() As String = 电子商务, 注册会计, 酒店管理, 国际贸易 DropDownList7.DataSource = specialty DropDownList7.DataBind()

29、 Case 4 Dim specialty() As String = 计算机应用, 网络工程 DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 5 Dim specialty() As String = 商务英语, 旅游英语 DropDownList7.DataSource = specialty DropDownList7.DataBind() Case 6 Dim specialty() As String = 船舶建造, 船舶导航 DropDownList7.DataSource = specialty

30、 DropDownList7.DataBind() 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)） 入学成绩（grade real(4

31、)）报考类别（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.Text) Dim m As Integer

32、= 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(i).Selected Then If sfond = N Then sfond = C

33、heckBoxList1.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.Text Then mobileNum = Trim(CStr(TextBox5.Text) End If If TextBox6.Text Then phoneNum = Trim(CStr(TextBox6.Text) En

34、d If If TextBox8.Text Then emailAdd = Trim(TextBox8.Text) End If 获取个人说明 Dim remark As String = N If TextBox9.Text Then remark = TextBox9.Text End If 上传个人照片至服务器存储 Dim filepath, filename, fileExtname As String filepath = FileUpload1.PostedFile.FileName fileExtname = filepath.Substring(filepath.LastInd

35、exOf(.) If mobileNum N Then 如果有手机号 filename = 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=(local);user id=sa; pwd=; Databa