重慶學(xué)院《ASP.NET設(shè)計與開發(fā)》實訓(xùn)設(shè)計系別：計算機工程系專業(yè)：計算機應(yīng)用技術(shù)學(xué)號：姓名：指導(dǎo)教師：年6月17日目錄模塊一登陸注冊模塊 21.1用戶登陸模塊設(shè)計 21.2用戶注冊模塊設(shè)計 81.3修改密碼模塊設(shè)計 11模塊二在線投票模塊設(shè)計思想 152.1設(shè)計思想 152.2實現(xiàn)過程 162.3投票頁面設(shè)計 16模塊三留言板模塊設(shè)計思想 213.1設(shè)計思想 213.2數(shù)據(jù)庫設(shè)計 223.3留言板模塊實現(xiàn)過程 233.3.1index.aspx頁面設(shè)計 233.3.2查看留言頁面設(shè)計 283.4管理留言 32模塊一登陸注冊模塊1.1用戶登陸模塊設(shè)計設(shè)計用戶登陸界面，帶有驗證碼。1.在企業(yè)管理器中創(chuàng)建數(shù)據(jù)庫DBstudent，創(chuàng)建表userTable，包含4個字段。如表：UserTable表字段字段數(shù)據(jù)類型約束說明userIDvarchar主鍵用戶名userPsdvarchar密碼QQvarcharQQ信息E-mailvarchar電子郵件輸入幾組數(shù)據(jù)在數(shù)據(jù)庫中新建表。2.新建站點ch09，新建一Web頁面Login.aspx,頁面中添加一個panle控件，設(shè)置Panel控件邊框和邊框顏色，然后插入表格，選擇“自定義”，新建一個行2列表格，設(shè)置好后，單擊“確定”按鈕，在Panel控件上添加表格，要放在Panel控件中，然后在各個單元格中添加三個TextBox控件，一個非空驗證控件，一個ImageButton控件，一個Label控件，兩個Button控件，調(diào)整各控件大小和位置如圖：登陸界面設(shè)置3.打開源碼設(shè)計界面，即HTML代碼界面，在6行第二個單元格添加兩個<a>標(biāo)識，表示當(dāng)單擊“注冊新用戶”時連接到Regedit.aspx頁面，當(dāng)單擊“修改密碼”時連接changPawd.aspx頁面，這兩個頁面將在后面陸續(xù)介紹。代碼以下：<ahref="Regedit.aspx"style="font-size:12px">注冊新用戶</a><ahref="changPawd.aspx"style="font-size:12px">修改密碼</a>各個控件屬性設(shè)置表控件類型控件名稱屬性設(shè)置結(jié)果TextBoxTextBox1IDtxtNameTextBox2IDtxtPasswdTextModePasswordTextBox3IDtctCodeButtonButton1IDbtnOkText登陸B(tài)utton2IDbtnClearText重置RequireFiledValidatorRequireFiledValidator1IDrfvNullControlToValidatetxtNameImageButtonImageButton1IDIbtnCodeLabelLabel1Text看不清？單擊換一張PanlePanle1BorderColorBlueBorderWidth2px4.新建Web頁面ValidateCode.aspx，打開ValidateCode.aspx.cs文件。在ValidateCode.aspx.cs中，輸入以下代碼，產(chǎn)生隨機驗證碼函數(shù)：代碼說明：隨機數(shù)類System.Random類提供以下方法用于產(chǎn)生各種滿足不一樣要求隨機數(shù)。以下列圖所表示：Random類各種方法編號方法名稱功效描述1Next()返回一個0~之間整數(shù)2Next(i)返回一個0~i之間整數(shù)3Next(I,j)返回一個i~j之間整數(shù)4Nextdouble()返回一個0~1之間整數(shù)5Nextdouble(byte())用0~255之間隨機整數(shù)作為字節(jié)數(shù)組各元素值5.在ValidateCode.aspx頁面中產(chǎn)生一個放置隨機碼圖片，故在ValidateCode.aspx.cs中添加一個產(chǎn)生隨機碼圖片方法createImage(string),代碼以下：6.打開ValidateCode.aspx.cs文件，為Page對象Load事件添加處理代碼，調(diào)用產(chǎn)生隨機碼函數(shù)和產(chǎn)生帶有隨機碼圖片函數(shù)，代碼以下：7.打開Login.aspx頁面，雙擊“登陸”按鈕，添加button1按鈕click事件處理代碼，并導(dǎo)入數(shù)據(jù)庫操作名字空間System.Data.SqlClient，代碼以下：8.新建一頁面Success.aspx,輸入文字“恭喜你，登陸成功！”，并添加一個<a>標(biāo)識用來返回登陸頁面。如圖所表示：登陸成功界面9.打開Login.aspx頁面，設(shè)置imgeButton1控件ImageUrl屬性為ValidateCode.aspx，雙擊imgeButton1按鈕，添加Click事件處理代碼：以下：10.雙擊“重置”按鈕，為btnClear按鈕Click事件添加處理代碼。以下：11.至此，登陸界面已經(jīng)完成。設(shè)置Login.aspx頁面為起始頁，運行程序，等到以下所表示界面：1.2用戶注冊模塊設(shè)計1.新建一頁面Regedit.aspx,添加各個控件設(shè)計如圖頁面：控件屬性格式表控件類型控件名稱屬性設(shè)置結(jié)果TextBoxTextBox1IDtxtNameTextBox2IDtxtPasswdTextModePasswordTextBox3IDtxtCodeTextBox5IDtxtQQTextBox6IDtxtEmailRequireFiledValidatorRequireFiledValidator1IDrfvNullControlToValidatetxtNameCompareValidatorCompareValidator1IDcvPswdControlToValidatetxtPswd2ControlComparetxtPswdImageButtonImageButton1IDIbtnCodeRegularExpressionValidatorRegularExpressionValidator1IDRevEmailControlToValidatetxtEmailValidateExpression設(shè)置為郵件格式PanlePanle1BorderColorBlueBorderWidth2px2.雙擊“注冊”按鈕，打開Regedit.aspx.cs頁面。添加導(dǎo)入數(shù)據(jù)庫操作名字控件System.Data.SqlClient，添加Button1按鈕Click事件處理代碼：3.保留全部文件，運行程序，在登陸界面單擊“新用戶注冊”。如圖：然后輸入注冊信息，點擊“注冊”。1.3修改密碼模塊設(shè)計1.在站點ch09，新建一頁面chanPswd.aspx，在頁面中添加1個Panel控件，設(shè)置Panel控件邊框和邊框顏色，在Panel控件上添加一6行2列表格，在單元格中輸入適宜文字，在個單元格內(nèi)添加四個TextBook控件，兩個Button控件，兩個試驗控件，一個<a>標(biāo)識，href屬性設(shè)置為Login.aspx頁面，調(diào)整各控件大小和位置。如圖：各控件屬性設(shè)置控件類型控件名稱屬性設(shè)置結(jié)果TextBoxTextBox1IDtxtNameTextBox2IDtxtOldswdTextModePasswordTextBox3IDtxtNewPawdTextModePasswordTextBox4IDtxtPswd2TextModePassword2RequireFiledValidatorRequireFiledValidator1IDRfvNullControlToValidatetxtNameRequireFiledValidator2IDRfvPswdControlToValidatetxtOldPswdCompareValidatorCompareValidator1IDcvPswdControlToValidatetxtOldPswdControlComparetxtPswd2PanlePanle1BorderColorBlueBorderWidth2px2.雙擊“修改”按鈕，打開changePswd.aspx.cs輸入以下代碼：3.保留全部文件，運行程序，在登陸界面單擊“修改密碼”按鈕，打開修改密碼界面如圖：修改密碼界面4.登陸界面已經(jīng)完成，設(shè)置Login.aspx頁面為起始頁，運行程序，如圖界面：登陸運行界面當(dāng)用戶名為空時。單擊登陸按鈕，得如圖所表示界面：用戶名為空當(dāng)驗證碼看不清時，還能夠單擊圖片重新生成帶有驗證碼圖片，輸入正確用戶名和密碼，以及正確驗證碼，單擊“登陸”按鈕，如圖：登陸成功小結(jié)介紹了網(wǎng)站開發(fā)慣用模塊：登陸注冊模塊。首先介紹了產(chǎn)生驗證碼所包括Graphics類，并簡明介紹了ASP。Net圖像處理過程，全方面講解了登陸注冊模塊試驗過程，以及怎樣產(chǎn)生驗證碼過程和SQLServer數(shù)據(jù)庫存放數(shù)據(jù)方法。模塊二在線投票模塊設(shè)計思想2.1設(shè)計思想伴隨信息時代發(fā)展，“在線投票系統(tǒng)”在網(wǎng)絡(luò)上日益流行起來，為了搜集各種不一樣信息和意見，大部分都充分利用了投票系統(tǒng)。本節(jié)將以近期出現(xiàn)在中央電視臺《新聞聯(lián)播》4位主持人為題，投票選出觀眾最為喜愛主持人。在線投票系統(tǒng)包含5個文件，5個頁面。主要難點是以圖形形式顯示投票結(jié)果。①Vote.aspx文件：主要用于顯示投票界面，放置主持人頭像供選擇。②Vote.aspx.cs文件：用于執(zhí)行后臺程序，檔選擇某個主持人后，其票數(shù)增加。③VoteResult.aspx文件：用于顯示投票結(jié)果界面，以圖形形式顯示投票結(jié)果。④VoteResult.aspx.cs文件：用于執(zhí)行后臺程序。⑤VoteXML,xml文件：存放候選項和投票結(jié)果。2.2實現(xiàn)過程在線投票模塊主要頁面有投票頁面和查看投票頁面，投票頁面主要提供用戶進(jìn)行投票，而查看投票結(jié)果頁面提供用戶查看各個選項投票數(shù)，以圖形形式來顯示投票結(jié)果。過一個例子來介紹一圖形模式顯示投票結(jié)果，以XML文檔存放數(shù)據(jù)在線投票模塊過程。2.3投票頁面設(shè)計功效描述：在投票界面，用戶能夠選中4個主持人中最喜愛一個，單擊【投票】按鈕。成功投票后提醒投票成功，并累計票數(shù)。步驟以下：①打開VisualStudio開發(fā)環(huán)境，新建站點并命名為“在線投票模塊”，將默認(rèn)Web頁面改為Vote.aspx。②在菜單欄中選擇【布局】|【插入表】命令，插入一個4行4列表格，選中第一行單元格，選擇【布局】|【合并單元格】命令，一樣操作第二行。在第一行中輸入文本“在線投票系統(tǒng)”，第二行輸入文本“《新聞聯(lián)播》最近亮相主持人你最喜歡哪一個？”設(shè)置顏色和字體大小。③在處理方案資源管理器中，右擊添加新文件夾image，用于存放照片，用于存放各主持人頭像，右擊image文件夾，在彈出快捷菜單中選擇【添加現(xiàn)有項】添加各頭像。④在表格第三行每個單元格內(nèi)，添加Image控件和RadioButton控件，Image控件顯示頭像，RadioButton控件用于選擇項，其屬性ID分別為rbtnGzj，rbtnHx,rbtnKh,rbtnLzx,Text屬性分別為每個主持人名字，將4個RadioButton控件設(shè)置為同一組，，即它們GroupName屬性設(shè)置為同一個名字，如v，并設(shè)置“郭志堅“為默認(rèn)選項，即Checkd屬性為true。設(shè)置每個Image控件ImageUrl為第二步驟中所添加對應(yīng)圖片。⑤在表格第4行第2個單元格和第3個單元格，各添加一個Button控件，其Text屬性分別為“投票“和”查看投票結(jié)果，設(shè)計好界面以下列圖所表示。界面設(shè)計⑥添加XML數(shù)據(jù)文檔，在處理方案管理器中右擊添加一個新XML文檔VoteXml.xml，添加各元素，代碼以下：⑦添加投票方法VoteAdd（），當(dāng)在投票頁面中選中某一項，單擊投票后，其投票結(jié)果加1。VoteAdd（）方法代碼以下：投票界面設(shè)計⑧打開VoteResult.aspx頁，為Page對象Load事件添加處理代碼以下：⑨回到頁面設(shè)計，雙擊【投票】按鈕，添加Button1Click事件處理代碼，調(diào)用投票Vote方法以下：⑩運行測試，得到10-17所表示投票成功頁面。投票成功界面模塊三留言板模塊設(shè)計思想3.1設(shè)計思想留言板模塊主要功效是實現(xiàn)發(fā)表留言，回復(fù)留言，刪除留言功效。其中普通用戶能夠發(fā)表留言，而管理員用戶則能夠?qū)ζ胀ㄓ脩舭l(fā)表留言進(jìn)行回復(fù)，能夠刪除發(fā)表留言。在本程序中，將建立12個文件，6個頁面，1個文件夾，主要難點是ADO.NET數(shù)據(jù)庫編程和數(shù)據(jù)顯示控件DataList使用方法。留言板模塊文件結(jié)構(gòu)以下列圖所表示:各文件說明詳細(xì)以下:⑴index.aspx文件；留言板首頁，顯示需要發(fā)表留言用戶基本信息，并顯示近期發(fā)表留言。⑵index.aspx。cs文件；用于執(zhí)行后臺程序，當(dāng)用戶輸入基本信息，并發(fā)表留言后。提交成功，將留言信息保留在數(shù)據(jù)庫中。⑶Login。Sapx文件；主要用于顯示管理員安全登陸界面，只有管理員能夠登陸成功，登陸成功界面是顯示全部留言信息。⑷index.aspx。cs文件：用于執(zhí)行后臺程序，當(dāng)用戶名和密碼都正確時，進(jìn)去ALLText.aspx頁面。⑸ValidateCode.aspx文件：用于產(chǎn)生驗證碼頁面。⑹Reply.aspx文件：用于進(jìn)行回復(fù)留言界面，頁面中顯示發(fā)表留言，由管理員進(jìn)行回復(fù)。⑺Reply.aspx.cs文件：用于執(zhí)行后臺程序，完成提交管理員回復(fù)留言。⑻allContent.aspx文件：用于顯示全部留言信息。⑼allContent.aspx.cs文件：用于執(zhí)行后臺程序。⑽GLContent.aspx文件：用于管理員進(jìn)行刪除和回復(fù)留言界面。⑾GLContent.aspx.cs文件：用于執(zhí)行后臺程序。⑿imgages文件夾：用于存放模塊中設(shè)計界面圖片。3.2數(shù)據(jù)庫設(shè)計留言板模塊包含兩張表，用戶和留言信息表。其中用戶表用來存放買家即管理員信息，管理員能夠刪除、回復(fù)全部留言；留言信息表用來存放買家留言信息，包含留言時間、買家用戶名、QQ信息、E-maill地址等。打開SQLServer企業(yè)管理器，創(chuàng)建數(shù)據(jù)庫ContentDB，創(chuàng)建兩張表，用戶名和留言板信息。用戶表（UserTable）和留言信息表（ContentText）設(shè)計以下列圖所表示:用戶表（UserTable）在用戶表中設(shè)置一條統(tǒng)計，用戶名為“Redwendy”，密碼為“1234”。留言信息表（ContentText）3.3留言板模塊實現(xiàn)過程留言板主要功效有：發(fā)表留言、回復(fù)留言、刪除留言。下面將經(jīng)過詳細(xì)例子詳細(xì)講解留言板制作過程。3.3.1index.aspx頁面設(shè)計在index.aspx頁面中應(yīng)完成發(fā)表留言功效，并顯示近期留言，步驟以下：⑴新建站點ch11，將默認(rèn)頁面default.aspx改為index.aspx。在頁面中添加8行2列，在表格單元格中輸入文本，添加4個TextBox控件，用來輸入用戶基本信息；兩個Button控件、一個DataList控件，3個imageButton控件，兩個Image控件，調(diào)整各控件大小.以下列圖所表示:首頁設(shè)計頁面⑵選擇【網(wǎng)站】|【新建項】命令，添加類文件，并命名為Content.cs，添加代碼以下：⑶添加操作類Operator.cs。導(dǎo)入命名空間System.Data.SqlClient，在操作添加連接數(shù)據(jù)庫方法ConNETcionDB（），增加留言方法AddContent（）代碼以下：⑷打開index.aspx頁面，在頁面添加綁定數(shù)據(jù)控件方法DataBg（）代碼以下：⑸打開index.aspx頁面，對DataList1控件進(jìn)行模板編輯，分別設(shè)置其HeaderTemplate項和ItemTemplate項，部分Html標(biāo)識以下：⑹打開index.aspx頁面，為【提交】按鈕添加Click事件代碼以下：⑺為【重置】按鈕添加Click事件處理代碼以下列圖：⑻最終為Page對象Load事件添加處理代碼，綁定DataList控件，并顯示部分留言信息，代碼以下：⑼至此，首頁設(shè)計完成。將index.aspx設(shè)置為起始頁，運行程序，輸入用戶信息和留言。⑽單擊提交按鈕，將彈出提交成功對話框，在對話框中單擊【確定】按鈕，，留言信息已提交給數(shù)據(jù)庫。3.3.2查看留言頁面設(shè)計①打開站點ch11，選擇經(jīng)【新建項目】，添加新Web頁面allContent.aspx，設(shè)置表格中單元格文本內(nèi)容，添加各控件并設(shè)置DataLiat控件模板列，以下列圖所表示：設(shè)計頁面②因為DataLiat控件沒有內(nèi)置分頁功效，需要寫代碼進(jìn)行分頁。添加兩個LinkButton，分別表示上一頁和下一頁，設(shè)置它們ID為lbtnNext和lbtnPre，設(shè)置CommandName屬性為next和pre，添加三個Lable控件設(shè)置它們ID分別為lbCount、lblContent和lblPageCount，調(diào)整控件位置和大小。以下列圖所表示：③設(shè)計頁面已完成，添加一些操作方法。打開allContent.aspx.cs文件，在allContent類中添加計算留言總數(shù)方法Counts（）代碼以下；④在allContent類中添加DataFill（）方法，用來填充數(shù)據(jù)集對象，代碼以下：⑤在allContent類中添加DataBg（）方法，用來綁定DataList數(shù)據(jù)控件，代碼以下：⑥在allContent類中添加電幾個全局變量，分別表示每頁顯示統(tǒng)計數(shù)，總統(tǒng)計數(shù)，當(dāng)前頁面，總頁數(shù)，添加Page_Load方法，代碼以下：⑧在allContent.aspx頁面中，選擇“上一頁”ListButton控件，在屬性窗口中找到Command事件，雙擊編寫事件處理代碼：⑨在首頁index.aspx中，雙擊【查看留言】按鈕，編寫連接到allContent.aspx代碼:⑩至此，查看留言頁面設(shè)計完成。3.4管理留言設(shè)計Login.aspx登錄頁面，登錄頁面效果如圖11-9所表示。⑴設(shè)計管理留言板界面，在站點ch11中，添加GLContent.aspx，在頁面中添加表格，在表格單元格中添加Image控件，ImageButton控件等，添加一個GridView控件，為GridView控件添加綁定列，如圖11-10所表示。設(shè)置各綁定列DataField屬性和HeadeText屬性，其中DataField屬性為數(shù)據(jù)庫ContentText中各個字段名⑵為GridView控件添加兩個CommandField按鈕列，一個用來刪除選定行數(shù)據(jù)，設(shè)置ButtonType屬性為Bu