Web程序設(shè)計實驗指導(dǎo)書1116

1、Web 程序設(shè)計實驗指導(dǎo)書楊松波.實驗一 C#和實驗?zāi)康牧私釩#語言規(guī)范（2）掌握C#基礎(chǔ)語法、流程控制和異常處理等。（3）掌握創(chuàng)建C#類并應(yīng)用于 Web窗體中的方法。. 實驗內(nèi)容及要求轉(zhuǎn)換輸入的成績到相應(yīng)的等級要求如下：（1）頁面瀏覽效果如圖 1-1 所示（ 2） 成績輸入使用 TextBox 控件。（3） 點擊 Button 控件時輸出相應(yīng)的等級信息，其中等級信息輸出在一個Label 上圖 1-1 成績轉(zhuǎn)換瀏覽效果在 Web 窗體上輸出九九乘法表瀏覽效果如圖 1-2 所示圖 1-2 “九九乘法表”瀏覽效果輸入一組以空格間隔的共 10個以內(nèi)的整數(shù)，輸出該組整數(shù)的降序排列要求如下：1)頁面瀏覽

2、效果如圖1-3 所示。2)輸入使用 TextBox控件。3)單擊 Botton 控件時輸出所有整數(shù)的降序排列4)必須使用數(shù)組。圖 1-3 降序排列瀏覽效果計算兩個數(shù)的商 要求如下：（ 1 ）頁面瀏覽效果如圖1-4 和圖 1-5 所示。（ 2）輸入使用兩個 TextBox 控件。（3）單擊 Botton 控件時輸出兩個數(shù)的商。（4）必須包含異常處理。圖 1-4 計算商瀏覽效果（ 1 ） 圖 1-5 計算商瀏覽效果（ 2）設(shè)計一個用戶信息類 UserInfo要求如下：（1）包括兩個屬性：姓名（ Name）和生日（Birthday ）。（2）包括一個方法 DecideAge （）用于判斷用戶是否達到

3、規(guī)定年齡。當(dāng)年齡大于等于18歲時返回值“ XXX，您是成年人了 ！” ；當(dāng)年齡小于18歲時返回值“ XXX，您還沒長大呢！”。將Userlnfo類應(yīng)用于Web窗體中頁面瀏覽效果如圖1-6和圖1-7所示。圖1-6 Userlnfo類瀏覽效果圖（1）圖1-7 UserInfo類瀏覽效果圖（2）三.實驗步驟轉(zhuǎn)換輸入的成績到相應(yīng)的等級（1）設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖1-8所示，向頁面添加1個TextBox控件、1個Botton控件和1個Lable控件。圖1-8設(shè)計界面（2）設(shè)置屬性Web窗體中各控件的屬性設(shè)置如表1-1所示。表1-1各控件的屬性設(shè)置表控件屬性名屬性值說明T

4、extBoxIDtxtln put“輸入成績”文本框的編程名稱Bott onIDbtn Submit“等級”按鈕的編程名稱Text等級“等級”按鈕上顯示的文本LabelIDlblDisplay用來顯示等級信息的Label控件編程名稱Text空岀示不顯示任何內(nèi)谷（3）編寫事件代碼按鈕btnSubmit被單擊時執(zhí)行的事件代碼如下:protected void btnSubmit_Click( object sender, EventArgs e) float fGrade =;int iGrade = ( int )(fGrade / 10);switch (iGrade)case 10:case

5、 9:=優(yōu)秀;break;case 8:=良；break;case 7:=中“；break;case 6:=及格;break;case 5: case 4:case 2:case 1:case 0:=不及格；break;(4)瀏覽建立的Web窗體進行測試。在 Web窗體上輸岀九九乘法表新建一個 Web窗體，切換到設(shè)計視圖。在空白處雙擊，編寫Web窗體載入時執(zhí)行代碼如下:protected void Page_Load( object sender, EventArgs e)for(inti = 1; i = 9; i+)for (int j = 1; j = i; j+)()+* + () +

6、= + (i * j).ToString();( );();最后，瀏覽建立的 Web窗體查看效果。3輸入一組以空格間隔的共10個以內(nèi)的整數(shù)，輸岀該組整數(shù)的降序排列設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖1-9所示，向頁面添加1個TextBox控件、1個Bott on控件。圖1-9設(shè)計界面設(shè)置屬性Web窗體中各控件的初始屬性設(shè)置如表1-2所示。表1-2各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtln put“輸入一組數(shù)據(jù)”文本框的編程名稱Bott onIDbtn Submit“降序級”按鈕的編程名稱Text降序“降序”按鈕上顯示的文本(3)編寫事件代碼按

7、鈕btnSubmit被單擊時執(zhí)行的事件代碼如下:protected void btnSubmit_Click( object sender, EventArgs e) string sInput;int j=0;int alnput = new int 10;string temp = 0;for ( int i = 0; i = - 1; i+)if (i, 1) !=)temp += (i, 1);elsealnputj = (temp);j+；temp =0;(aInput);(aInput);foreach ( int i in aInput)if (i != 0)(i + )

8、;(4)瀏覽建立的Web窗體進行測試。4.計算兩個數(shù)的商設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖1-10所示，向頁面添加 2個TextBox控件、1個Bott on控件。圖1-10設(shè)計界面(2)設(shè)置屬性Web窗體中各控件的初始屬性設(shè)置如表1-3所示。表1-3各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtDivsor“除數(shù)”文本框的編程名稱TextBoxIDtxtDivided“被除數(shù)”文本框的編程名稱Bott onIDbtn Submit“提交”按鈕的編程名稱Text提交“提交”按鈕上顯示的文本編寫事件代碼按鈕btnSubmit被單擊時執(zhí)行的事件代碼如下:pro

9、tected void btnSubmit_Click( object sender, EventArgs e)tryfloat divsor = ;float dividend = ;( 商為 : + divsor / dividend);catch ( Exception ee)(系統(tǒng)提示 + );(請輸入正確的數(shù)字 );( 4)瀏覽建立的 Web 窗體進行測試。5.設(shè)計一個用戶信息類UserInfo(1)右擊App_Code文件夾，選擇“添加新項”“類”模板，重命名為，單擊“添加”按鈕。( 2 )輸入代碼如下：public class UserInfoprivate string _Na

10、me;private DateTime _Birthday;public string Namegetreturn_Name;set_Name =valuepublic DateTime Birthdaygetreturn _Birthday;set_Birthday = value ;public UserInfo( string name, DateTime birthday)UserInfo 類應(yīng)用于 Web 窗體中(1)設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖1-11所示，向頁面添加2個TextBox控件、1個Bott on控件。圖1-11設(shè)計界面設(shè)置屬性Web窗體中各

11、控件的初始屬性設(shè)置如表1-4所示。表1-4各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtName“姓名”文本框的編程名稱TextBoxIDtxtBirthday“生日”文本框的編程名稱Bott onIDbtn Submit“提交”按鈕的編程名稱Text提交“提交”按鈕上顯示的文本(3)編寫事件代碼按鈕btnSubmit被單擊時執(zhí)行的事件代碼如下:protected void btnSubmit_Click( object sender, EventArgs e)string name =;string birthday =;UserInfo userInfo = new Use

12、rInfo (name, (birthday, yyyymmdd, null );()；瀏覽建立的Web窗體進行測試。實驗二標準控件實驗?zāi)康睦斫?頁面事件處理流程。理解標注控件的應(yīng)用。實驗內(nèi)容及要求設(shè)計并實現(xiàn)一個簡易的計算器要求如下：頁面瀏覽效果如圖 2-1所示仿照一般計算器的工作方式，實現(xiàn)加和減的功能。圖2-1 “簡易計算器”瀏覽效果設(shè)計并實現(xiàn)一個用于查詢教師課表的聯(lián)動下拉列表框頁面要求如下：頁面瀏覽效果如圖 2-2所示“學(xué)年”下拉列表框中添加十個數(shù)據(jù)項：當(dāng)前學(xué)年及之前的九個學(xué)年。“學(xué)期”下拉列表框中添加兩個數(shù)據(jù)項：1和2.“分院”下拉列表框中添加三個數(shù)據(jù)項：“數(shù)學(xué)與信息工程學(xué)院”、“機電學(xué)

13、院”和“外國語學(xué)院”?！敖處煛毕吕斜砜蛑械臄?shù)據(jù)項根據(jù)不同的分院產(chǎn)生。圖2-2聯(lián)動下拉列表框瀏覽效果設(shè)計并實現(xiàn)一個用于單項選擇題的測試頁面要求如下：頁面瀏覽效果如圖 2-3所示試題要求和選擇題必須動態(tài)生成。如圖2-4所示，當(dāng)單擊提交按鈕時，給岀選擇的答案。圖2-3測試頁面效果(1)圖2-4測試頁面效果(2)實驗步驟設(shè)計并實現(xiàn)一個簡易的計算器(1)設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖2-5所示，向頁面添加1個用于布局的1行1列黑色邊框表格。向表格中添加一個TextBox控件、6個Bott on控件。圖2-5(2)設(shè)置屬性Web窗體中各控件的屬性設(shè)置如表2-1所示。表2-1各控

14、件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtDisplay用于顯示輸入數(shù)字的文本框控件編程名稱ReadO nlyTrue不能更改文本框中的文本，默認值為FalseBott onIDbt nOne“數(shù)字1 ”按鈕的編程名稱Text1“數(shù)字1”按鈕上顯示的文本Bott onIDbt nTwo“數(shù)字2”按鈕的編程名稱Text2“數(shù)字2”按鈕上顯示的文本Bott onIDbtn Three“數(shù)字3”按鈕的編程名稱Text3“數(shù)字3”按鈕上顯示的文本Bott onIDbtnAdd“ +”按鈕的編程名稱Text+“ +”按鈕上顯示的文本Bott onIDbt nSubtract“-”按鈕的編

15、程名稱Text-“-”按鈕上顯示的文本Bott onIDbtn Equal“=”按鈕的編程名稱Text=“=”按鈕上顯示的文本(3)編寫事件、方法代碼在所有事件、方法外聲明靜態(tài)字段。 靜態(tài)字段保證了其中的數(shù)據(jù)可以在所有的事件、方法中被訪問，并能在事件代碼或方法代碼執(zhí)行結(jié)束后保留數(shù)據(jù)。其中，靜態(tài)字段numl用于存儲算式中的第一個數(shù)字字符串，初始值為“ 0” ； num2用于存儲算式中的第二個數(shù)字字符串，初始值為“ 0”； total用于存儲將所有輸入的數(shù)連接后的數(shù)字字符串，初始值為“”(空字符串)；sign用于存儲運算符號，初始值為“”。代碼如下：static stri ng numl = 0,

16、 num2 = 0, total = , sign =;按鈕btnOne被單擊時執(zhí)行的事件代碼如下：protected void btnOn e_Click(object sen der, Even tArgs e)total += 1;2” oString();num1 = 0;num2 = 0;total =;sig n =;break;case -:=(n um1) - (n um2).ToStri ng();num1 = 0;num2 = 0;total =;sig n =;break;(4)瀏覽建立的Web窗體進行測試。設(shè)計并實現(xiàn)一個用于查詢教師課表的聯(lián)動下拉列表框頁面設(shè)計Web窗體

17、新建一個 Web窗體，切換到設(shè)計視圖。如圖2-6所示，向頁面輸入“學(xué)年：”、“學(xué)期：”、“分院：”和“教師：”等信息，適當(dāng)設(shè)置字體大小。再向頁面添加4個DropDownList控件，適當(dāng)調(diào)整個控件的大小和位置。圖2-6設(shè)置屬性Web窗體中各控件的屬性設(shè)置如表2-2所示。表2-1各控件的屬性設(shè)置表控件屬性名屬性值說明DropDow nListIDddlYear學(xué)年”下拉列表框的編程名稱AutoPostBackTrue當(dāng)列表項內(nèi)容改變后，自動觸發(fā)頁面往返DropDow nListIDddlTerm學(xué)期”下拉列表框的編程名稱AutoPostBackTrue當(dāng)列表項內(nèi)容改變后，自動觸發(fā)頁面往返Drop

18、Dow nListIDddlCollege分院”下拉列表框的編程名稱AutoPostBackTrue當(dāng)列表項內(nèi)容改變后，自動觸發(fā)頁面往返DropDow nListIDddlTeacher教師”下拉列表框的編程名稱AutoPostBackTrue當(dāng)列表項內(nèi)容改變后，自動觸發(fā)頁面往返(3)編寫事件、方法代碼Web窗體首次載入時執(zhí)行的代碼如下：protected void Page_Load(object sen der. Eve ntArgs e)oStri ng() + - + ();oStri ng() + - + ();自定義方法BingTerm()的代碼如下：protected void

19、Bi ndTerm()d設(shè)計并實現(xiàn)一個用于單項選擇題的測試頁面(1)設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖2-7所示，向頁面添加1個PlaceHolder控件、1個Bott on控件和1個Label控件，適當(dāng)調(diào)整個控件的大小和位置。圖2-7(2)設(shè)置屬性Web窗體中各控件的初始屬性設(shè)置如表2-3所示。表2-3各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDbtn Submit“提交”按鈕的編程名稱Text提交“提交”按鈕上顯示的文本LabelIDlblDisplay用來顯示選擇結(jié)果的Label控件編程名稱Text空初始不顯示任何內(nèi)容(3)編寫事件代碼Web窗體首次載入

20、時執(zhí)行的代碼如下：protected void Page_Load(object sen der, Eve ntArgs e)驗內(nèi)容及要求設(shè)計并實現(xiàn)一個帶驗證控件的用戶注冊頁面 要求如下：(1)頁面瀏覽效果如圖3-1和圖3-2所示“用戶名”、“密碼”、“確認密碼”、“生日”、“電話號碼”和“身份證號”等信 息必須輸入?！懊艽a”和“確認密碼”的輸入值必須一致。“生日”的輸入值必須在1900-1-1到2010-1-1之間。“電話號碼”“身份證號”中的岀生年月信息必須為合法的日期數(shù)據(jù)。能匯總顯示所有的驗證錯誤信息，并以獨立的對話框顯示。當(dāng)驗證控件出現(xiàn)驗證錯誤時，焦點會定位在出現(xiàn)驗證錯誤的文本框中。若

21、通過所有的驗證，則顯示“驗證通過”的信息。圖3-1 “用戶注冊驗證”瀏覽效果(1)圖3-2 “用戶注冊驗證”瀏覽效果(2)設(shè)計并實現(xiàn)同一個頁面的分組驗證功能要求如下：頁面瀏覽效果如圖 3-2所示圖3-3 “分組驗證”瀏覽效果(1)如圖3-4所示，當(dāng)點擊“用戶名是否可用”按鈕時，僅對“用戶名”進行驗證。圖3-4 “分組驗證”瀏覽效果(2)如圖3-5和圖3-6所示，當(dāng)在“用戶名”文本框中輸入jxssg，再單擊“用戶名是否可用” 按鈕時輸岀“抱歉！該用戶名已被占用！ ”的信息；當(dāng)在“用戶名”文本框中輸入其它信息，再單擊“單擊用戶名是否可用”按鈕時輸岀“恭喜！該用戶名可用！ ”的信息。圖3-5 “分組

22、驗證”瀏覽效果(3)圖3-6 “分組驗證”瀏覽效果(4)如圖3-7所示，當(dāng)單擊“確定”按鈕時，對“密碼”、“確認密碼”、“生日”、“電 話號碼”和“身份證號”進行驗證。圖3-7 “分組驗證”瀏覽效果(5)三.實驗步驟1.設(shè)計并實現(xiàn)一個帶驗證控件的用戶注冊頁面(1)設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖3-8所示，向頁面輸入“用戶名”、“密碼：”、“確認密碼：”、“生日：”、“電話號碼：”和“身份證號：”等信息；添加6個 TextBox 控件、6 個 RequiredFieldValidator 控件、1 個 CompareValidator 控件、1 個 RangeValid

23、ator 控件、1 個 RegularExpressionValidator 控件、1 個 CustomValidator 控件，1 個Bott on控件、1個Label控件和1個ValidatorSummary控件。適當(dāng)調(diào)整個控件的位置和大 小。圖3-8設(shè)計界面(1)(2)設(shè)置屬性Web窗體中各控件的屬性設(shè)置如表3-1所示。表3-1各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtName“用戶名”文本 框的編程名稱RequiredFieldValidatorIDrfvName“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtName驗證“用戶名”文本框

24、ErrorMessage請輸入用戶名驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無效時將焦 點定位到“用戶 名”文本框Text*驗證無效時提示 的錯誤信息TextBoxIDtxtPassword“密碼”文本框 的編程名稱TextModePassword設(shè)置“密碼”文 本框為密碼模式RequiredFieldValidatorIDrfvPassword“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtPassword驗證“密碼”文 本框ErrorMessage請輸入密碼驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息Set

25、FocusOn ErrorTrue驗證無效時將焦 點定位到“密碼” 文本框Text*驗證無效時提示 的錯誤信息TextBoxIDtxtPasswordAgai n“確認密碼文 本框的編程名稱TextModePassword設(shè)置“確認密碼” 文本框為密碼模 式RequiredFieldValidatorIDrfvPasswordAga in“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtPasswordAgai n驗證“確認密碼” 文本框ErrorMessage請輸入確認密碼驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無

26、效時將焦點定位到確認 密碼”文本框Text*驗證無效時提示 的錯誤信息CompareValidatorIDcvPassword“比較驗證”控 件的編程名稱Con trolToCompareTxtPassword與“密碼”文本框比較Con trolToValidateTxtPasswordAga in驗證“確認密碼” 文本框ErrorMessage密碼與確認密碼不一致驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無效時將焦 點定位到“確認 密碼”文本框TextBoxIDtxtBirthday“生日”文本框 的編程名稱RequiredFieldVali

27、datorIDrfvBirthday“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtBirthday驗證“生日”文 本框ErrorMessage請輸入生日驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無效時將焦 點定位到“生日” 文本框Text*驗證無效時提示 的錯誤信息Ran geValidatorIDrvBirthday“范圍驗證”控 件的編程名稱Con trolToValidatetxtBirthday驗證“生日”文 本框ErrorMessage日期應(yīng)在1900-1-1 到2010-1-1之間驗證無效時在“匯總驗證

28、”控 件中顯示的錯誤 信息MaximumValue2010-1-1設(shè)置最大的日期為 2010-1-1Mini mumValue1900-1-1設(shè)置最小的日期為 1900-1-1SetFocusOn ErrorTrue驗證無效時將焦 點定位到“生日” 文本框TypeDate要比較的值為日 期型TextBoxIDtxtTeleph one“電話號碼”文 本框的編程名稱RequiredFieldValidatorIDrfvTeleph one“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtTeleph one驗證“電話號碼” 文本框ErrorMessage請輸入電話號碼驗

29、證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無效時將焦 點定位到“電話 號碼”文本框Text*驗證無效時提示 的錯誤信息RegularExpressio nV alidatorIDrevTelepho ne“規(guī)則表達式驗 證”控件的編程 名稱Con trolToValidatetxtTeleph one驗證“電話號碼” 文本框ErrorMessage驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息Validatio nExpressio nd4-d8表達式為“4個數(shù) 字-8個數(shù)字”SetFocusOn ErrorTrue驗證無效時將焦 點定位到“電

30、話 號碼”文本框TextBoxIDtxtIde ntity“身份證號”文 本框的編程名稱RequiredFieldValidatorIDrfvIde ntity“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtIde ntity驗證“身份證號” 文本框ErrorMessage請輸入身份證號驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無效時將焦 點定位到“身份 證號”文本框Text*驗證無效時提示 的錯誤信息RegularExpressio nV alidatorIDcvIde ntity“自定義驗證” 控件的編程名稱Co

31、n trolToValidatetxtIde ntity驗證“身份證號” 文本框ErrorMessage身份證號錯誤！驗證無效時在“匯總驗證”控 件中顯示的錯誤 信息SetFocusOn ErrorTrue驗證無效時將焦 點定位到“身份 證號”文本框Bott onIDbtn Submit“確定”按鈕的 編程名稱Text確定“確定”按鈕上 顯示的文本LabelIDlblMsg顯示“驗證通過”信息的Label控件的編程名稱Text空初始不顯示任何 內(nèi)容Validati on SummaryIDvsSubmit“匯總驗證”按 鈕的編程名稱ShowMessageBoxtTrue以對話框形式顯 示匯總的

32、驗證錯 誤信息ShowSummaryFalse不在網(wǎng)頁上顯示 匯總的驗證錯誤 信息(3)編寫事件、方法代碼自定義驗證”控件cvldentity的ServerValidate事件代碼如下：protected void cvlde ntity_ServerValidate(object source, ServerValidateEve ntArgs args) 設(shè)計并實現(xiàn)同一個頁面的分組驗證功能設(shè)計Web窗體新建一個 Web窗體，切換到設(shè)計視圖。如圖3-9所示，在圖3-8的基礎(chǔ)上，再向頁面添加1個Botton控件、1個Label控件和1個ValidationSummary控件。適當(dāng)調(diào)整個控件的位

33、置和 大小。圖3-9設(shè)計界面（2）（2）設(shè)置屬性在表3-1的基礎(chǔ)上，設(shè)置必須輸入驗證”控件rvfName的屬性ValidatorGroup值為groupName ;設(shè)置其他驗證控件和確定”按鈕的屬性Validatio nF roup值為groupSubmit ；新添加控件的屬性設(shè)置如表3-2所示。表2-1各控件的屬性設(shè)置表控件屬性名屬性值說明Butt onIDBtn ValidateName“用戶名是否可用”按鈕的編程名稱Text用戶名是否可用“用戶名是否可用”按鈕上顯示的文 本Validatio nGroupgroupName單擊按鈕時驗證 groupName組LabelIDlblName顯

34、示用戶名是否可用”信息的Label 控件編程名稱Text【空初始不顯示任何內(nèi)容Validatio nSummaryIDvsName匯總驗證”控件的編程名稱ShowMessageBoxTrue以對話框形式顯示匯總的驗證錯誤 信息ShowSummaryFalse不在網(wǎng)頁上顯示匯總的驗證錯誤信 息Validatio nGroupGroupName匯總groupName組的錯誤驗證信息（3）編寫事件代碼除包含實驗步驟 1中cvldentity_ServerValidate 和btnSubmit_Click事件代碼外，還要添加按 鈕btnValidateName被單擊時執(zhí)行的事件代碼如下：protect

35、ed void btnValidateName_Click(object sender, EventArgs e)驗內(nèi)容及要求設(shè)計并實現(xiàn)一個簡易聊天室要求如下：頁面瀏覽效果如圖4-1圖4-4所示。用戶名和密碼信息存儲在二維數(shù)組中。圖4-2圖4-4使用框架技術(shù)。(4)必須包含 HttpResponse、Session 和 Application 的應(yīng)用。1)2)3)4)圖4-1圖4-2圖4-3圖4-4“聊天室”瀏覽效果(“聊天室”瀏覽效果(“聊天室”瀏覽效果(“聊天室”瀏覽效果(2.設(shè)計并實現(xiàn)同一個簡易的購物車 要求如下：(1)頁面瀏覽效果如圖 4-5所示圖4-5購物車效果(1)選擇相應(yīng)寵物，單

36、擊放入“放入購物車”按鈕，可看到供選擇的寵物，如圖4-6所示。圖4-6購物車效果(2)如圖4-7所示，單擊“清空購物車”按鈕，將清除購物車中的寵物信息，并顯示“沒有 選擇任何寵物”的提示信息。圖4-7購物車效果(3)三.實驗步驟1.設(shè)計并實現(xiàn)一個簡易的聊天室 (1 )新建網(wǎng)站新建一個網(wǎng)站，添加Web窗體、Web窗體、Web窗體、HTML頁和全局應(yīng)用程序類。其中用于聊天室用戶登錄；用于顯示聊天信息；用于發(fā)送聊天信息；用于設(shè)置框架頁；用于存儲Application_Start事件代碼。(2)設(shè)計如圖4-8所示，在設(shè)計視圖添加一個用于布局的表格，向表格輸入說明信息，添加2個TextBox控件、2個R

37、equiredFieldValidator 控件和1個Butt on控件，適當(dāng)調(diào)整各控件的大小 和位置。中各控件的屬性設(shè)置如表4-1所示。圖4-8設(shè)計界面(1) 表4-1各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtName“用戶名”文本 框的編程名稱RequiredFieldValidatorIDrfvName“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtName:驗證“用戶名”文本框Text*驗證無效時提示 的錯誤信息TextBoxIDtxtPassword“密碼”文本框 的編程名稱TextModePassword設(shè)置“密碼”文 本框為密碼模式

38、RequiredFieldValidatorIDrfvPassword“必須輸入驗 證”控件的編程 名稱Con trolToValidatetxtPassword驗證“密碼”文 本框Text*驗證無效時提示 的錯誤信息Butt onIDbtn Logi n“登錄”按鈕的 編程名稱Text登錄“登錄”按鈕上 顯示的文本(3)編寫事件代碼在所有事件代碼外聲明一個存放用戶名和密碼的數(shù)組，代碼如下:4oString();(6)設(shè)計如圖4-9所示，在設(shè)計視圖添加1個Label控件、1個TextBox控件和1個Butt on控件適當(dāng)調(diào)整各控件的大小和位置。圖4-9設(shè)計界面(2) 中各控件的屬性設(shè)置如表4-

39、2所示。表4-2各控件的屬性設(shè)置表控件屬性名屬性值說明LabelIDlblName顯示發(fā)言人信息的Label控件編程名稱TextBoxIDtxtMessage“聊天消息”文 本框的編程名稱TextModeMultiLi ne設(shè)置“聊天消息” 文本框為多行模 式Butt onIDbtnSend“發(fā)送”按鈕的 編程名稱Text發(fā)送“發(fā)送”按鈕上 顯示的文本(7)編寫事件代碼Web窗體首次載入時執(zhí)行的代碼如下：protected void Page_Load( object sender, EventArgs e)=發(fā)言人：+ Session user;if (!lsPostBack)Applica

40、tionmessage += Session user + 進入聊天室 ;按鈕btnSend被單擊時執(zhí)行的事件代碼如下：protected void btnSend_Click( object sender, EventArgs e)()；Applicationmessage += Session user + 說：+ +( + + )()；_mi .一j(8)編寫可在FrontPage或Dreamweaver中建立一個上下框架”網(wǎng)頁，再將HTML源代碼復(fù)制岀來。也可以在 Visual Studio2008中建立一個 HTML頁，再輸入代碼如下：! DOCTYPEitmlPUBLIC -3C設(shè)

41、計并實現(xiàn)一個簡易的購物車(1 )新建網(wǎng)站新建一個網(wǎng)站，添加Web窗體、Web窗體。其中用于選擇寵物并放入到購物車中；用于查看購物車中寵物信息、清空購物車和返回。設(shè)計如圖4-10所示，在“設(shè)計”視圖添加1個CheckBoxList控件和2個Butt on控件。適當(dāng)調(diào)整個控件的位置和大小。圖4-10設(shè)計界面(3)中各控件的屬性設(shè)置如表4-3所示。其中復(fù)選框列表空間中的列表項請參考圖4-10設(shè)置表4-3各控件的屬性設(shè)置表控件屬性名屬性值說明CheckBoxLi stIDchklsPet復(fù)選框列表控件的編程名稱Butt onIDbtn Buy“放入購物車”按鈕的編程名稱Text放入購物車“放入購物車”

42、按鈕上顯示的文本Butt onIDbtn View“查看購物車”按鈕的編程名稱Text查看購物車“查看購物車”按鈕上顯示的文本(3)編寫事件代碼Web窗體首次載入時執(zhí)行的代碼如下：protected void Page_Load( object sender, EventArgs e) if (!IsPostBack)elected)ext +按鈕btnView被單擊時執(zhí)行的事件代碼如下:protected void btnView_Click( object sender, EventArgs e)III!);(設(shè)計如圖4-11所示，在“設(shè)計”視圖添加1個Label控件、1個CheckBox

43、List控件和2個Butt on控件。適當(dāng)調(diào)整個控件的位置和大小。圖4-11設(shè)計界面(4) 中各控件的屬性設(shè)置如表4-4所示。表4-4各控件的屬性設(shè)置表控件屬性名屬性值說明LabelIDlblMsg用于顯示購物車中是否包含寵物信 息的Label控件編程名稱Text空初始不顯示任何內(nèi)容CheckBoxLi stIDchklsPet復(fù)選框列表控件的編程名稱Butt onIDbtn Clear“清空購物車”按鈕的編程名稱Text清空購物車“清空購物車”按鈕上顯示的文本Butt onIDbtnCon ti nue“繼續(xù)購物”按鈕的編程名稱Text繼續(xù)購物“繼續(xù)購物”按鈕上顯示的文本(5)編寫事件代碼W

44、eb窗體首次載入時執(zhí)行的代碼如下：protected void Page_Load( object sender, EventArgs e)if (!lsPostBack)if (Session cart = null | Session cart =) oString();驗內(nèi)容及要求利用 SqlDataSource 和 LINQ to SQL 進行 SQL Server Express 2005的數(shù)據(jù)管理要求如下：建立數(shù)據(jù)管理的導(dǎo)航頁面，瀏覽效果如圖5-1所示。圖5-1 SQL數(shù)據(jù)管理導(dǎo)航頁瀏覽效果如圖5-2所示，單擊“顯示全部”按鈕時，顯示MyPetShop數(shù)據(jù)庫中Category表的內(nèi)

45、容 要求利用SqlDataSource實現(xiàn)。圖5-2“顯示全部”瀏覽效果 在圖5-1中，單擊“模糊查找”按鈕呈現(xiàn)如圖5-3所示的界面；如圖 5-4所示，輸入要查找的內(nèi)容，當(dāng)未找到滿足條件的數(shù)據(jù)時顯示“沒有滿足條件的數(shù)據(jù)！”，如圖5-5所示,當(dāng)找到滿足條件的數(shù)據(jù)時以GridView形式顯示數(shù)據(jù)。要求利用SqlDataSource實現(xiàn)。 TOC o 1-5 h z 圖 5-3“模糊查找”瀏覽效果（1 ）圖 5-4“模糊查找”瀏覽效果（2 ）圖 5-5“模糊查找”瀏覽效果（3 ）（4）在圖 5-1 中，單擊“插入”按鈕呈現(xiàn)如圖 5-6 所示的界面；輸入“分類名”和“描述”， 再單擊圖 5-6 中“插

46、入”按鈕后，將向 Category 表添加一條記錄，其中新增記錄中的“分 類 Id ”自動遞增； 單擊“返回” 按鈕將返回到數(shù)據(jù)管理的導(dǎo)航頁面，要求利用 SqlDataSource實現(xiàn)。圖 5-6 SQL “插入”瀏覽效果（5）在圖 5-1 中，輸入“分類 Id ”，再單擊“編輯”按鈕呈現(xiàn)如圖5-7 所示的界面；此時可修改“分類名”和“描述”，但不能修改“分類 Id ”。修改完成后單擊“修改”按鈕將修 改 Category 表中對應(yīng)的數(shù)據(jù)。單擊“返回”按鈕將返回到數(shù)據(jù)管理的導(dǎo)航頁面。要求利用 SqlDataSource 。圖 5-7 “修改”瀏覽效果（6）在圖 5-1 中，輸入“分類 Id ”

47、，再單擊“編輯 LINQ ”按鈕實現(xiàn)“要求（ 5）”的功能， 但必須使用 LINQ to SQL 實現(xiàn)。（7）在圖 5-1 中，輸入“分類 Id ”，再單擊“刪除”按鈕實現(xiàn)“要求（5）”的功能，但必須使用 LINQ to SQL 實現(xiàn)。利用 LINQ 技術(shù)將 Category 表轉(zhuǎn)換成 XML 文檔文檔 要求轉(zhuǎn)換后的結(jié)構(gòu)如圖 5-8 所示圖 5-8 瀏覽效果利用 LINQ to XML管理 XML 文檔要求如下：（1）建立數(shù)據(jù)管理的導(dǎo)航頁面，瀏覽效果如圖5-9 所示。圖 5-9 XML 數(shù)據(jù)管理的導(dǎo)航頁瀏覽效果（2）單擊“顯示全部”按鈕，將新開一個 IE 窗口或選項卡顯示文檔內(nèi)容。（3）如圖

48、5-10 所示，輸入“分類名”，單擊“查詢”按鈕，當(dāng)未找到滿足條件的數(shù)據(jù)時顯 示“沒有滿足條件的數(shù)據(jù)！”，如圖5-11 所示，當(dāng)找到滿足條件的數(shù)據(jù)時以Label 形式顯示滿足條件數(shù)據(jù)。圖 5-10 “查詢”效果（ 1 ）圖 5-11 “查詢”效果（ 2 ）（4）在圖 5-9 所示，單擊“插入”按鈕呈現(xiàn)如圖 5-12 所示的界面；輸入“分類Id”、 “分類名”和“描述”，再單擊圖 5-12 中“插入”按鈕，將向中添加相應(yīng)的元素。圖 5-12 XML “插入”效果三. 實驗步驟1. 利用 SqlDataSource 和 LINQ to SQL 進行 SQL Server Express 2005

49、的數(shù)據(jù)管理 （ 1 ）新建網(wǎng)站新建一個網(wǎng)站， 添加 Web窗體、Web窗體、Web窗體、Web窗體、Web窗體。其中 作 為數(shù)據(jù)管理的導(dǎo)航頁面； 用于模糊查詢數(shù)據(jù)； 用于插入數(shù)據(jù)； 利用 SqlDataSource 修改數(shù)據(jù)； 利用 LINQ to SQL 修改數(shù)據(jù)。將建立 MyPetShop 數(shù)據(jù)庫復(fù)制到 App_Data 文件夾。（2）設(shè)計如圖 5-13 所示，向頁面輸入“分類Id ：”，添加 1 個 TextBox 控件、 6 個 Button 控件、1 個 GridView 控件和 1 個 SqlDataSource 。適當(dāng)調(diào)整各控件的大小和位置。 圖 5-13 設(shè)計界面（ 1 ）表5

50、-1各控件的屬性設(shè)置表控件屬性名屬性值說明TextBoxIDtxtCategoryId“分類Id”文本框的編程名稱Text只用于“編輯”和“刪除”“分類Id ”文本框輸入值的提示信 息Butt onIDbt nQueryAll“顯示全部”按鈕的編程名稱Text顯示全部“顯示全部”按鈕上顯示的文本Butt onIDbtnF uzzy“模糊查找”按鈕的編程名稱Text模糊查找“模糊查找”按鈕上顯示的文本Butt onIDbtnln sert“插入”按鈕的編程名稱Text插入“插入”按鈕上顯示的文本Butt onIDbtn Edit“編輯”按鈕的編程名稱Text編輯“編輯”按鈕上顯示的文本Butt

51、onIDbtn EditL inq“編輯LINQ ”按鈕的編程名稱Text編輯LINQ“編輯LINQ ”按鈕上顯示的文本Butt onIDbtn Delete“刪除”按鈕的編程名稱Text刪除“刪除”按鈕上顯示的文本GridViewIDGvCategoryGridView控件的編程名稱SqlDataSourceIDsdsCategorySqlDataSource控件的編程名稱sdsCategory控件的其他屬性設(shè)置可通過配置數(shù)據(jù)源向?qū)Ш蛯傩源翱谕瓿?。?dāng)配置Select語句時，單擊高級按鈕，選中生成Insert、Update和Delete語句。向?qū)渲猛旰螅鐖D5-14所示，在屬性窗口設(shè)置屬性D

52、eleteQuery。圖5-14屬性DeleteQuery設(shè)置界面編寫事件代碼按鈕btnQueryAll被單擊時執(zhí)行的事件代碼如下：protected void btn QueryAll_Click(object sen der, Eve ntArgs e)=sdsCategory;();按鈕btnFuzzy被單擊時執(zhí)行的事件代碼如下：protected void btnF uzzy_Click(object sen der, Eve ntArgs e)();按鈕btnlnsert被單擊時執(zhí)行的事件代碼如下：protected void btnln sert_Click(object sen

53、der, Eve ntArgs e)();按鈕btnEdit被單擊時執(zhí)行的事件代碼如下：protected void btn Edit_Click(object sen der, Eve ntArgs e)(”？Categoryld= + ;按鈕btnEditLinq被單擊時執(zhí)行的事件代碼如下：protected void btn EditL inq _Click(object sen der, Eve ntArgs e)(?CategoryId= + ;按鈕btnDelete被單擊時執(zhí)行的事件代碼如下：protected void btn Delete_Click(object sen de

54、r, Eve ntArgs e)oStri ng();=OName.ToStri ng();=0Desc n.ToStri ng();按鈕btnUpdate被單擊時執(zhí)行的事件代碼如下：protected void btn Update_Click(object sen der, Even tArgs e)用LINQ 技術(shù)將Category表轉(zhuǎn)換成XML文檔文檔新建一個 Web窗體，切換到“設(shè)計”視圖。在空白處雙擊，編寫Web窗體載入時執(zhí)行的代碼如下：protected void Page_Load(object sen der, Eve ntArgs e)用LINQ to XML 管理XML文

55、檔(1 )新建網(wǎng)站新建一個網(wǎng)站，添加 Web窗體、Web窗體。其中作為數(shù)據(jù)管理的導(dǎo)航頁面；用于插入元素。設(shè)計如圖5-22所示，向頁面輸入“分類名：”，添加 1個TextBox控件、3個Butt on控件、1 個Label控件。適當(dāng)調(diào)整各控件的大小和位置。分別設(shè)置各控件的屬性ID值為：txtName、btnQueryAll、btnQuery、btnlnsert和lblMsg，其它屬性參考圖5-22界面進行設(shè)置。圖5-22設(shè)計界面(6)編寫事件代碼按鈕 btnQueryAll 被單擊時執(zhí)行的事件代碼如下：protected void btnQueryAll_Click(object sender,

56、 EventArgs e)alue + + Name ： + (Name).Value + + Descn ： + (Descn).Value;按鈕 btnInsert 被單擊時執(zhí)行的事件代碼如下：protected void btnInsert_Click(object sender, EventArgs e)();設(shè)計如圖5-23所示，向頁面輸入“分類 Id :”、“分類名：”和“描述：”，添加 3個TextBox控件、 2 個 Button 控件。適當(dāng)調(diào)整各控件的大小和位置。分別設(shè)置各控件的屬性 ID 值為：txtCategoryld、txtName、txtDescn、btnlnsert

57、 和 btnReturn，其它屬性參考圖 5-23 界面進行設(shè)置。圖 5-23 設(shè)計界面( 7)( 5 )編寫事件代碼按鈕 btnlnsert 被單擊時執(zhí)行的事件代碼如下：protected void btnlnsert_Click(object sender, EventArgs e)string xmlFilePath = (/);XElement els = (xmlFilePath);驗內(nèi)容及要求設(shè)計并實現(xiàn)一個購物網(wǎng)站MyPetShop要求如下：商品查看頁瀏覽效果如圖 6-1 所示，當(dāng)選擇不同的分類名時，顯示該分類中包含的商品 信息；當(dāng)分類中包含多個商品時，能分頁顯示商品信息；當(dāng)單擊“

58、購買”按鈕時重定向到 購物車頁，并將所在行的商品添加到購物車。圖 6-1 “商品查看”頁瀏覽效果購物車頁瀏覽效果如圖 6-2 所示，當(dāng)選擇購物車中商品后，單擊“刪除商品”按鈕時將 刪除購物車中選中的商品；當(dāng)單擊“清空購物車”按鈕時將清空購物車中所有商品；當(dāng)輸 入“購買數(shù)量”，單擊“重新計算”按鈕時將重新計算購物車中商品的總價；當(dāng)單擊“結(jié) 算”按鈕時將重定向到結(jié)算頁；當(dāng)單擊“繼續(xù)購物”按鈕時將重定向到商品查看頁；若繼 續(xù)購物選購的是購物車中已有的商品，則在購物車頁將增加該商品的購買數(shù)量；另外，要 求將購物車中數(shù)據(jù)保存到 Profile 。圖 6-2 “購物車”頁瀏覽效果結(jié)算頁瀏覽效果如圖 6-3

59、 和圖 6-4 所示，當(dāng)輸入“送貨地址”、“郵編”和“聯(lián)系電話” 等信息后，單擊“提交”按鈕將在 Order 表和 Orderltem 表中添加記錄，再清除 Profile 中存 儲的購物車商品數(shù)據(jù)，最后顯示“已成功結(jié)算，謝謝光臨！”的信息。圖 6-3 “結(jié)算”頁瀏覽效果( 1)圖 6-4 “結(jié)算”頁瀏覽效果( 2)利用 DetailsView 控件實現(xiàn)數(shù)據(jù)插入、編輯、刪除等操作要求如下：數(shù)據(jù)使用Product表。瀏覽效果如圖6-5所示。如圖6-6和圖6-7所示，在插入和編輯數(shù)據(jù)時涉及的外鍵數(shù)據(jù)以下拉列表框形式進行選擇輸入。圖6-5數(shù)據(jù)瀏覽效果圖6-6數(shù)據(jù)“插入”效果圖6-7數(shù)據(jù)“編輯”效果三

60、.實驗步驟設(shè)計并實現(xiàn)一個購物網(wǎng)站MyPetShop(1 )新建網(wǎng)站新建一個網(wǎng)站，添加 Web窗體、Web窗體、Web窗體。其中 作為商品查看頁；作為 購物車頁；作為結(jié)算頁。(2)設(shè)計如圖6-8所示，向頁面輸入“分類名：”，添加1個DropDownList控件、1個GridView 控件。適當(dāng)調(diào)整各控件的大小和位置。圖6-8設(shè)計界面(1) 中各控件的屬性設(shè)置如表6-1所示。表6-1各控件的屬性設(shè)置表控件屬性名屬性值說明DropDow nListIDddlCategory“分類名”下拉列表框的編程名稱AutoPostBackTrue當(dāng)下拉列表框中的值改變時，弓1發(fā) 頁面往返GridViewIDGv