第9章 .NET 2.0項目開發(fā)實踐

網(wǎng)頁設計與ASP技術

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

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

學生信息表（表名XS）結構列

名數(shù)

據(jù)

類

型長

度是否允許為空默

認

值說

明列

名

含

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

課程信息表（表名KC）結構列

名數(shù)

據(jù)

類

型長

度是否允許為空默

認

值說

明列

名

含

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

選課表（表名XS_KC）結構列

名數(shù)

據(jù)

類

型長

度是否允許為空默

認

值說

明列

名

含

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

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

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

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

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

進行數(shù)據(jù)綁定而實現(xiàn)。按照上文的方法，新建數(shù)據(jù)源SqlDataSource2，該數(shù)據(jù)源從XS表中檢索唯一的專業(yè)名（字段名為ZYM），在配置Select語句時要勾選上“只返回唯一行”，如圖9.12所示。圖9.12配置Select語句9.3.2查詢學生記錄（3）完成數(shù)據(jù)源配置向導后，配置下拉列表控件的綁定字段，使其顯示綁定字段和值綁定字段均為ZYM即可，如圖9.13所示。圖9.13選擇DropDownList

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

中定義一個名為MakeSelectSql

的函數(shù)，該函數(shù)根據(jù)頁面輸入的查詢條件構造新的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查詢學生記錄在“查詢”按鈕的Click事件的處理程序中添加如下代碼：SqlDataSource1.SelectCommand=MakeSelectSql();由于查詢時所使用的Select語句是動態(tài)生成的，因此在查詢結果中進行翻頁時數(shù)據(jù)源控件的SelectCommand

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

控件的PageIndexChanging

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

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

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

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

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

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

中可以通過Request對象的QueryString

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

直接訪問ShowPic.aspx

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

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

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

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

else{//設置頁面的輸出類型

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

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

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

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

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

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

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

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

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

上使用一個DetailsView

控件顯示當前學生的基本信息，使用一個GridView

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

頁面的設計視圖如圖9.16所示。圖9.16StuScore.aspx

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

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

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

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

控件新建數(shù)據(jù)源，數(shù)據(jù)源類型選擇“數(shù)據(jù)庫”，保留默認的名稱SqlDataSource1。由于該頁面上需要顯示的信息來自多個表連接操作的結果集，因此在“配置Select語句”的向導頁中就不能再像以前一樣通過選擇來指定表或視圖的數(shù)據(jù)了，必須手動填入自定義的SQL語句，如圖9.17所示。9.4.1根據(jù)URL參數(shù)查詢圖9.17自定義的SQL語句9.4.1根據(jù)URL參數(shù)查詢（2）單擊“下一步”按鈕，為該SQL語句設定參數(shù)來源，如圖9.18所示。圖9.18定義SQL語句參數(shù)來源9.4.1根據(jù)URL參數(shù)查詢（3）完成數(shù)據(jù)源配置向導，回到StuScore.aspx

設計視圖。DetailsView

控件和GridView

控件均可從該數(shù)據(jù)源獲取所需的數(shù)據(jù)，將它們的數(shù)據(jù)源均設置為SqlDataSource1。（4）接下來需要為DetailsView和GridView編輯可視字段和顯示格式。通過DetailsView的智能標簽頁面打開“字段”對話框，在“選定的字段”列表中僅保留XH、XM、CSSJ、ZYM和ZXF這幾個字段，適當?shù)卣{整上下順序并修改它們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ù)檢索學生成績信息的功能就完成了，在瀏覽器內查看頁面“StuInfo.aspx”，單擊姓名為“程明”超鏈接，會出現(xiàn)“學生成績查詢”頁面，學生成績查詢結果如圖9.21所示。圖9.21學生成績查詢結果9.4.2根據(jù)表單提交參數(shù)查詢StuScore.aspx

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

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

下拉列表創(chuàng)建新數(shù)據(jù)源控件SqlDataSource2，該數(shù)據(jù)源控件從XS表中檢索唯一的專業(yè)名，其配置Select語句的向導頁如圖9.22所示。9.4.2根據(jù)表單提交參數(shù)查詢圖9.22配置Select語句的向導頁9.4.2根據(jù)表單提交參數(shù)查詢（3）完成該數(shù)據(jù)源向導后繼續(xù)為xhlist

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

控件獲取專業(yè)名作為輸入?yún)?shù)，返回與該專業(yè)名相同的所有學生學號。在配置該數(shù)據(jù)源的Select語句時需要為其添加WHERE子句，添加WHERE子句的向導頁如圖9.23所示（在“配置Select語句”窗口的右側單擊“WHERE”按鈕會出現(xiàn)向導頁面）。圖9.23添加WHERE子句9.4.2根據(jù)表單提交參數(shù)查詢（4）設置結束后單擊“添加”按鈕，再單擊“確定”按鈕返回到“配置Select語句”對話框，單擊“下一步”按鈕，完成數(shù)據(jù)源的配置向導后，為DropDownList控件選擇數(shù)據(jù)源，如圖9.24所示。圖9.24為DropDownList

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

控件的AutoPostBack

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

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

控件和GridView

控件獲取數(shù)據(jù)的數(shù)據(jù)源控件SqlDataSource1接受的輸入?yún)?shù)已聲明在代碼中，所以當通過POST方法提交學生參數(shù)時應清除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運行結果（7）在瀏覽器中查看本頁面，通過下拉列表選中一個學生后，單擊“查詢”按鈕，結果如圖9.25所示。9.5任務四：學生信息更新9.5.1

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

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

控件到StuUpdate.aspx

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

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

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

添加一個TemplateField，將其HeaderText

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

的智能標簽頁面中單擊“編輯模板”鏈接，轉到模板列的設計視圖。分別編輯此模板列的ItemTemplate、EditItemTemplate

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

中的做法為每個學生添加一個到ShowPic.aspx

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

的設計視圖中添加一個FileUpload

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

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

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

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

中添加驗證控件，可以將DetailsView

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

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

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

頁面添加一個ValidationSummary

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

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

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

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

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

轉換為TemplateField，轉換后的CommandField

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

//在DetailsView控件內獲取顯示學號的Label的引用

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

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

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