第9章 .NET 2.0項(xiàng)目開發(fā)實(shí)踐

網(wǎng)頁設(shè)計(jì)與ASP技術(shù)

第9章ASP.NET2.0項(xiàng)目開發(fā)實(shí)踐9.1系統(tǒng)總體設(shè)計(jì)9.2任務(wù)一：創(chuàng)建連接和導(dǎo)航頁9.3任務(wù)二：學(xué)生信息查詢9.4任務(wù)三：學(xué)生成績查詢9.5任務(wù)四：學(xué)生信息更新9.6任務(wù)五：學(xué)生成績錄入9.1系統(tǒng)總體設(shè)計(jì)9.1.1

功能模塊設(shè)計(jì)一個(gè)完善的學(xué)生成績管理系統(tǒng)應(yīng)當(dāng)具有許多功能模塊，本章著重實(shí)現(xiàn)其中的幾個(gè)主要模塊。該學(xué)生成績管理系統(tǒng)包含的模塊分別是學(xué)生信息查詢；學(xué)生成績查詢；學(xué)生信息修改；學(xué)生成績錄入。通過導(dǎo)航頁的超鏈接可以跳轉(zhuǎn)到相應(yīng)的功能頁面。為了使講解更具條理，將該系統(tǒng)分解為多個(gè)任務(wù)模塊，在每個(gè)任務(wù)模塊中實(shí)現(xiàn)系統(tǒng)的部分內(nèi)容。以下分別就各任務(wù)模塊的實(shí)現(xiàn)做詳細(xì)講解。9.1.2數(shù)據(jù)庫設(shè)計(jì)學(xué)生成績管理系統(tǒng)主要用來維護(hù)學(xué)生信息，課程信息，學(xué)生選課信息和課程成績等。本系統(tǒng)建立數(shù)據(jù)庫XSCJ，該數(shù)據(jù)庫中有3張表（XS、KC、XS_KC），表結(jié)構(gòu)分別如表9.1、表9.2和表9.3所示。表9.1

學(xué)生信息表（表名XS）結(jié)構(gòu)列

名數(shù)

據(jù)

類

型長

度是否允許為空默

認(rèn)

值說

明列

名

含

義XHnvarchar6×無主鍵學(xué)號XMnvarchar8×無姓名ZYMnvarchar12√無專業(yè)名XBchar2×無性別CSSJdatetime—×無出生時(shí)間ZXFint—√無總學(xué)分BZntext—√無備注ZPimage—√無照片9.1.2數(shù)據(jù)庫設(shè)計(jì)表9.2

課程信息表（表名KC）結(jié)構(gòu)列

名數(shù)

據(jù)

類

型長

度是否允許為空默

認(rèn)

值說

明列

名

含

義KCHnvarchar4×無主鍵課程號KCMnvarchar16×無課程名KKXQint—√無只能為1-8開課學(xué)期續(xù)表XSint—√無學(xué)時(shí)XFint—√無學(xué)分表9.3

選課表（表名XS_KC）結(jié)構(gòu)列

名數(shù)

據(jù)

類

型長

度是否允許為空默

認(rèn)

值說

明列

名

含

義XHnvarchar6×無主鍵學(xué)號KCHnvarchar4×無主鍵課程號CJint—√無成績9.2任務(wù)一：創(chuàng)建連接和導(dǎo)航頁9.2.1

創(chuàng)建連接VisualStudio2005提供了“服務(wù)器資源管理器”，它是一種便捷的數(shù)據(jù)庫服務(wù)器管理控制臺。使用此窗口可打開數(shù)據(jù)連接，登錄服務(wù)器，瀏覽數(shù)據(jù)庫和系統(tǒng)服務(wù)。在建立了連接后，可以設(shè)計(jì)相應(yīng)的程序來打開連接以及檢索和操作所提供的數(shù)據(jù)，或是使用可視化數(shù)據(jù)庫工具直接訪問和使用數(shù)據(jù)。為了方便系統(tǒng)的設(shè)計(jì)和編碼，我們?yōu)閄SCJ數(shù)據(jù)庫在VisualStudio2005中創(chuàng)建一個(gè)可視化的連接，當(dāng)此連接建立好后，就可以直接在VisualStudio中查看和操作該數(shù)據(jù)庫，例如顯示表數(shù)據(jù)、添加觸發(fā)器及存儲過程等。9.2.1

創(chuàng)建連接（1）運(yùn)行VisualStudio2005，并新建網(wǎng)站“學(xué)生成績管理系統(tǒng)”。（2）運(yùn)行SqlServer2005，把數(shù)據(jù)庫“XSCJ”附加到SqlServer2005服務(wù)器中。（3）在VisualStudio2005中，從菜單項(xiàng)“視圖”中打開“服務(wù)器資源管理器”對話框，在“數(shù)據(jù)連接”上單擊鼠標(biāo)右鍵，選擇“添加連接”，打開“添加連接”對話框，如圖9.1所示。9.2.1創(chuàng)建連接圖9.1“添加連接”對話框9.2.1創(chuàng)建連接（4）如圖9.1所示，在“服務(wù)器名”選項(xiàng)中輸入所要連接的服務(wù)器名，如果SQLServer2005數(shù)據(jù)庫安裝在本機(jī)上且采用默認(rèn)實(shí)例，則可以直接輸入“.”；在“登錄到服務(wù)器”選項(xiàng)中，建議使用“SqlServer身份驗(yàn)證”，并輸入登錄服務(wù)器所需要的“用戶名”和“密碼”；在“連接到一個(gè)數(shù)據(jù)庫”選項(xiàng)中，選擇或輸入項(xiàng)目中將會用到的數(shù)據(jù)庫名“XSCJ”，單擊“確定”按鈕。通過以上操作便在VisualStudio2005中添加了此數(shù)據(jù)庫的引用，如圖9.2所示。在連接創(chuàng)建好后就可以直接在VisualStudio2005中對XSCJ數(shù)據(jù)庫做操作，無須再通過SQLServer2005的管理工具。圖9.2完成數(shù)據(jù)連接的添加9.2.2設(shè)計(jì)導(dǎo)航頁在系統(tǒng)的導(dǎo)航頁上，使用HyperLink控件來提供到各頁面的鏈接，為各鏈接配以相應(yīng)的示意圖片，網(wǎng)站圖片文件夾的相對路徑為“~/images/”。學(xué)生成績管理系統(tǒng)的導(dǎo)航頁如圖9.3所示。圖9.3導(dǎo)航頁（1）切換到Default.aspx的“設(shè)計(jì)”視圖，設(shè)置頁面水平居中，并按照如圖9.3所示的效果設(shè)計(jì)頁面。（2）在頂部輸入“學(xué)生成績管理系統(tǒng)”，并通過“屬性”→style→“樣式生成器”設(shè)置其外觀。（3）把“工具箱”內(nèi)“HTML”標(biāo)簽內(nèi)的“HorizontalRule”拖放到頁面內(nèi)，并通過“樣式生成器”設(shè)置其寬度屬性。（4）在水平線下部插入一個(gè)2行4列的表格，在對應(yīng)的單元格內(nèi)放置Image控件和HyperLink控件，導(dǎo)航頁設(shè)計(jì)結(jié)果如圖9.4所示。圖9.4導(dǎo)航頁設(shè)計(jì)結(jié)果（5）源代碼如下：9.2.2設(shè)計(jì)導(dǎo)航頁9.3任務(wù)二：學(xué)生信息查詢9.3.1

顯示學(xué)生記錄顯示記錄需要用到數(shù)據(jù)綁定控件，這里使用GridView數(shù)據(jù)綁定控件來分頁顯示所有的學(xué)生信息。（1）新建頁面“StuInfo.aspx”，切換到“設(shè)計(jì)”視圖，設(shè)置頁面水平居中，在頂部輸入“學(xué)生信息查詢”，并從“工具箱”內(nèi)拖放一個(gè)水平線，設(shè)置其外觀屬性。從“工具箱”中將GridView控件拖動到頁面中的水平線的下部，在“GridView任務(wù)”菜單上的“選擇數(shù)據(jù)源”列表框中，單擊“新建數(shù)據(jù)源”，為GridView控件創(chuàng)建數(shù)據(jù)源，數(shù)據(jù)源類型選擇“數(shù)據(jù)庫”，保留默認(rèn)的名稱SqlDataSource1，如圖9.5所示。圖9.5選擇數(shù)據(jù)源類型9.3.1顯示學(xué)生記錄（2）接下來為數(shù)據(jù)源SqlDataSource1設(shè)置數(shù)據(jù)庫連接字符串。向?qū)ㄗh將連接字符串保存在Web.config文件中，在以后創(chuàng)建新的數(shù)據(jù)源時(shí)即可直接選擇已保存的連接字符串作為指定的數(shù)據(jù)連接，如圖9.6所示。圖9.6選擇數(shù)據(jù)連接9.3.1顯示學(xué)生記錄（3）為SqlDataSource1配置Select語句。選擇XS表的所有列，向?qū)⒆詣由刹樵冋Z句“SELECT*FROM[XS]”，其可視化視圖如圖9.7所示，單擊“完成”按鈕配置完數(shù)據(jù)源。圖9.7配置Select語句9.3.1顯示學(xué)生記錄（4）單擊GridView智能標(biāo)簽頁面中的“編輯列”鏈接，打開“字段”對話框，首先需要移除XM字段，同時(shí)添加一個(gè)模板列，移動模板列的上下位置到合適的地方，修改其HeaderText屬性為“姓名及照片”，同時(shí)修改其他各可視列的HeaderText屬性為合適的標(biāo)題文本，如圖9.8所示。圖9.8修改Gridview字段模板9.3.1顯示學(xué)生記錄（5）單擊“確定”按鈕回到設(shè)計(jì)視圖，再從GridView的智能標(biāo)簽頁面中選擇“編輯模板”，轉(zhuǎn)到模板編輯視圖，需要編輯的是剛添加的“姓名及照片”模板列。從工具箱中拖動兩個(gè)HyperLink控件到模板列的ItemTemplate中，編輯第一個(gè)HyperLink的DataBindings，將其Text屬性直接綁定到XM字段上。對于HyperLink的NavigateUrl字段，由于這個(gè)超鏈接是在模板列中添加的，因此不能和HyperLinkField一樣設(shè)置它的DataNavigateUrlField屬性和DataNavigateUrlFormatString屬性，但可以自定義綁定表達(dá)式，在顯示姓名的HyperLink的DataBindings中，設(shè)置NavigateUrl綁定屬性的自定義綁定表達(dá)式為"StuScore.aspx?id="+Eval("XH")，此綁定表達(dá)式表示當(dāng)單擊姓名超鏈接時(shí)將跳轉(zhuǎn)到StuScore.aspx頁面，同時(shí)以GET方法傳遞該學(xué)生的學(xué)號，如圖9.9所示。9.3.1顯示學(xué)生記錄圖9.9設(shè)置HyperLink控件的DataBingdings9.3.1顯示學(xué)生記錄（6）將模板列中的第二個(gè)HyperLink的Text設(shè)為“照片”，并仿照上述步驟為其NavigateUrl綁定屬性自定義綁定表達(dá)式為"ShowPic.aspx?id="+Eval("XH")。若希望模板列中的這兩個(gè)超鏈接單擊后在新頁面中打開內(nèi)容，可將它們的Target屬性設(shè)置為“_blank”。（7）最后，為GridView啟用內(nèi)置的分頁功能，并為其選擇一個(gè)合適的外觀格式模板。完成上述操作后，學(xué)生的信息就可以通過GridView控件顯示出來。運(yùn)行網(wǎng)頁，通過瀏覽器可以查看結(jié)果，如圖9.10所示。圖9.10運(yùn)行結(jié)果9.3.2查詢學(xué)生記錄在任務(wù)二中還有一個(gè)目標(biāo)就是要實(shí)現(xiàn)學(xué)生信息的簡單查詢功能，即通過頁面上輸入的查詢條件顯示查詢結(jié)果。在StuInfo.aspx

頁面上定義了三個(gè)可輸入的查詢條件：學(xué)號、姓名和專業(yè)，其中專業(yè)是必選項(xiàng)，其余兩個(gè)是可選項(xiàng)。三個(gè)查詢條件之間是與的關(guān)系，若可選條件為空，則匹配與該條件對應(yīng)的任意記錄。（1）打開“StuInfo.aspx”頁面，切換到“設(shè)計(jì)”視圖，設(shè)計(jì)如圖9.11所示的查詢頁面，并分別命名其ID為stuXH，stuXM，stuZY。圖9.11查詢頁面9.3.2查詢學(xué)生記錄（2）因?qū)I(yè)為必選項(xiàng)，故專業(yè)下拉列表中應(yīng)枚舉出所有可選的專業(yè)名，可以通過為DropDownList

進(jìn)行數(shù)據(jù)綁定而實(shí)現(xiàn)。按照上文的方法，新建數(shù)據(jù)源SqlDataSource2，該數(shù)據(jù)源從XS表中檢索唯一的專業(yè)名（字段名為ZYM），在配置Select語句時(shí)要勾選上“只返回唯一行”，如圖9.12所示。圖9.12配置Select語句9.3.2查詢學(xué)生記錄（3）完成數(shù)據(jù)源配置向?qū)Ш螅渲孟吕斜砜丶慕壎ㄗ侄?，使其顯示綁定字段和值綁定字段均為ZYM即可，如圖9.13所示。圖9.13選擇DropDownList

控件的數(shù)據(jù)源當(dāng)在查詢頁面中單擊“查詢”按鈕時(shí)，需要根據(jù)頁面上的輸入情況構(gòu)造新的Select語句，然后將其作為SqlDataSoure1的SelectCommand的值，這樣才能經(jīng)過回發(fā)后根據(jù)查詢條件檢索出符合要求的記錄，然后重新將結(jié)果綁定到GridView控件上。9.3.2查詢學(xué)生記錄（4）在StuInfo.aspx的代碼隱藏文件StuInfo.aspx.cs

中定義一個(gè)名為MakeSelectSql

的函數(shù)，該函數(shù)根據(jù)頁面輸入的查詢條件構(gòu)造新的Select語句并返回，具體代碼如下：privatestringMakeSelectSql(){stringqueryString="SELECT*FROMXSWHERE1=1";if(stuXH.Text.Trim()!=string.Empty)

queryString+="andXHlike'%"+stuXH.Text.Trim()+"%'";if(stuXM.Text.Trim()!=string.Empty)

queryString+="andXMlike'%"+stuXM.Text.Trim()+"%'";if(stuZY.Text!="所有專業(yè)")

queryString+="andZYMlike'%"+stuZY.SelectedValue+"%'";returnqueryString;}9.3.2查詢學(xué)生記錄在“查詢”按鈕的Click事件的處理程序中添加如下代碼：SqlDataSource1.SelectCommand=MakeSelectSql();由于查詢時(shí)所使用的Select語句是動態(tài)生成的，因此在查詢結(jié)果中進(jìn)行翻頁時(shí)數(shù)據(jù)源控件的SelectCommand

屬性將會重置為頁面第一次加載時(shí)的初始值。這需要在GridView

控件的PageIndexChanging

事件處理中設(shè)置數(shù)據(jù)源的SelectCommand

屬性來解決這個(gè)問題，代碼如下：protectedvoidGridView1_PageIndexChanging(objectsender,GridViewPageEventArgse){SqlDataSource1.SelectCommand=MakeSelectSql();}運(yùn)行網(wǎng)頁，輸入查詢條件后測試查詢功能，查詢結(jié)果如圖9.14所示。9.3.2查詢學(xué)生記錄圖9.14查詢結(jié)果9.3.3顯示學(xué)生照片在學(xué)生信息的查詢頁面中，每個(gè)學(xué)生的照片均為超鏈接字段，單擊該鏈接將在ShowPic.aspx

頁面中顯示該學(xué)生的照片。由于照片字段可為空，因此在無照片數(shù)據(jù)可顯示時(shí)應(yīng)該給出相應(yīng)提示。照片字段的數(shù)據(jù)類型為Image，該數(shù)據(jù)類型以二進(jìn)制存儲數(shù)據(jù)，這意味著學(xué)生照片都是以二進(jìn)制的形式直接存儲在數(shù)據(jù)庫中的，通過程序獲取的此字段數(shù)據(jù)并不能直接在諸如Image等的控件中呈現(xiàn)。為了能正確地顯示學(xué)生圖片，需要設(shè)置頁面的輸出類型為流式輸出，并且調(diào)用Response對象的BinaryWrite

方法將圖片的二進(jìn)制數(shù)據(jù)輸出到頁面上。在StuInfo.aspx

中，已經(jīng)設(shè)置了“照片”超鏈接的URL以GET方法向ShowPic.aspx

頁面?zhèn)鬟f學(xué)號作為參數(shù)，可見在ShowPic.aspx

中可以通過Request對象的QueryString

方法獲取該參數(shù)。為了防止用戶跳過StuInfo.aspx

直接訪問ShowPic.aspx

頁面或者輸入一個(gè)包含錯(cuò)誤參數(shù)的URL來訪問數(shù)據(jù)，必須在向數(shù)據(jù)庫請求數(shù)據(jù)之前驗(yàn)證參數(shù)的正確性，如果參數(shù)不合法則給出提示信息。9.3.3顯示學(xué)生照片（1）從解決方案資源管理器中新建ShowPic.aspx，設(shè)置頁面居中，并切換到頁面的代碼文件ShowPic.aspx.cs，在頁面Load事件的處理程序中輸入如下代碼：protectedvoidPage_Load(objectsender,EventArgse){if(!Page.IsPostBack){//用以存儲獲取的圖片數(shù)據(jù)

byte[]picData;//獲取傳入?yún)?shù)

stringid=Request.QueryString["id"];//參數(shù)驗(yàn)證

9.3.3顯示學(xué)生照片if(!CheckParameter(id,outpicData))Response.Write("沒有可以顯示的照片。");

else{//設(shè)置頁面的輸出類型

Response.ContentType="application/octet-stream";//以二進(jìn)制輸出圖片數(shù)據(jù)

Response.BinaryWrite(picData);//清空緩沖，停止頁面執(zhí)行

Response.End();}}}9.3.3顯示學(xué)生照片并在頂部引入命名空間，代碼如下：usingSystem.Data.SqlClient;（2）在以上代碼中，獲取傳入?yún)?shù)id后調(diào)用CheckParameter

方法驗(yàn)證參數(shù)的正確性，該方法接受頁面?zhèn)魅雲(yún)?shù)id和一個(gè)out參數(shù)picData。如果方法返回True，標(biāo)記為out參數(shù)的picData

中存放的即是學(xué)生的照片數(shù)據(jù)。如果返回False，picData

保持為Null。參數(shù)驗(yàn)證通過后，設(shè)置頁面的輸出類型為Application/octet-stream，該類型允許輸出二進(jìn)制數(shù)據(jù)，接著調(diào)用Response.BinaryWrite

方法輸出照片數(shù)據(jù)。再次運(yùn)行網(wǎng)頁“StuInfo.aspx”，單擊學(xué)號為081101學(xué)生的照片鏈接，結(jié)果如圖9.15所示。圖9.15顯示學(xué)生照片9.4任務(wù)三：學(xué)生成績查詢學(xué)生成績查詢頁面StuScore.aspx

可以根據(jù)GET或POST兩種方法提交參數(shù)來顯示相關(guān)學(xué)生的成績。通過GET方法獲取參數(shù)時(shí)，使用Request.QueryString

方法獲取學(xué)生學(xué)號；通過POST方法獲取參數(shù)時(shí)，使用二級聯(lián)動下拉列表確定學(xué)生學(xué)號。另外，StuScore.aspx

上使用一個(gè)DetailsView

控件顯示當(dāng)前學(xué)生的基本信息，使用一個(gè)GridView

控件顯示該學(xué)生的課程成績信息。StuScore.aspx

頁面的設(shè)計(jì)視圖如圖9.16所示。圖9.16StuScore.aspx

頁面的設(shè)計(jì)視圖9.4.1根據(jù)URL參數(shù)查詢在StuInfo.aspx

頁面中，已經(jīng)通過使用GridView

控件的模板列設(shè)置了學(xué)生姓名超鏈接的URL包含該學(xué)生的學(xué)號，例如，學(xué)號為061104的學(xué)生姓名的超鏈接指向的URL為“～/StuScore.aspx?xh=061104”，在StuScore.aspx

中可以直接獲取該參數(shù)。（1）首先，為DetailsView

控件新建數(shù)據(jù)源，數(shù)據(jù)源類型選擇“數(shù)據(jù)庫”，保留默認(rèn)的名稱SqlDataSource1。由于該頁面上需要顯示的信息來自多個(gè)表連接操作的結(jié)果集，因此在“配置Select語句”的向?qū)ы撝芯筒荒茉傧褚郧耙粯油ㄟ^選擇來指定表或視圖的數(shù)據(jù)了，必須手動填入自定義的SQL語句，如圖9.17所示。9.4.1根據(jù)URL參數(shù)查詢圖9.17自定義的SQL語句9.4.1根據(jù)URL參數(shù)查詢（2）單擊“下一步”按鈕，為該SQL語句設(shè)定參數(shù)來源，如圖9.18所示。圖9.18定義SQL語句參數(shù)來源9.4.1根據(jù)URL參數(shù)查詢（3）完成數(shù)據(jù)源配置向?qū)?，回到StuScore.aspx

設(shè)計(jì)視圖。DetailsView

控件和GridView

控件均可從該數(shù)據(jù)源獲取所需的數(shù)據(jù)，將它們的數(shù)據(jù)源均設(shè)置為SqlDataSource1。（4）接下來需要為DetailsView和GridView編輯可視字段和顯示格式。通過DetailsView的智能標(biāo)簽頁面打開“字段”對話框，在“選定的字段”列表中僅保留XH、XM、CSSJ、ZYM和ZXF這幾個(gè)字段，適當(dāng)?shù)卣{(diào)整上下順序并修改它們HeaderText

屬性，如圖9.19所示。圖9.19編輯DetailsView

的可視列及其格式9.4.1根據(jù)URL參數(shù)查詢用同樣的方法修改GridView

控件的可視列和可視格式，如圖9.20所示。圖9.20編輯GridView

的可視列及其格式9.4.1根據(jù)URL參數(shù)查詢至此，根據(jù)URL傳遞的參數(shù)檢索學(xué)生成績信息的功能就完成了，在瀏覽器內(nèi)查看頁面“StuInfo.aspx”，單擊姓名為“程明”超鏈接，會出現(xiàn)“學(xué)生成績查詢”頁面，學(xué)生成績查詢結(jié)果如圖9.21所示。圖9.21學(xué)生成績查詢結(jié)果9.4.2根據(jù)表單提交參數(shù)查詢StuScore.aspx

頁面不僅可以通過GET方法獲取“StuInfo.aspx”頁面?zhèn)鬟f的學(xué)生學(xué)號，同樣也可以通過表單來提交學(xué)生學(xué)號，這正是所謂的POST方法傳遞參數(shù)。在StuScore.aspx

頁面上設(shè)計(jì)了一個(gè)二級聯(lián)動下拉列表，通過選擇專業(yè)再選擇該專業(yè)下的某個(gè)學(xué)生學(xué)號提交即可。首先要實(shí)現(xiàn)這個(gè)二級聯(lián)動下拉列表。（1）分別修改DropDownList控件的ID為zymlist，xhlist。（2）為zymlist

下拉列表創(chuàng)建新數(shù)據(jù)源控件SqlDataSource2，該數(shù)據(jù)源控件從XS表中檢索唯一的專業(yè)名，其配置Select語句的向?qū)ы撊鐖D9.22所示。9.4.2根據(jù)表單提交參數(shù)查詢圖9.22配置Select語句的向?qū)ы?.4.2根據(jù)表單提交參數(shù)查詢（3）完成該數(shù)據(jù)源向?qū)Ш罄^續(xù)為xhlist

下拉列表創(chuàng)建數(shù)據(jù)源控件SqlDataSource3，該數(shù)據(jù)源從zymlist

控件獲取專業(yè)名作為輸入?yún)?shù)，返回與該專業(yè)名相同的所有學(xué)生學(xué)號。在配置該數(shù)據(jù)源的Select語句時(shí)需要為其添加WHERE子句，添加WHERE子句的向?qū)ы撊鐖D9.23所示（在“配置Select語句”窗口的右側(cè)單擊“WHERE”按鈕會出現(xiàn)向?qū)ы撁妫D9.23添加WHERE子句9.4.2根據(jù)表單提交參數(shù)查詢（4）設(shè)置結(jié)束后單擊“添加”按鈕，再單擊“確定”按鈕返回到“配置Select語句”對話框，單擊“下一步”按鈕，完成數(shù)據(jù)源的配置向?qū)Ш螅瑸镈ropDownList控件選擇數(shù)據(jù)源，如圖9.24所示。圖9.24為DropDownList

控件選擇數(shù)據(jù)源9.4.2根據(jù)表單提交參數(shù)查詢（5）聯(lián)動下拉列表在第一個(gè)列表的選擇項(xiàng)發(fā)生變化時(shí)將導(dǎo)致第二個(gè)列表中的項(xiàng)發(fā)生變化。為能實(shí)現(xiàn)聯(lián)動效果，應(yīng)將第一個(gè)DropDownList

控件的AutoPostBack

屬性設(shè)置為True，這樣才能在列表選擇項(xiàng)發(fā)生變化時(shí)自動產(chǎn)生回發(fā)。（6）StuScore.aspx

頁面上的“查詢”按鈕的作用是手動提交表單，引起一次回發(fā)過程。由于DetailsView

控件和GridView

控件獲取數(shù)據(jù)的數(shù)據(jù)源控件SqlDataSource1接受的輸入?yún)?shù)已聲明在代碼中，所以當(dāng)通過POST方法提交學(xué)生參數(shù)時(shí)應(yīng)清除SqlDataSource1的QueryString

參數(shù)而動態(tài)添加從頁面控件獲取的參數(shù)。在“查詢”按鈕的Click事件處理程序中添加如下代碼：protectedvoidButton1_Click(objectsender,EventArgse){SqlDataSource1.SelectParameters.Clear();SqlDataSource1.SelectParameters.Add("xh",xhlist.SelectedValue);} 9.4.2根據(jù)表單提交參數(shù)查詢圖9.25運(yùn)行結(jié)果（7）在瀏覽器中查看本頁面，通過下拉列表選中一個(gè)學(xué)生后，單擊“查詢”按鈕，結(jié)果如圖9.25所示。9.5任務(wù)四：學(xué)生信息更新9.5.1

更新學(xué)生照片更新學(xué)生照片的步驟如下。（1）創(chuàng)建“StuUpdate.aspx”，切換到“設(shè)計(jì)”視圖，設(shè)置頁面居中，在頂部輸入“學(xué)生信息修改”，拖放一個(gè)橫線，分別設(shè)置其外觀樣式。在下部按照上例的方法拖放兩個(gè)DropDownList控件，并設(shè)置其數(shù)據(jù)源，設(shè)置它們的AutoPostBack

屬性為True。（2）從工具箱中拖動一個(gè)DetailsView

控件到StuUpdate.aspx

的設(shè)計(jì)視圖上，為其新建數(shù)據(jù)源，為數(shù)據(jù)源配置Select語句，選擇XS表，在列選擇框中選中除“ZP”字段以外的所有字段。因?yàn)閆P字段是Image類型，該數(shù)據(jù)類型默認(rèn)不會自動綁定到數(shù)據(jù)綁定控件上，所以為了防止在使用數(shù)據(jù)綁定控件的內(nèi)置更新功能來更新數(shù)據(jù)時(shí)產(chǎn)生類型不匹配的錯(cuò)誤，在此暫時(shí)不選擇該字段。9.5.1更新學(xué)生照片圖9.26添加WHERE子句（3）選擇數(shù)據(jù)列后繼續(xù)為Select語句添加WHERE子句，該子句表明僅檢索出學(xué)號與從頁面控件獲取的學(xué)號相符的學(xué)生記錄。配置WHERE子句的向?qū)ы撊鐖D9.26所示，設(shè)置好后，單擊“添加”按鈕，然后單擊“確定”按鈕。9.5.1更新學(xué)生照片（4）返回到配置Select語句向?qū)ы摚瑔螕簟案呒墶卑粹o，將打開框中的第一個(gè)復(fù)選框選中，這樣數(shù)據(jù)源將自動生成與Select語句對應(yīng)的Insert、Update、Delete語句，以實(shí)現(xiàn)數(shù)據(jù)綁定控件的內(nèi)置插入、更新和刪除數(shù)據(jù)的功能，如圖9.27所示。圖9.27允許生成Insert、Update、Delete語句9.5.1更新學(xué)生照片（5）回到設(shè)計(jì)頁面，在DetailsView

控件的智能標(biāo)簽頁面中為其啟用內(nèi)置的插入、編輯、刪除功能，繼續(xù)從智能標(biāo)簽頁面中單擊“編輯字段”，打開“字段”對話框，與前面一樣，設(shè)置各選定字段的HeaderText

屬性和樣式外觀等。接下來為DetailsView

添加一個(gè)TemplateField，將其HeaderText

屬性設(shè)置為“學(xué)生照片”，我們正是利用這個(gè)模板列來進(jìn)行學(xué)生照片的更新操作，單擊“確定”按鈕。（6）在DetailsView

的智能標(biāo)簽頁面中單擊“編輯模板”鏈接，轉(zhuǎn)到模板列的設(shè)計(jì)視圖。分別編輯此模板列的ItemTemplate、EditItemTemplate

和InsertItemTemplate。在ItemTemplate中，仿照在StuInfo.aspx

中的做法為每個(gè)學(xué)生添加一個(gè)到ShowPic.aspx

的鏈接即可。編輯模板列的EditItemTemplate，這個(gè)模板在編輯記錄時(shí)顯示，需要在其中提供上傳學(xué)生照片的功能。在EditItemTemplate

的設(shè)計(jì)視圖中添加一個(gè)FileUpload

控件和一個(gè)Button控件，修改它們的控件ID為EditUpload、uploadBtn，如圖9.28所示。9.5.1更新學(xué)生照片圖9.28編輯DetailsView模板列9.5.1更新學(xué)生照片（7）雙擊“上傳”按鈕，轉(zhuǎn)到Click事件的處理代碼段中，添加如下代碼以實(shí)現(xiàn)學(xué)生照片的上傳功能：（8）在瀏覽器中查看本頁，選擇DetailsView

中某條記錄進(jìn)行編輯，在記錄編輯頁面中為該學(xué)生上傳一張圖片?；氐接涗涳@示頁面，單擊“查看圖片”鏈接，可以看到剛剛上傳的照片已經(jīng)能正確地顯示在ShowPic.aspx

頁面中了，如圖9.29和圖9.30所示。

圖9.29更新學(xué)生信息圖9.30顯示上傳的圖片9.5.2驗(yàn)證表單輸入在編輯記錄和插入新記錄時(shí)，常常需要進(jìn)行輸入驗(yàn)證，例如，驗(yàn)證姓名文本框不為空，生日文本框輸入的日期格式無誤等。在ASP.NET中，基本的輸入驗(yàn)證都可以使用驗(yàn)證控件完成。在本例中，編輯學(xué)生記錄和添加新學(xué)生界面均包含可編輯文本框，在提交前有必要對所有可編輯字段進(jìn)行有效性檢驗(yàn)。為了在DetailsView

中添加驗(yàn)證控件，可以將DetailsView

控件的所有可編輯字段轉(zhuǎn)換為TemplateField，然后再進(jìn)行模板編輯。（1）從StuUpdate.aspx頁面上的DetailsView

控件的智能標(biāo)簽頁面中單擊“編輯字段”鏈接，打開“字段”對話框，依次選中“選定的字段”列表中的綁定列，將除BZ以外的字段全部轉(zhuǎn)換為TemplateField，如圖9.31所示。9.5.2驗(yàn)證表單輸入圖9.31將綁定列轉(zhuǎn)換為模板列9.5.2驗(yàn)證表單輸入（2）按“確定”后回到設(shè)計(jì)視圖，從DetailsView的智能標(biāo)簽面板中選擇“編模板”，轉(zhuǎn)到模板編輯視圖。以CSSJ（出生日期）字段為例，從DetailsView控件的智能標(biāo)簽面板中選擇“出生日期”列的EditItemTemplate，向設(shè)計(jì)視圖中添加一個(gè)RequiredFieldValidator和一個(gè)CompareValidator，分別對兩個(gè)驗(yàn)證控件進(jìn)行驗(yàn)證。如圖9.32所示。注意將CompareValidator

控件的Operator屬性設(shè)置為DataTypeCheck。圖9.32為EditItemTemplate添加驗(yàn)證控件9.5.2驗(yàn)證表單輸入（3）根據(jù)需要，按照上述方法為其他可編輯字段添加合適的驗(yàn)證控件。最后再為StuUpdate.aspx

頁面添加一個(gè)ValidationSummary

控件，設(shè)置其ShowMessageBox屬性為True，該控件用于統(tǒng)一顯示驗(yàn)證控件的提示信息。需要注意的是，如果在頁面上使用了ValidationSummary

控件，為了達(dá)到統(tǒng)一顯示的效果，應(yīng)該將所有驗(yàn)證控件的Display屬性設(shè)置為None。（4）完成EditItemTemplate

模板的驗(yàn)證要求之后，繼續(xù)為InsertItemTemplate

模板中的可編輯字段添加驗(yàn)證控件，具體方法同上，這里不再贅述。（5）全部操作完成后運(yùn)行網(wǎng)頁，此時(shí)可以測試驗(yàn)證控件的驗(yàn)證效果，如圖9.33所示。9.5.2驗(yàn)證表單輸入圖9.33編輯學(xué)生記錄時(shí)的有效性驗(yàn)證9.5.3刪除學(xué)生信息（1）通過DetailsView

控件的智能標(biāo)簽頁面打開“字段”對話框，在“選定的字段”列表中將CommandField

轉(zhuǎn)換為TemplateField，轉(zhuǎn)換后的CommandField

并不會丟失內(nèi)置的編輯、刪除和插入功能，外觀也與轉(zhuǎn)換前保持一致。（2）通過DetailsView控件的智能標(biāo)簽頁面打開“編輯模板”對話框，對CommondField進(jìn)行模板設(shè)計(jì)，單擊“刪除”按鈕，修改其“CommondName”為“MyDelete”，則以前的“刪除”按鈕不會調(diào)用數(shù)據(jù)源控件內(nèi)的刪除指令。9.5.3刪除學(xué)生信息（3）雙擊“刪除”按鈕，在其事件內(nèi)編寫如下的代碼：

//在DetailsView控件內(nèi)獲取顯示學(xué)號的Label的引用

LabelXH=(Label)DetailsView1.FindControl("Label1");//先從XS_KC表中把給學(xué)號的學(xué)生選課成績給刪除

SqlDataSource3.DeleteCommand="deletefromXS_KCwhereXH='"+XH.Text+"'";SqlDataSource3.Delete();//再從XS表中把該學(xué)號對應(yīng)的學(xué)生刪除

SqlDataSource3.DeleteCommand="deletefromXSwhereXH='"+XH.Text+"'";SqlDataSource3.Delete();9.5.3刪除學(xué)生信息（4）通過DetailsView控件的智能標(biāo)簽