《WEB技术与应用全套课件完整版ppt教学教程最新最全.pptx》由会员分享，可在线阅读，更多相关《WEB技术与应用全套课件完整版ppt教学教程最新最全.pptx（244页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、n第1页n第2页项目一项目一HTML标记与HTML服务器控件操作 n第3页课程目标n1.理解C#基础知识。n2.理解与掌握网页的HTML标记、HTML服务器标记及使用方法。项目一目标n第4页任务1.1 设计第一个ASP.NET网站 n1.Microsoft.NET平台概述平台概述n2.NETFramework框架简介框架简介n第5页任务1.1 设计第一个ASP.NET网站 n3.ASP.NET的发展史的发展史n4.ASP.NET优势优势n5.ASP.NET的关键技术的关键技术n第6页任务1.1 设计第一个ASP.NET网站 n6.ASP.NET程序的系统要求程序的系统要求n（1）IIS的安装的
2、安装n依依次次单单击击【开开始始】【控控制制面面板板】【程程序序】，启启 动动“打打 开开 或或 关关 闭闭 Windows功功 能能”，出出 现现“Windows组件向导组件向导”对话框，如图对话框，如图1.2所示。所示。n第7页任务1.1 设计第一个ASP.NET网站 n图1.2 IIS的安装n第8页任务1.1 设计第一个ASP.NET网站 1.【任务要求】【任务要求】2.用C#编写创建一个ASP.NET应用程序项目，输出一行“张小楼，310111班”，再输出一行“这是我编写的第一个网页”。3.【任务分析任务分析】4.任务背景。任务背景。根据高职专业、班级设置情况，考虑本课程教学和学生英语
3、水平实际需要，便于学生记忆，选择三门必修课程为：语文、数学和外语（英语），使用分数表示，采用百分制；选择两门选修课程：物理、化学，采用等级制，分A、B、C、D、E（五级）。本单元中的任务都是建立在此基础上创建的学生成绩表作为讲解的数据库表。n第9页任务1.1 设计第一个ASP.NET网站 n第10页任务1.1 设计第一个ASP.NET网站 n图1.3 学生成绩表（tblStuScore）中的数据n第11页任务1.1 设计第一个ASP.NET网站 n任务HTML代码如下。nnn 1_1.aspxnnn n n 张小楼，310111班/输出一行字符n 这是我编写的第一个网页!/*输出一行字符*/n
4、n nnn第12页任务1.1 设计第一个ASP.NET网站 nDefault.aspx.cs代码如下：nusing System;nusing System.Collections.Generic;nusing System.Linq;nusing System.Web;nusing System.Web.UI;nusing System.Web.UI.WebControls;npublic partial class _Default:System.Web.UI.Page nn protected void Page_Load(object sender,EventArgs e)nn/此处输
5、入页面加载时的处理代码n nn第13页任务1.1 设计第一个ASP.NET网站 n任务1.1运行效果图：1.图1.8 第一个网页n第14页项目二项目二Web服务器控件操作服务器控件操作n第15页理解与掌握网页的Web控件及使用方法。项目二目标n第16页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n【知识准备】【知识准备】nWeb标准控件标准控件n1.标签（标签（Label）n2.文本框（文本框（TextBox）n3.按钮（按钮（Button）n4.单选按钮控件（单选按钮控件（RadioButton）和单选按钮列表控件）和单选按钮列表控件n（RadioBut
6、tonList）n5.复选框（复选框（CheckBox）和复选列表框控件（）和复选列表框控件（CheckBoxList）n6.下拉列表（下拉列表（DropDownList）和列表框（）和列表框（ListBox）控件）控件n第17页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n【任务要求】【任务要求】n综合应用综合应用HTML语言输入一名学生的姓名、性别、三门必修课程（语文、语言输入一名学生的姓名、性别、三门必修课程（语文、n数学和英语）成绩和两门选修课程（物理和化学）成绩。数学和英语）成绩和两门选修课程（物理和化学）成绩。n（1）使用）使用table表格定
7、位一名学生考试成绩信息；表格定位一名学生考试成绩信息；n（2）使用）使用RadioButton表示性别；表示性别；n（3）使用）使用TextBox表示三门必修课程成绩；表示三门必修课程成绩；n（4）使用）使用RadioButtonList表示两门选修课程（物理和化学）；表示两门选修课程（物理和化学）；n（5）使用）使用DropDownList表示学生的出生日期；表示学生的出生日期；n（6）使用）使用ListBox表示学生所在班级；表示学生所在班级；n（7）使用）使用Label表示输出的学生成绩信息；表示输出的学生成绩信息；n（8）使用）使用TextBox的的TextMode=MultiLine
8、表示备注信息；表示备注信息；n（9）使用）使用Button表示输出学生信息和重置按钮。表示输出学生信息和重置按钮。n第18页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 1.【任务分析】【任务分析】2.根据表单元素要求，要求使用三个文本框，用来输入三门必修课程根据表单元素要求，要求使用三个文本框，用来输入三门必修课程3.成绩；使用两组单选按钮，每组五个，分别表示物理和化学的成绩；使用两组单选按钮，每组五个，分别表示物理和化学的A、B4.、C、D、E五个等级；需要两组单选按钮列表五个等级；需要两组单选按钮列表RadioButtonList，5.分别表示性别、物
9、理与化学等级等。分别表示性别、物理与化学等级等。n第19页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n【操作步骤】【操作步骤】nHTML代码：代码：n双击双击“输出输出”按钮，其代码。按钮，其代码。n运行效果如图。运行效果如图。nn第20页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n图2.9 2_1.aspx运行效结果n第21页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表n【知识准备】【知识准备】nWeb其他标准控件其他标准控件n1.Panel面板控件面板控件n2.Calenda
10、r（日历）控件（日历）控件n3.文件上传控件（文件上传控件（FileUpload）n【任务要求】【任务要求】n（1）填写一个学生信息，在）填写一个学生信息，在Web页面上增加一个复选框，其页面上增加一个复选框，其Text=n“填写一个学生信息填写一个学生信息”，当不选中复选框时，关闭，当不选中复选框时，关闭Panel面板；当选中面板；当选中n复选框时，显示复选框时，显示Panel面板，效果如图面板，效果如图2.11所示。所示。n图2.11 2_2_01.aspx运行效果n(a)1.(b)n第22页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表n（2）在工具箱中
11、拖放一个）在工具箱中拖放一个Calendar控件到控件到Web页面（页面（“设计设计”视图）视图）n上，当选择日期和月份时显示效果如图上，当选择日期和月份时显示效果如图2.12所示。所示。n图2.12 2_2_02.aspx运行效果n(a)n(b)n第23页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表n（3）利用文件上传控件，根据需要可以上传一名学生的照片到指定）利用文件上传控件，根据需要可以上传一名学生的照片到指定n的服务器目录下，其最终效果如图的服务器目录下，其最终效果如图2.13所示。所示。图2.13 2_2_03.aspx运行效果(a)(b)n第24
12、页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表【任务分析】【任务分析】（1）在工具箱上拖放在）在工具箱上拖放在Panel控件、控件、CheckBox控件，设置其属性控件，设置其属性如表如表2.8所示。所示。n第25页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表【操作步骤】【操作步骤】2_2_01.aspx的的HTML代码：代码：2_2_02.aspx的的HTML代码：代码：2_2_03.aspx的的HTML代码：代码：双击双击“上传上传”按钮，进入事件代码编辑窗口，其代码。按钮，进入事件代码编辑窗口，其代码。n第26页项目
13、三项目三Web验证控件操作验证控件操作 n第27页理解与掌握Web验证控件及使用方法。项目三目标n第28页任务任务3.1使用非空字段验证控件操作学生成绩表使用非空字段验证控件操作学生成绩表n【知识准备】【知识准备】n1.验证控件概述验证控件概述n（1）数据验证性控件的分类）数据验证性控件的分类n（2）数据验证性控件的通用属性）数据验证性控件的通用属性n2.非空字段验证控件非空字段验证控件n第29页任务任务3.1使用非空字段验证控件操作学生成绩表使用非空字段验证控件操作学生成绩表n【任务要求】【任务要求】n使用使用TextBox、RadioButton和和ListBox三种控件，输入一个学生的三
14、种控件，输入一个学生的n姓名、性别和班级信息，验证其是否为空。姓名、性别和班级信息，验证其是否为空。n【任务分析】【任务分析】n本任务为了更好地定位各个控件，使用了一个本任务为了更好地定位各个控件，使用了一个Table。各个控件的属。各个控件的属n性表性表3.4所示。所示。n第30页任务任务3.1使用非空字段验证控件操作学生成绩表使用非空字段验证控件操作学生成绩表n第31页任务任务3.1使用非空字段验证控件操作学生成绩表使用非空字段验证控件操作学生成绩表1.【操作步骤】【操作步骤】2.其其HTML代码如下。代码如下。3.双击双击“提交提交”按钮，进入事件代码编辑窗口，输入如下代码按钮，进入事件
15、代码编辑窗口，输入如下代码。4.运行效果如下图。运行效果如下图。5.n图3.1 3_1.aspx运行结果n(a)n(b)n第32页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n【任务要求】【任务要求】n综合应用综合应用HTML语言输入一名学生的姓名、性别、三门必修课程（语文、语言输入一名学生的姓名、性别、三门必修课程（语文、n数学和英语）成绩和两门选修课程（物理和化学）成绩。数学和英语）成绩和两门选修课程（物理和化学）成绩。n（1）使用）使用table表格定位一名学生考试成绩信息；表格定位一名学生考试成绩信息；n（2）使用）使用RadioButton表示性
16、别；表示性别；n（3）使用）使用TextBox表示三门必修课程成绩；表示三门必修课程成绩；n（4）使用）使用RadioButtonList表示两门选修课程（物理和化学）；表示两门选修课程（物理和化学）；n（5）使用）使用DropDownList表示学生的出生日期；表示学生的出生日期；n（6）使用）使用ListBox表示学生所在班级；表示学生所在班级；n（7）使用）使用Label表示输出的学生成绩信息；表示输出的学生成绩信息；n（8）使用）使用TextBox的的TextMode=MultiLine表示备注信息；表示备注信息；n（9）使用）使用Button表示输出学生信息和重置按钮。表示输出学生信
17、息和重置按钮。n第33页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n【任务分析】【任务分析】n根据表单元素要求，要求使用三个文本框，用来输入三门必修课程根据表单元素要求，要求使用三个文本框，用来输入三门必修课程n成绩；使用两组单选按钮，每组五个，分别表示物理和化学的成绩；使用两组单选按钮，每组五个，分别表示物理和化学的A、Bn、C、D、E五个等级；需要两组单选按钮列表五个等级；需要两组单选按钮列表RadioButtonList，n分别表示性别、物理与化学等级等。分别表示性别、物理与化学等级等。n第34页任务任务2.1使用使用Web常用标准控件操作学生成绩
18、表常用标准控件操作学生成绩表 1.【操作步骤】【操作步骤】2.HTML代码：代码：3.双击双击“输出输出”按钮，其代码。按钮，其代码。4.运行效果如图。运行效果如图。5.n第35页任务任务2.1使用使用Web常用标准控件操作学生成绩表常用标准控件操作学生成绩表 n图2.9 2_1.aspx运行效结果n第36页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表n【知识准备】【知识准备】nWeb其他标准控件其他标准控件n1.Panel面板控件面板控件n2.Calendar（日历）控件（日历）控件n3.文件上传控件（文件上传控件（FileUpload）n【任务要求】【任
19、务要求】n（1）填写一个学生信息，在）填写一个学生信息，在Web页面上增加一个复选框，其页面上增加一个复选框，其Text=n“填写一个学生信息填写一个学生信息”，当不选中复选框时，关闭，当不选中复选框时，关闭Panel面板；当选中面板；当选中n复选框时，显示复选框时，显示Panel面板，效果如图面板，效果如图2.11所示。所示。n图2.11 2_2_01.aspx运行效果n(a)n(b)n第37页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表（2）在工具箱中拖放一个）在工具箱中拖放一个Calendar控件到控件到Web页面（页面（“设计设计”视图）视图）上，当
20、选择日期和月份时显示效果如图上，当选择日期和月份时显示效果如图2.12所示。所示。图2.12 2_2_02.aspx运行效果(a)(b)n第38页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表（3）利用文件上传控件，根据需要可以上传一名学生的照片到指定）利用文件上传控件，根据需要可以上传一名学生的照片到指定的服务器目录下，其最终效果如图的服务器目录下，其最终效果如图2.13所示。所示。图2.13 2_2_03.aspx运行效果(a)(b)n第39页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表【任务分析】【任务分析】（1）在工
21、具箱上拖放在）在工具箱上拖放在Panel控件、控件、CheckBox控件，设置其属性控件，设置其属性如表如表2.8所示。所示。n第40页任务任务2.2使用使用Web其他标准控件操作学生成绩表其他标准控件操作学生成绩表【操作步骤】【操作步骤】2_2_01.aspx的的HTML代码：代码：2_2_02.aspx的的HTML代码：代码：2_2_03.aspx的的HTML代码：代码：双击双击“上传上传”按钮，进入事件代码编辑窗口，其代码。按钮，进入事件代码编辑窗口，其代码。n第41页项目四 ADO.NET组件和Web数据控件n第42页理解与掌握SqlDataSource数据源控件、Web数据控件及其使
22、用方法。项目四目标n第43页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n【知识准备】【知识准备】n1.ADO.NET对象和对象和GridView控件控件n其语法结构如下。其语法结构如下。n（1）创建学生成绩表）创建学生成绩表n（2）ADO.NET对象模型知识对象模型知识n第44页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息1.2.SQLServer.NET的的ADO.NET对象的属性和方法对象的属性和方法2.（1）SqlConnection类类3.（2）Sq
23、lCommand类类4.（3）SqlDataReader类类5.（4）SqlDataAdapter类类6.3.SqlDataSource数据源控件数据源控件7.4.GridView控件控件n第45页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n【任务要求】【任务要求】n用网格视图用网格视图GridView控件显示数据库控件显示数据库StuScore.mdf中学生成绩表中学生成绩表n（tblStuScore）中数据。要求显示所有记录中的部分列，列标题应为）中数据。要求显示所有记录中的部分列，列标题应为n中文，能选择某条记录，记录
24、奇偶行和选择行的背景不同，能单击某个中文，能选择某条记录，记录奇偶行和选择行的背景不同，能单击某个n显示列后按该列进行排序。显示列后按该列进行排序。n【任务分析】【任务分析】n数据源采用数据源采用SqlDataSource类型，虽然可以通过修改类型，虽然可以通过修改Select语句实现部语句实现部n分列的选择、列标题应为中文以及排序，因为网格视图控件分列的选择、列标题应为中文以及排序，因为网格视图控件GridView提提n供了方便这些操作的功能，所以在本任务中，只通过操作网格视图控件供了方便这些操作的功能，所以在本任务中，只通过操作网格视图控件nGridView完成这个任务。完成这个任务。n根
25、据任务需要，为了实现任务目的，需要在窗体上增加根据任务需要，为了实现任务目的，需要在窗体上增加SqlDataSourcen控件、控件、GridView数据显示控件，这些控件的属性设置如表数据显示控件，这些控件的属性设置如表4.9所示。所示。n第46页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n第47页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n【操作步骤】【操作步骤】n在工具箱在工具箱“数据数据”选项卡中，拖动选项卡中，拖动SqlDataSource到页面
26、到页面“设计设计”视图上视图上n，出现如图，出现如图4.3所示的界面。所示的界面。n图4.3 配置数据源1n第48页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n（3）单击“配置数据源”出现如图4.4所示的对话框。图4.4 配置数据源2n第49页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n（4）单击单击“新建连接新建连接”按钮，出现如图按钮，出现如图4.5所示的所示的“添加连接添加连接”对话框。对话框。1.图4.5 配置数据源3n第50页任务任务4.1.1使
27、用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n（5）出现如图出现如图4.6所示的所示的“配置配置Select语句语句”对话框，选中对话框，选中“列列”表框下的表框下的n“*”前的复选框。前的复选框。n图4.6 配置数据源4n第51页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n（6）单击单击“下一步下一步”按钮，出现如图按钮，出现如图4.7所示的对话框，单击【测试查询所示的对话框，单击【测试查询n】按钮，出现查询结果。单击【完成】按钮，配置数据源完成。】按钮，出现查询结果。单击【
28、完成】按钮，配置数据源完成。n图4.7 配置数据源5n第52页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息n（8）选择）选择4_1_1.aspx的【源】视图，其的【源】视图，其HTML代码如下。代码如下。n（9）在菜单栏中选择【调试】）在菜单栏中选择【调试】【开始执行（不调试）】选项，【开始执行（不调试）】选项，n弹出一个窗口，显示弹出一个窗口，显示4_1_1.aspx的运行结果，如图的运行结果，如图4.8所示。所示。图4.8 任务4.1.1运行结果1n第53页任务任务4.1.1使用使用SqlDataSource和和GridV
29、iew控件查询学生成绩信息控件查询学生成绩信息(10）设置网格视图的样式。）设置网格视图的样式。（11）在菜单栏中选择【调试】）在菜单栏中选择【调试】【开始执行（不调试）】选项，【开始执行（不调试）】选项，弹出一个窗口，显示弹出一个窗口，显示4_1_1.aspx的运行结果，如图的运行结果，如图4.9所示。所示。图4.9 任务4.1.1运行结果2n第54页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息（12）切换到）切换到“源源”模式进行修改，更多的改动可在属性窗口进行，模式进行修改，更多的改动可在属性窗口进行，如对如对Foote
30、rStyle的修改。如图的修改。如图4.10所示。所示。图4.10 页脚属性的修改n第55页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息（14）右击）右击GridView控件，选择控件，选择“属性属性”，在，在Columns属性的右侧单属性的右侧单击，进入如图击，进入如图4.11所示的字段操作对话框，在此对话框中可以修改列所示的字段操作对话框，在此对话框中可以修改列标题（标题（HeaderText）删除不需要的字段、调整列的顺序等。）删除不需要的字段、调整列的顺序等。图4.11“字段”对话框n第56页任务任务4.1.1使用使用
31、SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息（14）右击）右击GridView控件，选择控件，选择“属性属性”，在，在Columns属性的右侧单属性的右侧单击，进入如图击，进入如图4.11所示的字段操作对话框，在此对话框中可以修改列所示的字段操作对话框，在此对话框中可以修改列标题（标题（HeaderText）删除不需要的字段、调整列的顺序等。）删除不需要的字段、调整列的顺序等。n第57页任务任务4.1.1使用使用SqlDataSource和和GridView控件查询学生成绩信息控件查询学生成绩信息运行结果如图运行结果如图4.12所示。所示。图4.12
32、任务4.1.1运行结果3n第58页【知识准备】【知识准备】1.带控件参数的带控件参数的SqlDataSource2.控件参数的使用（控件参数的使用（ControlParameter）任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 n第59页【任务要求】【任务要求】（1）结合任务）结合任务4.1.1使用使用DropDownList控件查询学生成绩信息，其控件查询学生成绩信息，其“DropDownList中显示的数据字段中显示的数据字段”为学生的姓名（为学生的姓名（StuName）。）。（2）结合任务）结合任务4.1.1使用使用TextBox控件，
33、输入学生的姓名查询学生成控件，输入学生的姓名查询学生成绩信息。绩信息。【任务分析】【任务分析】（1）使用）使用DropDownList控件时，只需要设置控件时，只需要设置DropDownList绑定的绑定的数据源，特别关键的是数据源，特别关键的是DataTextField（显示的数据字段）为学生姓（显示的数据字段）为学生姓名（名（StuName）、）、DataValueField（DropDownList值选择的数值选择的数据字段）为学号（据字段）为学号（ID）两个属性。）两个属性。根据任务根据任务4.1.2（1）需要，为了实现任务目的，需要在窗体上增加）需要，为了实现任务目的，需要在窗体上增
34、加SqlDataSource控件、控件、GridView数据显示控件和数据显示控件和DropDownList选择控件，这些控件的属性设置如表选择控件，这些控件的属性设置如表4.10所示。所示。任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 n第60页【任务要求】【任务要求】（1）结合任务）结合任务4.1.1使用使用DropDownList控件查询学生成绩信息，其控件查询学生成绩信息，其“DropDownList中显示的数据字段中显示的数据字段”为学生的姓名（为学生的姓名（StuName）。）。（2）结合任务）结合任务4.1.1使用使用TextB
35、ox控件，输入学生的姓名查询学生成控件，输入学生的姓名查询学生成绩信息。绩信息。【任务分析】【任务分析】（1）使用）使用DropDownList控件时，只需要设置控件时，只需要设置DropDownList绑定的绑定的数据源，特别关键的是数据源，特别关键的是DataTextField（显示的数据字段）为学生姓（显示的数据字段）为学生姓名（名（StuName）、）、DataValueField（DropDownList值选择的数值选择的数据字段）为学号（据字段）为学号（ID）两个属性。）两个属性。根据任务根据任务4.1.2（1）需要，为了实现任务目的，需要在窗体上增加）需要，为了实现任务目的，需要
36、在窗体上增加SqlDataSource控件、控件、GridView数据显示控件和数据显示控件和DropDownList选择控件，这些控件的属性设置如表选择控件，这些控件的属性设置如表4.10所示。所示。任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 n第61页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 n第62页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 图4.13 任务4.1.2（1）运行结果n第63页任务4.1.2 使用带控件参数的S
37、qlDataSource和GridView控件查询学生成绩信息 n第64页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 图4.14 任务4.1.2（2）运行结果效果n第65页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息【操作步骤】【操作步骤】（2）在工具箱）在工具箱“数据数据”选项卡中，拖动两个选项卡中，拖动两个SqlDataSource控件、一个控件、一个DropDown控件到页面控件到页面“设计设计”视图上，根据任务视图上，根据任务4.1.1操作步骤配置其操作步骤配置其数据源。数据源。（
38、3）继续（）继续（2）出现如图）出现如图4.15所示的所示的“配置配置Select语句语句”对话框，选中对话框，选中“列列”列表框下的列列表框下的列“*”前的复选框。前的复选框。（4）绑定控件参数。单击）绑定控件参数。单击“WHERE”按钮，出现如图按钮，出现如图4.16所示的对话所示的对话框，配置框，配置Select语句，在语句，在“列列”下拉列表框选择下拉列表框选择“ID”；在；在“源源”下拉列表下拉列表框中选择框中选择“Control”；在；在“参数属性参数属性”的的“控件控件ID”下拉列表框中选择下拉列表框中选择“DropDownList1”；设置；设置“默认值默认值”为为1，单击，单
39、击“添加添加”按钮。按钮。n第66页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 绑定控件参数。单击绑定控件参数。单击“WHERE”按钮，出现如图按钮，出现如图4.16所示的对话框所示的对话框。图4.15 配置数据源1n第67页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息 绑定控件参数。单击绑定控件参数。单击“WHERE”按钮，出现如图按钮，出现如图4.16所示的对话框所示的对话框。图4.15 配置数据源1n第68页任务4.1.2 使用带控件参数的SqlDataSource和GridView
40、控件查询学生成绩信息 图4.16 配置数据源2n第69页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（5）单击）单击“确定确定”按钮，返回上一对话甚框，如图按钮，返回上一对话甚框，如图4.18所示，在所示，在SELECT语句列表框中出现如下代码：语句列表框中出现如下代码：图4.18 配置数据源43n第70页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（6）单击）单击“完成完成”按钮，配置按钮，配置SqlDataSource1数据源完成。数据源完成。（7）同样，配置）同样，配置SqlDataS
41、ource2数据的数据的SELECT语句列表框中出现语句列表框中出现如下代码。如下代码。SELECTID,StuNameFROMtblStuScore/注意此处仅有两个注意此处仅有两个列列ID，StuNamen第71页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（8）单击）单击“DropDownList1”右上角，选中右上角，选中“AutoPosBack”复选框，复选框，并选择并选择“配置数据源配置数据源”。图4.19 配置数据源54n第72页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（9
42、）右击）右击“GridView1”控件设置其控件设置其“DataSourceID”为为“SqlDataSource1”；设置；设置“DataKeyNames”（数据源中键字段列（数据源中键字段列表）为表）为“ID”。（10）选择）选择Web页面的页面的“源源”视图，其视图，其HTML代码如下。代码如下。n第73页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（9）右击）右击“GridView1”控件设置其控件设置其“DataSourceID”为为“SqlDataSource1”；设置；设置“DataKeyNames”（数据源中键字段列（数据源中
43、键字段列表）为表）为“ID”。（10）选择）选择Web页面的页面的“源源”视图，其视图，其HTML代码如下。代码如下。（11）在菜单栏中选择【调试】）在菜单栏中选择【调试】【开始执行（不调试）】选项，【开始执行（不调试）】选项，即弹出一个窗口，显示即弹出一个窗口，显示4_1_2_1.aspx的运行效果，如图的运行效果，如图4.13所示。所示。（12）选择）选择“解决方案资源管理器解决方案资源管理器”，右击鼠标，在弹出的快捷菜单中，右击鼠标，在弹出的快捷菜单中选择选择“添加新项添加新项”，弹出，弹出“添加新项添加新项”对话框，选择对话框，选择“Web窗体窗体”，输入名，输入名称为称为“4_1_2
44、_2”，产生新的页面视图，产生新的页面视图4_1_2_2.aspx。（13）在工具箱）在工具箱“数据数据”选项卡中，拖动一个选项卡中，拖动一个SqlDataSource控件、控件、一个一个TextBox控件、一个控件、一个Button按钮、一个按钮、一个Label标签控件到页面标签控件到页面“设计设计”视图上，根据任务视图上，根据任务4.1.1操作步骤配置其数据源。操作步骤配置其数据源。（n第74页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（14）继续步骤（）继续步骤（2）出现如图）出现如图4.14所示的所示的“配置配置Select语句语句
45、”对话框，对话框，选中选中“列列”列表框下的列表框下的“*”前的复选框。前的复选框。（15）绑定控件参数。单击）绑定控件参数。单击“WHERE”，出现如图，出现如图4.20所示的对话框所示的对话框，配置，配置Select语句，在语句，在“列列”下拉列表框选择下拉列表框选择“StuName”；在；在“源源”下拉下拉列表框中选择列表框中选择“源源”列表框选择列表框选择“Control”；在；在“参数属性参数属性”的的“控件控件ID”下拉列表框中选择下拉列表框中选择“TextBox1”；设置；设置“默认值默认值”为为“韦一笑韦一笑”，单击，单击“添加添加”按钮。按钮。n第75页任务4.1.2 使用带
46、控件参数的SqlDataSource和GridView控件查询学生成绩信息 图4.20 配置数据源5n第76页任务4.1.2 使用带控件参数的SqlDataSource和GridView控件查询学生成绩信息（16）单击）单击“确定确定”按钮，返回上一窗口，如图在按钮，返回上一窗口，如图在SELECT语句列表框中语句列表框中出现如下代码。出现如下代码。SELECTID,StuNameFROMtblStuScoreWHERE(StuName=StuName)（17）单击）单击“完成完成”按钮，配置按钮，配置SqlDataSource1数据源完成。数据源完成。（18）选择选择Web页面的页面的“源源
47、”视图，其视图，其HTML代码如下。代码如下。（20）在菜单栏中选择【调试】）在菜单栏中选择【调试】【开始执行（不调试）】选项，【开始执行（不调试）】选项，弹出一个窗口，显示弹出一个窗口，显示4_1_2_2.aspx的运行结果，如图的运行结果，如图4.14所示。所示。n第77页任务任务4.1.3使用使用GridView控件实现对学生成绩信息的修改、删除控件实现对学生成绩信息的修改、删除【知识准备】【知识准备】GridView控件编辑、更新、删除列控件编辑、更新、删除列图4.22 GridView编辑列“字段”对话框n第78页任务任务4.1.3使用使用GridView控件实现对学生成绩信息的修改
48、、删除控件实现对学生成绩信息的修改、删除【知识准备】【知识准备】GridView控件编辑、更新、删除列控件编辑、更新、删除列图4.22 GridView编辑列“字段”对话框n第79页任务任务4.1.3使用使用GridView控件实现对学生成绩信息的修改、删除控件实现对学生成绩信息的修改、删除【任务要求】【任务要求】用用GridView控件修改数据库控件修改数据库StuScore中学生成绩表中学生成绩表tblStuScore中中的数据。在任务的数据。在任务4.1.1基础上增加基础上增加“删除删除”、“编辑编辑”功能。功能。【任务分析】【任务分析】本任务是在任务本任务是在任务4.1.1基础上，实现
49、对学生成绩信息的删除、修改功能。基础上，实现对学生成绩信息的删除、修改功能。根据任务要求，需要在根据任务要求，需要在Web页面增加一个页面增加一个SqlDataSource控件控件、一、一个个GridView控件，其属性设置与说明如表控件，其属性设置与说明如表4.12所示。所示。n第80页任务任务4.1.3使用使用GridView控件实现对学生成绩信息的修改、删除控件实现对学生成绩信息的修改、删除【操作步骤】【操作步骤】（1）建立一个名为）建立一个名为4_1_3的网站。右击的网站。右击“解决方案资源管理器解决方案资源管理器”输入文件名输入文件名4_1_3.aspx。在在Default.aspx
50、页面的拖放一个页面的拖放一个SqlDataSource和和GridView控件，控件，并根据表并根据表4.12设置控件属性，千万别忘了设置设置控件属性，千万别忘了设置GridView的的DataSourceID=“SqlDataSource1”，并设置，并设置4_1_3.aspx的标题为的标题为“4_1_3.aspx”。（2）单击）单击GridView控件右上角的控件右上角的“智能标记智能标记”，选择，选择“启用排序启用排序”、“调用分页调用分页”、“启用选定内容启用选定内容”（可在（可在“字段字段”修改对话框中添加）。修改对话框中添加）。（3）右击）右击SqlDataSource1，在弹出的