WEB技術(shù)與應(yīng)用全套課件完整版ppt教學(xué)教程最新最全

1、項目一HTML標(biāo)記與HTML服務(wù)器控件操作 課程目標(biāo)1.理解C#基礎(chǔ)知識。2. 理解與掌握網(wǎng)頁的HTML標(biāo)記、HTML服務(wù)器標(biāo)記及使用方法。 項目一目標(biāo)任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 1. Microsoft.NET平臺概述2. .NET Framework框架簡介任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 3. ASP.NET的發(fā)展史4. ASP.NET優(yōu)勢5. ASP.NET的關(guān)鍵技術(shù)任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 6. ASP.NET程序的系統(tǒng)要求（1）IIS的安裝依次單擊【開始】【控制面板】【程序】，啟動“打開或關(guān)閉Windows功能”，出現(xiàn)“Windows組件向?qū)А?/p>

2、對話框，如圖1.2所示。 任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 圖1.2 IIS的安裝任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 【任務(wù)要求】 用C#編寫創(chuàng)建一個ASP.NET應(yīng)用程序項目，輸出一行“張小樓，310111班”，再輸出一行“這是我編寫的第一個網(wǎng)頁” ?！救蝿?wù)分析】任務(wù)背景。根據(jù)高職專業(yè)、班級設(shè)置情況，考慮本課程教學(xué)和學(xué)生英語水平實際需要，便于學(xué)生記憶，選擇三門必修課程為：語文、數(shù)學(xué)和外語（英語），使用分數(shù)表示，采用百分制；選擇兩門選修課程：物理、化學(xué)，采用等級制，分A、B、C、D、E（五級）。本單元中的任務(wù)都是建立在此基礎(chǔ)上創(chuàng)建的學(xué)生成績表作為講解的數(shù)據(jù)庫表。任務(wù)1.1 設(shè)計第

3、一個ASP.NET網(wǎng)站 任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 圖1.3 學(xué)生成績表（tblStuScore）中的數(shù)據(jù)任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 任務(wù)HTML代碼如下。 1_1.aspx 張小樓，310111班 /輸出一行字符 這是我編寫的第一個網(wǎng)頁!/*輸出一行字符*/ 任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 Default.aspx.cs代碼如下：using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.

4、Web.UI.WebControls;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e)/此處輸入頁面加載時的處理代碼 任務(wù)1.1 設(shè)計第一個ASP.NET網(wǎng)站 任務(wù)1.1運行效果圖：圖1.8 第一個網(wǎng)頁項目二Web服務(wù)器控件操作理解與掌握網(wǎng)頁的Web控件及使用方法。項目二目標(biāo)任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【知識準(zhǔn)備】 Web標(biāo)準(zhǔn)控件1. 標(biāo)簽（Label）2. 文本框（TextBox）3. 按鈕（Button）4. 單

5、選按鈕控件（RadioButton）和單選按鈕列表控件（RadioButtonList）5. 復(fù)選框（CheckBox）和復(fù)選列表框控件（CheckBoxList）6. 下拉列表（DropDownList）和列表框（ListBox）控件任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【任務(wù)要求】 綜合應(yīng)用HTML語言輸入一名學(xué)生的姓名、性別、三門必修課程（語文、數(shù)學(xué)和英語）成績和兩門選修課程（物理和化學(xué)）成績。（1）使用table表格定位一名學(xué)生考試成績信息；（2）使用RadioButton表示性別；（3）使用TextBox表示三門必修課程成績；（4）使用RadioButtonList表示兩

6、門選修課程（物理和化學(xué)）；（5）使用DropDownList表示學(xué)生的出生日期；（6）使用ListBox表示學(xué)生所在班級；（7）使用Label表示輸出的學(xué)生成績信息；（8）使用TextBox的TextMode=MultiLine表示備注信息；（9）使用Button表示輸出學(xué)生信息和重置按鈕。 任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【任務(wù)分析】根據(jù)表單元素要求，要求使用三個文本框，用來輸入三門必修課程成績；使用兩組單選按鈕，每組五個，分別表示物理和化學(xué)的A、B、C、D、E五個等級；需要兩組單選按鈕列表RadioButtonList，分別表示性別、物理與化學(xué)等級等。任務(wù)2.1 使用We

7、b常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【操作步驟】 HTML代碼：雙擊“輸出”按鈕，其代碼。運行效果如圖。 任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 圖2.9 2_1.aspx運行效結(jié)果任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表【知識準(zhǔn)備】Web其他標(biāo)準(zhǔn)控件1. Panel面板控件2. Calendar（日歷）控件3. 文件上傳控件（FileUpload） 【任務(wù)要求】（1）填寫一個學(xué)生信息，在Web頁面上增加一個復(fù)選框，其Text=“填寫一個學(xué)生信息”，當(dāng)不選中復(fù)選框時，關(guān)閉Panel面板；當(dāng)選中復(fù)選框時，顯示Panel面板，效果如圖2.11所示。圖2.11 2_2_01.aspx運行

8、效果(a)(b)任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表（2）在工具箱中拖放一個Calendar控件到Web頁面（“設(shè)計”視圖）上，當(dāng)選擇日期和月份時顯示效果如圖2.12所示。圖2.12 2_2_02.aspx運行效果(a)(b)任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表（3）利用文件上傳控件，根據(jù)需要可以上傳一名學(xué)生的照片到指定的服務(wù)器目錄下，其最終效果如圖2.13所示。圖2.13 2_2_03.aspx運行效果(a)(b)任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表【任務(wù)分析】（1）在工具箱上拖放在Panel控件、CheckBox控件，設(shè)置其屬性如表2.8所示。 任務(wù)2.

9、2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表【操作步驟】2_2_01.aspx的HTML代碼： 2_2_02.aspx的HTML代碼：2_2_03.aspx的HTML代碼：雙擊“上傳”按鈕，進入事件代碼編輯窗口，其代碼。 項目三Web驗證控件操作 理解與掌握Web驗證控件及使用方法。項目三目標(biāo)任務(wù)3.1 使用非空字段驗證控件操作學(xué)生成績表【知識準(zhǔn)備】1. 驗證控件概述（1）數(shù)據(jù)驗證性控件的分類（2）數(shù)據(jù)驗證性控件的通用屬性2. 非空字段驗證控件任務(wù)3.1 使用非空字段驗證控件操作學(xué)生成績表【任務(wù)要求】使用TextBox、RadioButton和ListBox三種控件，輸入一個學(xué)生的姓名、性別和班級

10、信息，驗證其是否為空?！救蝿?wù)分析】本任務(wù)為了更好地定位各個控件，使用了一個Table。各個控件的屬性表3.4所示。任務(wù)3.1 使用非空字段驗證控件操作學(xué)生成績表任務(wù)3.1 使用非空字段驗證控件操作學(xué)生成績表【操作步驟】其HTML代碼如下。雙擊“提交”按鈕，進入事件代碼編輯窗口，輸入如下代碼。運行效果如下圖。 圖3.1 3_1.aspx運行結(jié)果(a)(b)任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【任務(wù)要求】 綜合應(yīng)用HTML語言輸入一名學(xué)生的姓名、性別、三門必修課程（語文、數(shù)學(xué)和英語）成績和兩門選修課程（物理和化學(xué)）成績。（1）使用table表格定位一名學(xué)生考試成績信息；（2）使用Ra

11、dioButton表示性別；（3）使用TextBox表示三門必修課程成績；（4）使用RadioButtonList表示兩門選修課程（物理和化學(xué)）；（5）使用DropDownList表示學(xué)生的出生日期；（6）使用ListBox表示學(xué)生所在班級；（7）使用Label表示輸出的學(xué)生成績信息；（8）使用TextBox的TextMode=MultiLine表示備注信息；（9）使用Button表示輸出學(xué)生信息和重置按鈕。 任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【任務(wù)分析】根據(jù)表單元素要求，要求使用三個文本框，用來輸入三門必修課程成績；使用兩組單選按鈕，每組五個，分別表示物理和化學(xué)的A、B、C、

12、D、E五個等級；需要兩組單選按鈕列表RadioButtonList，分別表示性別、物理與化學(xué)等級等。任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 【操作步驟】 HTML代碼：雙擊“輸出”按鈕，其代碼。運行效果如圖。 任務(wù)2.1 使用Web常用標(biāo)準(zhǔn)控件操作學(xué)生成績表 圖2.9 2_1.aspx運行效結(jié)果任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表【知識準(zhǔn)備】Web其他標(biāo)準(zhǔn)控件1. Panel面板控件2. Calendar（日歷）控件3. 文件上傳控件（FileUpload） 【任務(wù)要求】（1）填寫一個學(xué)生信息，在Web頁面上增加一個復(fù)選框，其Text=“填寫一個學(xué)生信息”，當(dāng)不選中復(fù)選框

13、時，關(guān)閉Panel面板；當(dāng)選中復(fù)選框時，顯示Panel面板，效果如圖2.11所示。圖2.11 2_2_01.aspx運行效果(a)(b)任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表（2）在工具箱中拖放一個Calendar控件到Web頁面（“設(shè)計”視圖）上，當(dāng)選擇日期和月份時顯示效果如圖2.12所示。圖2.12 2_2_02.aspx運行效果(a)(b)任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表（3）利用文件上傳控件，根據(jù)需要可以上傳一名學(xué)生的照片到指定的服務(wù)器目錄下，其最終效果如圖2.13所示。圖2.13 2_2_03.aspx運行效果(a)(b)任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操

14、作學(xué)生成績表【任務(wù)分析】（1）在工具箱上拖放在Panel控件、CheckBox控件，設(shè)置其屬性如表2.8所示。 任務(wù)2.2 使用Web其他標(biāo)準(zhǔn)控件操作學(xué)生成績表【操作步驟】2_2_01.aspx的HTML代碼： 2_2_02.aspx的HTML代碼：2_2_03.aspx的HTML代碼：雙擊“上傳”按鈕，進入事件代碼編輯窗口，其代碼。 項目四 ADO.NET組件和Web數(shù)據(jù)控件 理解與掌握SqlDataSource數(shù)據(jù)源控件、Web數(shù)據(jù)控件及其使用方法。項目四目標(biāo)任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息【知識準(zhǔn)備】1. ADO.NET對象和GridV

15、iew控件其語法結(jié)構(gòu)如下。（1）創(chuàng)建學(xué)生成績表（2）ADO.NET對象模型知識任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息2. SQL Server .NET的ADO.NET對象的屬性和方法（1）SqlConnection類（2）SqlCommand類（3）SqlDataReader類（4）SqlDataAdapter類3. SqlDataSource數(shù)據(jù)源控件4. GridView控件任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息【任務(wù)要求】用網(wǎng)格視圖GridView控件顯示數(shù)據(jù)庫StuScore.mdf中學(xué)生成績

16、表（tblStuScore）中數(shù)據(jù)。要求顯示所有記錄中的部分列，列標(biāo)題應(yīng)為中文，能選擇某條記錄，記錄奇偶行和選擇行的背景不同，能單擊某個顯示列后按該列進行排序?！救蝿?wù)分析】數(shù)據(jù)源采用SqlDataSource類型，雖然可以通過修改Select語句實現(xiàn)部分列的選擇、列標(biāo)題應(yīng)為中文以及排序，因為網(wǎng)格視圖控件GridView提供了方便這些操作的功能，所以在本任務(wù)中，只通過操作網(wǎng)格視圖控件GridView完成這個任務(wù)。根據(jù)任務(wù)需要，為了實現(xiàn)任務(wù)目的，需要在窗體上增加SqlDataSource控件、GridView數(shù)據(jù)顯示控件，這些控件的屬性設(shè)置如表4.9所示。任務(wù)4.1.1 使用SqlDataSour

17、ce和GridView控件查詢學(xué)生成績信息任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息【操作步驟】在工具箱“數(shù)據(jù)”選項卡中，拖動SqlDataSource到頁面“設(shè)計”視圖上，出現(xiàn)如圖4.3所示的界面。 圖4.3 配置數(shù)據(jù)源1任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（3）單擊“配置數(shù)據(jù)源”出現(xiàn)如圖4.4所示的對話框。圖4.4 配置數(shù)據(jù)源2任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（4）單擊“新建連接”按鈕，出現(xiàn)如圖4.5所示的“添加連接”對話框。 圖4.5 配置數(shù)據(jù)源3

18、任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（5）出現(xiàn)如圖4.6所示的“配置Select語句”對話框，選中“列”表框下的“*”前的復(fù)選框。圖4.6 配置數(shù)據(jù)源4任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（6）單擊“下一步”按鈕，出現(xiàn)如圖4.7所示的對話框，單擊【測試查詢】按鈕，出現(xiàn)查詢結(jié)果。單擊【完成】按鈕，配置數(shù)據(jù)源完成。 圖4.7 配置數(shù)據(jù)源5任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（8）選擇4_1_1.aspx的【源】視圖，其HTML代碼如下。（9）在菜單欄中選擇

19、【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示4_1_1.aspx的運行結(jié)果，如圖4.8所示。 圖4.8 任務(wù)4.1.1運行結(jié)果1任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息(10）設(shè)置網(wǎng)格視圖的樣式。（11）在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示4_1_1.aspx的運行結(jié)果，如圖4.9所示。 圖4.9 任務(wù)4.1.1運行結(jié)果2任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（12）切換到“源”模式進行修改，更多的改動可在屬性窗口進行，如對FooterStyle的修改。如圖4.1

20、0所示。圖4.10 頁腳屬性的修改任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（14）右擊GridView控件，選擇“屬性”，在Columns屬性的右側(cè)單擊，進入如圖4.11所示的字段操作對話框，在此對話框中可以修改列標(biāo)題（HeaderText）刪除不需要的字段、調(diào)整列的順序等。圖4.11 “字段”對話框任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息（14）右擊GridView控件，選擇“屬性”，在Columns屬性的右側(cè)單擊，進入如圖4.11所示的字段操作對話框，在此對話框中可以修改列標(biāo)題（HeaderText）刪

21、除不需要的字段、調(diào)整列的順序等。任務(wù)4.1.1 使用SqlDataSource和GridView控件查詢學(xué)生成績信息運行結(jié)果如圖4.12所示。 圖4.12 任務(wù)4.1.1運行結(jié)果3【知識準(zhǔn)備】1. 帶控件參數(shù)的SqlDataSource2. 控件參數(shù)的使用（ControlParameter）任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 【任務(wù)要求】（1）結(jié)合任務(wù)4.1.1使用DropDownList控件查詢學(xué)生成績信息，其“DropDownList中顯示的數(shù)據(jù)字段”為學(xué)生的姓名（StuName）。（2）結(jié)合任務(wù)4.1.1使用TextBox控件

22、，輸入學(xué)生的姓名查詢學(xué)生成績信息?！救蝿?wù)分析】（1）使用DropDownList控件時，只需要設(shè)置DropDownList綁定的數(shù)據(jù)源，特別關(guān)鍵的是DataTextField（顯示的數(shù)據(jù)字段）為學(xué)生姓名（StuName）、 DataValueField（DropDownList值選擇的數(shù)據(jù)字段）為學(xué)號（ID）兩個屬性。根據(jù)任務(wù)4.1.2（1）需要，為了實現(xiàn)任務(wù)目的，需要在窗體上增加SqlDataSource控件、GridView數(shù)據(jù)顯示控件和DropDownList選擇控件，這些控件的屬性設(shè)置如表4.10所示。任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢

23、學(xué)生成績信息 【任務(wù)要求】（1）結(jié)合任務(wù)4.1.1使用DropDownList控件查詢學(xué)生成績信息，其“DropDownList中顯示的數(shù)據(jù)字段”為學(xué)生的姓名（StuName）。（2）結(jié)合任務(wù)4.1.1使用TextBox控件，輸入學(xué)生的姓名查詢學(xué)生成績信息?！救蝿?wù)分析】（1）使用DropDownList控件時，只需要設(shè)置DropDownList綁定的數(shù)據(jù)源，特別關(guān)鍵的是DataTextField（顯示的數(shù)據(jù)字段）為學(xué)生姓名（StuName）、 DataValueField（DropDownList值選擇的數(shù)據(jù)字段）為學(xué)號（ID）兩個屬性。根據(jù)任務(wù)4.1.2（1）需要，為了實現(xiàn)任務(wù)目的，需要在窗

24、體上增加SqlDataSource控件、GridView數(shù)據(jù)顯示控件和DropDownList選擇控件，這些控件的屬性設(shè)置如表4.10所示。任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 圖4.13 任務(wù)4.1.2（1）運行結(jié)果任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 任務(wù)4.1.2 使用帶控件參

25、數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 圖4.14 任務(wù)4.1.2（2）運行結(jié)果效果任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 【操作步驟】（2）在工具箱“數(shù)據(jù)”選項卡中，拖動兩個SqlDataSource控件、一個DropDown控件到頁面“設(shè)計”視圖上，根據(jù)任務(wù)4.1.1操作步驟配置其數(shù)據(jù)源。（3）繼續(xù)（2）出現(xiàn)如圖4.15所示的“配置Select語句”對話框，選中“列”列表框下的列“*”前的復(fù)選框。（4）綁定控件參數(shù)。單擊“WHERE”按鈕，出現(xiàn)如圖4.16所示的對話框，配置Select語句，在“列”下拉

26、列表框選擇“ID”；在“源”下拉列表框中選擇“Control”；在“參數(shù)屬性”的“控件ID”下拉列表框中選擇“DropDownList1”；設(shè)置“默認值”為1，單擊“添加”按鈕。任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 綁定控件參數(shù)。單擊“WHERE”按鈕，出現(xiàn)如圖4.16所示的對話框 。圖4.15 配置數(shù)據(jù)源1任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 綁定控件參數(shù)。單擊“WHERE”按鈕，出現(xiàn)如圖4.16所示的對話框 。圖4.15 配置數(shù)據(jù)源1任務(wù)4.1.2 使用帶控件參數(shù)的Sql

27、DataSource和GridView控件查詢學(xué)生成績信息 圖4.16 配置數(shù)據(jù)源2任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （5）單擊“確定”按鈕，返回上一對話甚框，如圖4.18所示，在SELECT語句列表框中出現(xiàn)如下代碼：圖4.18 配置數(shù)據(jù)源43任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （6）單擊 “完成”按鈕，配置SqlDataSource1數(shù)據(jù)源完成。（7）同樣，配置SqlDataSource2數(shù)據(jù)的SELECT語句列表框中出現(xiàn)如下代碼。SELECT ID,StuName

28、FROM tblStuScore /注意此處僅有兩個列ID，StuName任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （8）單擊“DropDownList1”右上角，選中“AutoPosBack”復(fù)選框，并選擇“配置數(shù)據(jù)源”。 圖4.19 配置數(shù)據(jù)源54任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （9）右擊“GridView1”控件設(shè)置其“DataSourceID”為“SqlDataSource1”；設(shè)置“DataKeyNames” （數(shù)據(jù)源中鍵字段列表）為“ID”。（10）選擇Web頁

29、面的“源”視圖，其HTML代碼如下。任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （9）右擊“GridView1”控件設(shè)置其“DataSourceID”為“SqlDataSource1”；設(shè)置“DataKeyNames” （數(shù)據(jù)源中鍵字段列表）為“ID”。（10）選擇Web頁面的“源”視圖，其HTML代碼如下。（11）在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，即彈出一個窗口，顯示4_1_2_1.aspx的運行效果，如圖4.13所示。（12）選擇“解決方案資源管理器”，右擊鼠標(biāo)，在彈出的快捷菜單中選擇“添加新項”，彈出“添加新項”對話框

30、，選擇“Web窗體”，輸入名稱為“4_1_2_2”，產(chǎn)生新的頁面視圖4_1_2_2.aspx。（13）在工具箱“數(shù)據(jù)”選項卡中，拖動一個SqlDataSource控件、一個TextBox控件、一個Button按鈕、一個Label標(biāo)簽控件到頁面“設(shè)計”視圖上，根據(jù)任務(wù)4.1.1操作步驟配置其數(shù)據(jù)源。（任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （14）繼續(xù)步驟（2）出現(xiàn)如圖4.14所示的“配置Select語句”對話框，選中“列”列表框下的“*”前的復(fù)選框。（15）綁定控件參數(shù)。單擊“WHERE”，出現(xiàn)如圖4.20所示的對話框，配置Select

31、語句，在“列”下拉列表框選擇“StuName”；在“源”下拉列表框中選擇“源”列表框選擇“Control”；在“參數(shù)屬性”的“控件ID”下拉列表框中選擇“TextBox1”；設(shè)置“默認值”為“韋一笑”，單擊“添加”按鈕。任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 圖4.20 配置數(shù)據(jù)源5任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （16）單擊“確定”按鈕，返回上一窗口，如圖在SELECT語句列表框中出現(xiàn)如下代碼。SELECT ID,StuName FROM tblStuScore WHE

32、RE (StuName = StuName)（17）單擊“完成”按鈕，配置SqlDataSource1數(shù)據(jù)源完成。（18）選擇Web頁面的“源”視圖，其HTML代碼如下。（20）在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示4_1_2_2.aspx的運行結(jié)果，如圖4.14所示。任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除【知識準(zhǔn)備】 GridView控件編輯、更新、刪除列圖4.22 GridView編輯列“字段”對話框任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除【知識準(zhǔn)備】 GridView控件編輯、更新、刪除列圖4.2

33、2 GridView編輯列“字段”對話框任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除【任務(wù)要求】用GridView控件修改數(shù)據(jù)庫StuScore中學(xué)生成績表tblStuScore中的數(shù)據(jù)。在任務(wù)4.1.1基礎(chǔ)上增加“刪除”、“編輯”功能?！救蝿?wù)分析】本任務(wù)是在任務(wù)4.1.1基礎(chǔ)上，實現(xiàn)對學(xué)生成績信息的刪除、修改功能。根據(jù)任務(wù)要求，需要在Web頁面增加一個SqlDataSource控件 、一個GridView控件，其屬性設(shè)置與說明如表4.12所示。任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除【操作步驟】（1）建立一個名為4_1_3的網(wǎng)站。右擊“

34、解決方案資源管理器” 輸入文件名4_1_3.aspx。在Default.aspx頁面的拖放一個SqlDataSource和GridView控件，并根據(jù)表4.12設(shè)置控件屬性，千萬別忘了設(shè)置GridView的DataSourceID=“SqlDataSource1”，并設(shè)置4_1_3.aspx的標(biāo)題為“4_1_3.aspx”。（2）單擊GridView控件右上角的“智能標(biāo)記”，選擇“啟用排序”、“調(diào)用分頁”、“啟用選定內(nèi)容”（可在“字段”修改對話框中添加）。（3）右擊SqlDataSource1，在彈出的快捷菜單國選擇“屬性”，彈出“屬性”對話框，選擇“DeleteQuery”，單擊其右側(cè)的按鈕

35、，彈出“命令和參數(shù)編輯器”對話框，在“DELETE命令”文本框中輸入如下代碼。delete from tblStuScore where ID=ID任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除圖4.24 添加“編輯”、“刪除”和“選擇”按鈕的GridView設(shè)計界面任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除（6）測試頁面。在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示4_1_3.aspx的運行結(jié)果，單擊“編輯”鏈接按鈕，如圖4.25所示（部分內(nèi)容）。圖4.25 GridView運行時的“編輯”狀態(tài)任務(wù)4.1.3 使用G

36、ridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除（7）單擊“源”視圖，其HTML代碼如下。任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入【知識準(zhǔn)備】GridView控件插入列GridView控件不允許用戶插入新記錄。這種情況下開發(fā)人員經(jīng)常使用如下的技術(shù)增加新記錄。（1）在GridView的下面放置一個DetailsView控件。 用戶可以通過DetailsView增加新記錄，然后這條新記錄就會顯示在GridView里。（2）通過一個超鏈接使用戶連接到另一個使用DetailsView增加新記錄的web form。 一旦記錄被添加后就會返回之前的頁。任務(wù)4.1.4 使用GridV

37、iew控件實現(xiàn)對學(xué)生成績信息的插入【任務(wù)要求】使用GridView的頁腳模板，在頁腳模板上增加可編輯控件和鏈接按鈕，實現(xiàn)插入學(xué)生成績記錄?！救蝿?wù)分析】根據(jù)任務(wù)要求，需要在Web頁面增加一個SqlDataSourc控件e 、一個GridView控件，在模板列中增加多個LinkButton按鈕，用于實現(xiàn)“插入”、“刪除”、“更新”、“編輯”和“取消”操作，其屬性設(shè)置與說明如表4.13所示。任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入圖4.26 任務(wù)4.1.4 插入記錄前圖4.27 任務(wù)4.1.4 插入記錄后任務(wù)4.

38、1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入【操作步驟】（1）創(chuàng)建一個網(wǎng)站，名稱為“4_1_4”。右擊“解決方案資源管理器”中輸入文件名4_1_4.aspx。在4_1_4.aspx頁面拖放一個SqlDataSource和GridView控件，并根據(jù)表4.13設(shè)置控件屬性，千萬別忘了設(shè)置GridView的DataSourceID=“SqlDataSource1”，并設(shè)置4_1_4.aspx 的標(biāo)題為“4_1_4.aspx”。（2）單擊GridView控件右上角的“智能標(biāo)記”，選擇“啟用排序”、“調(diào)用分頁”、“啟用選定內(nèi)容”（可在字段修改對話框中添加）。（3）右擊SqlDataSour

39、ce1，在彈出的快捷菜單中選擇“屬性”，進入“屬性”窗口，選擇“DeleteQuery”，單擊其右側(cè)的按鈕，進入“命令和參數(shù)編輯器”對話框，在“DELETE”文本框中輸入如下代碼。delete from tblStuScore where ID=ID任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入（4）右擊SqlDataSource1，在彈出的快捷菜單中選擇“屬性”，進入“屬性”窗口，選擇“InsertQuery”，單擊其右側(cè)的按鈕，進入“命令和參數(shù)編輯器”對話框，在“INSERT”文本框中輸入如下代碼。Insert tblStuScore(StuNo,stuName,StuS

40、ex,IdentityID,Chinese,Maths,English,Physical,Chemical,Term,ClassID)values(StuNO,StuName,StuSex,IdentityID,Chinese,Maths,English,Physical,Chemical,Term,ClassID)（5）同樣設(shè)置“SelectQuery”的內(nèi)容。SelectCommand=”select * from tblStuScore”任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入（6）設(shè)置GridView控件“自動套用格式”為“彩色型”，啟用編輯、啟用刪除，將編輯、

41、刪除按鈕移動到最右列。圖4.28 任務(wù)4.1.4 模板列的編輯任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)生成績信息的插入（7）編寫GridView的RowCommand事件處理方法，RowCommand事件是在單擊某行時產(chǎn)生的。右擊GridView，在彈出的快捷菜單中選擇“屬性”，彈出“屬性”窗口，在事件RowCommand右側(cè)的空白處雙擊。GridView控件的RowCommand事件的方法代碼如下。protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) if (e.CommandNa

42、me = Insert) SqlDataSource1.InsertParametersStuNo.DefaultValue = (GridView1.FooterRow.FindControl(txtStuNo) as TextBox).Text; /省略類似代碼 SqlDataSource1.InsertParametersClassID.DefaultValue = (GridView1.FooterRow.FindControl(txtClassID) as TextBox).Text; SqlDataSource1.Insert(); 任務(wù)4.1.4 使用GridView控件實現(xiàn)對學(xué)

43、生成績信息的插入（8）右擊GridView，在彈出的快捷菜單中選擇“屬性”，進入“屬性”屬性窗口，選擇“DataKeyNames”，設(shè)置其值為“ID”。（9）根據(jù)表4.13設(shè)置相應(yīng)鏈接按鈕的CommandName的值分別為“Update”、“Edit”、“Delete”、“Insert”、“Cancel” （10）選擇“源”視圖，其HTML代碼如下。任務(wù)4.1.3 使用GridView控件實現(xiàn)對學(xué)生成績信息的修改、刪除（4）啟用“刪除”和“更新”功能。右擊GridView控件右上角的“智能標(biāo)記”，選擇“編輯列”選項，進入如圖4.11所示的“字段”編輯對話框。進行相應(yīng)的操作，即可完成。(5)右擊

44、GridView，選擇“自動套用格式”中“彩色型”。添加“編輯”、“刪除”和“選擇”按鈕后的GridView，如圖4.24所示。圖4.23 “命令和參數(shù)編輯器”對話框任務(wù)4.1.2 使用帶控件參數(shù)的SqlDataSource和GridView控件查詢學(xué)生成績信息 （8）單擊“DropDownList1”右上角，選中“AutoPosBack”復(fù)選框，并選擇“配置數(shù)據(jù)源”。 圖4.19 配置數(shù)據(jù)源54任務(wù)3.4使用數(shù)據(jù)范圍驗證控件操作學(xué)生成績表 【任務(wù)要求】 使用TextBox控件，輸入一個學(xué)生的姓名，要求非空，語文、數(shù)學(xué)和英語成績必須大于等于0，小于等于100，物理和化學(xué)等級為AE五個等級。 【

45、任務(wù)分析】本任務(wù)為了更好地定位各個控件，使用了一個Table。各個控件的屬性表3.7所示。任務(wù)3.4使用數(shù)據(jù)范圍驗證控件操作學(xué)生成績表 【任務(wù)要求】 使用TextBox控件，輸入一個學(xué)生的姓名，要求非空，語文、數(shù)學(xué)和英語成績必須大于等于0，小于等于100，物理和化學(xué)等級為AE五個等級。 【任務(wù)分析】本任務(wù)為了更好地定位各個控件，使用了一個Table。各個控件的屬性表3.7所示。任務(wù)3.4使用數(shù)據(jù)范圍驗證控件操作學(xué)生成績表 【操作步驟】 HTML代碼。 雙擊“提交”按鈕，進入事件代碼編輯窗口，其代碼。protected void Button1_Click(object sender, Even

46、tArgs e) Label1.Text = 頁面已經(jīng)通過驗證; 任務(wù)3.4使用數(shù)據(jù)范圍驗證控件操作學(xué)生成績表 運行效果如圖。圖3.4 3_4.aspx運行效果【操作步驟】其HTML代碼如下。雙擊“提交”按鈕，進入事件代碼編輯窗口，輸入如下代碼。運行效果如下圖。 圖3.1 3_1.aspx運行結(jié)果(a)(b)任務(wù)3.4使用數(shù)據(jù)范圍驗證控件操作學(xué)生成績表 項目五 ADO.NET對象和Web數(shù)據(jù)控件操作 理解與掌握ADO.NET控件、對象及使用方法。項目五目標(biāo)任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息【知識準(zhǔn)備】1. ADO.NET對象和Web數(shù)據(jù)控件在任務(wù)4.1.1

47、中我們已經(jīng)詳細介紹了ADO.NET的各個對象（以SQL Server為例）：（1）SqlConnection：數(shù)據(jù)庫連接對象。（2）SqlCommand：SQL命令對象。（3）SqlDataReader：SQL數(shù)據(jù)只讀對象。（4）DataSet：數(shù)據(jù)集對象。（5）SqlDataAdapter：數(shù)據(jù)適配器對象。詳細介紹見項目四任務(wù)4.1.1。2. 使用Web.Config文件定義數(shù)據(jù)庫連接串任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息【知識準(zhǔn)備】1. ADO.NET對象和Web數(shù)據(jù)控件在任務(wù)4.1.1中我們已經(jīng)詳細介紹了ADO.NET的各個對象（以SQL Server

48、為例）：（1）SqlConnection：數(shù)據(jù)庫連接對象。（2）SqlCommand：SQL命令對象。（3）SqlDataReader：SQL數(shù)據(jù)只讀對象。（4）DataSet：數(shù)據(jù)集對象。（5）SqlDataAdapter：數(shù)據(jù)適配器對象。詳細介紹見項目四任務(wù)4.1.1。2. 使用Web.Config文件定義數(shù)據(jù)庫連接串任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息 /一種連接串 /另一種連接串 /connectionStrings 任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息 /一種連接串 /另一種連接串 /connectionStri

49、ngs 任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息【任務(wù)要求】（1）使用ADO.NET對象、GridView控件，分頁顯示學(xué)生成績信息。（2）自定義分頁導(dǎo)航，分頁顯示學(xué)生成績信息。（3）使用ADO.NET對象、GridView控件、DropDownList控件，不采用分頁顯示學(xué)生成績信息?！救蝿?wù)分析】（1）首先要在Web.Config配置文件中增加數(shù)據(jù)連接串，具體方法見知識準(zhǔn)備。（2）本任務(wù)使用到SqlConnection、SqlDataAdpateer、DataSet，也可使用SqlDataReader（用于不分頁GridView）、Sqlcommand等對象。

50、（3）要求使用DropDownList控件、GridView控件。（4）在任務(wù)5.1（2）中要求自定義分頁導(dǎo)航，其自定義的分頁也要求GridView的AllowPaging屬性設(shè)置為True，可設(shè)置PageSize=5。自定義分頁可以在PagerTemplate中定義，其代碼如下。任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息【任務(wù)要求】（1）使用ADO.NET對象、GridView控件，分頁顯示學(xué)生成績信息。（2）自定義分頁導(dǎo)航，分頁顯示學(xué)生成績信息。（3）使用ADO.NET對象、GridView控件、DropDownList控件，不采用分頁顯示學(xué)生成績信息?！救蝿?wù)

51、分析】（1）首先要在Web.Config配置文件中增加數(shù)據(jù)連接串，具體方法見知識準(zhǔn)備。（2）本任務(wù)使用到SqlConnection、SqlDataAdpateer、DataSet，也可使用SqlDataReader（用于不分頁GridView）、Sqlcommand等對象。（3）要求使用DropDownList控件、GridView控件。（4）在任務(wù)5.1（2）中要求自定義分頁導(dǎo)航，其自定義的分頁也要求GridView的AllowPaging屬性設(shè)置為True，可設(shè)置PageSize=5。自定義分頁可以在PagerTemplate中定義，其代碼如下（超鏈接）。任務(wù)5.1 使用ADO.NET對象

52、和GridView控件查詢學(xué)生成績信息圖5.1 任務(wù)5.1（1）執(zhí)行結(jié)果圖5.2 任務(wù)5.1（2）執(zhí)行結(jié)果任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息圖5.3 任務(wù)5.1（3）執(zhí)行結(jié)果任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息【操作步驟】（1）創(chuàng)建一個名為5_1的網(wǎng)站，添加一個Web窗體Default.aspx，修改Default.aspx名稱為5_1_1.aspx，設(shè)置其標(biāo)題5_1_1.aspx（可以不設(shè)），拖動一個GridView到Web頁面上，右擊其右上角“智能標(biāo)記”，選擇“編輯列”，彈出字段”編輯對話框，如圖5.4所示。圖5.4

53、 GridView“字段”編輯列窗口對話框任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息（2）右擊GridView，選擇“自動套用格式”為“彩色型”，并在其屬性窗口中設(shè)置如下屬性值。AllowPaging=“True”PageSize=5任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息（2）右擊GridView，選擇“自動套用格式”為“彩色型”，并在其屬性窗口中設(shè)置如下屬性值。AllowPaging=“True”PageSize=5（3）雙擊Web頁面，進入Page_Load()事件編碼窗口，輸入如下代碼（超鏈接）。（4）在GridView屬性

54、窗口，選擇事件PageIndexChanging，雙擊該事件右邊空白處，彈出該事件代碼編輯窗口，輸入如下代碼。protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e) GridView1.PageIndex = e.NewPageIndex; GridView1.DataBind();任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息（5）選擇【源】視圖，其HTML代碼如下（超鏈接）。（6）測試頁面。在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯

55、示5_1_1.aspx的運行結(jié)果如圖5.1所示。（7）在“解決方案資源管理器”右擊項目，在彈出的快捷菜單中選擇“添加新項”，添加一個名為5_1_2.aspx的Web窗體，同步驟（1）到（4）相同。（8）點擊GridView右上角“智能標(biāo)記”，選擇“編輯模板”，選擇PagerTempLate模板，如圖5.5所示。圖5.5 編輯PagerTemplate模板任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息（9）選擇【源】視圖，其HTML代碼如下（超鏈接）。（9）測試頁面。在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示5_1_2.aspx的運行結(jié)果如圖5

56、.2所示。（10）在“解決方案資源管理器”右擊項目，在彈出的快捷菜單中選擇“添加新項”，添加一個名為5_1_3.aspx的窗體，拖放一個table標(biāo)記，設(shè)置成兩行一列，復(fù)制5_1_3.aspx中的GridView1到表格第2行，設(shè)置AllowPaging=false；如5_1_2.aspx一樣建立PagerTemplate。（12）在table的第一行輸入“請選擇班級”，拖放一個DropDownList控件到該文本的右側(cè)。（13）自定義一個方法InitBind()，在Page_Load（）事件（方法）中調(diào)用InitBind()實現(xiàn)頁面載入的初始化，其代碼如下代碼（超鏈接）。（含class _5

57、_1_3：System.Web.UI.Page代碼） 任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息（10）選擇【源】視圖，其HTML代碼如下（超鏈接）。（11）測試頁面。在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示5_1_2.aspx的運行結(jié)果如圖5.2所示。（12）在“解決方案資源管理器”右擊項目，在彈出的快捷菜單中選擇“添加新項”，添加一個名為5_1_3.aspx的窗體，拖放一個table標(biāo)記，設(shè)置成兩行一列，復(fù)制5_1_3.aspx中的GridView1到表格第2行，設(shè)置AllowPaging=false；如5_1_2.aspx一樣建立

58、PagerTemplate。（13）在table的第一行輸入“請選擇班級”，拖放一個DropDownList控件到該文本的右側(cè)。（14）自定義一個方法InitBind()，在Page_Load（）事件（方法）中調(diào)用InitBind()實現(xiàn)頁面載入的初始化，其代碼如下代碼（超鏈接）。（含class _5_1_3：System.Web.UI.Page代碼） 任務(wù)5.1 使用ADO.NET對象和GridView控件查詢學(xué)生成績信息（15）在GridView1_PageIndexChanging()事件中輸入如下代碼，以實現(xiàn)頁面導(dǎo)航時刷新頁面信息。protected void GridView1_Pa

59、geIndexChanging(object sender, GridViewPageEventArgs e) GridView1.PageIndex = e.NewPageIndex; InitBind1(); （16）測試頁面。在菜單欄中選擇【調(diào)試】【開始執(zhí)行（不調(diào)試）】選項，彈出一個窗口，顯示5_1_3.aspx的運行結(jié)果，如圖5.3所示。任務(wù)5.2 使用ADO.NET對象和GridView控件刪除、更新學(xué)生成績信息【知識準(zhǔn)備】向GridView控件中添加編輯列、刪除列是很簡單的操作，這在任務(wù)5.1中已經(jīng)介紹了，這里就不再贅述了?！救蝿?wù)要求】用GridView控件修改數(shù)據(jù)庫StuScor

60、e中學(xué)生成績表tblStuScore中數(shù)據(jù)。在任務(wù)3.1基礎(chǔ)上增加“刪除”、“編輯”功能，要求刪除時給出確認提示框。任務(wù)5.2 使用ADO.NET對象和GridView控件刪除、更新學(xué)生成績信息【任務(wù)分析】（1）首先要在Web.Config配置文件中增加數(shù)據(jù)連接串，具體方法見知識準(zhǔn)備。（2）本任務(wù)用到SqlConnection、SqlDataAdpateer、DataSet，也可使用SqlDataReader（用于不分頁GridView）、Sqlcommand等對象。（3）分頁要求GridView的AllowPaging屬性設(shè)置為True，可設(shè)置PageSize=5。（4）在任務(wù)4.2的更新、