【正文】 多出一個(gè)該控件。選擇好要上傳的圖片后，提交則上傳到服務(wù)器中，并設(shè)計(jì)系統(tǒng)能把圖片名保存到數(shù)據(jù)庫(kù)中。(2)用戶頭像資料展示在大量的注冊(cè)論壇和社區(qū)中，都有用戶選擇頭像或個(gè)人形象的模塊。在選擇圖片、上傳圖片時(shí)都可以使用該控件來更改用戶個(gè)人形象，如圖4_8所示。圖4．8用戶頭像資料展示在圖4．8中，該用戶頭像資料顯示模塊是一個(gè)用戶控件，在后續(xù)的兩站的實(shí)現(xiàn)中。將要用到該用戶控件。用戶控件里展示的圖片控件則是剛設(shè)計(jì)完成的圖片操作自定義控件?？梢钥吹皆搱D片操作自定義控件上沒有上傳文件控件按鈕，也沒有保存、刪除等按鈕。這是因?yàn)樵谑褂米远x控件的時(shí)候?qū)ζ鋵傩赃M(jìn)行了設(shè)置。具體的設(shè)置如下：BC：BClmage ID=“BP口Head”runat”svr．39。erW『idth=200}酗曲曉00lsShvw=true／BC：BCImage設(shè)計(jì)控件時(shí)，對(duì)其高度、寬度設(shè)置了默認(rèn)值均為100px。在用戶頭像資料展示的用戶控件模塊中必須讓圖片控件大一些，所以設(shè)置其高度、寬度為200px。同時(shí)還有屬性IsShow是指該圖片操作自定義控件只是用于顯示圖片，不具有上傳圖片、保存圖片和刪除圖片以及放大圖片等功能。這里的圖片是依控件大小按比例縮小或者放大的。在后面的介紹中可以看到如果需要該圖片操作自定義控件具有放大功能時(shí)需要設(shè)置屬性IsZoom為he，雙擊該圖片，圖片將會(huì)以其原始大小展示給用戶。(3)圖片集中展示界面圖片集中展示界面類似于很多的相冊(cè)、圖片集等功能的頁(yè)面。用于同時(shí)展示系統(tǒng)數(shù)據(jù)庫(kù)中的多個(gè)相冊(cè)或多張圖片，意味著同時(shí)使用了多個(gè)圖片操作自定義控件，現(xiàn)在以四幅圖片同時(shí)展示的效果為例，如圖4_9所示。圖4_9圖片集中展示界面在圖片展示時(shí)．用戶可以雙擊需要詳細(xì)觀賞的圖片．圖片將以原始尺寸展示給用戶，部分展示效果如圖410所示。圍410圖片放大展示效果圖系統(tǒng)中使用該圖片操作自定義控件的地方很多，在此不一一列舉。在4．3節(jié)中會(huì)充分展示該自定義控件應(yīng)用的效果視圖，其使用頻率之高，應(yīng)用范圍之廣，應(yīng)證了其可重用性和可再分發(fā)性的優(yōu)點(diǎn)。4．2系統(tǒng)實(shí)現(xiàn)的其它關(guān)鍵技術(shù)4 2．1用戶控件的設(shè)計(jì)與實(shí)現(xiàn)用戶控件(UserContr01)是一種復(fù)合、可重用的控件。用戶控件的擴(kuò)展名為一as“”，跟*．a(chǎn)spx在結(jié)構(gòu)上極為相似，主要是指在頁(yè)面上加載的功能模塊。但是用戶控件不能單獨(dú)作為WEB窗體頁(yè)運(yùn)行，要么嵌入到氣aspx頁(yè)面，要么嵌入到其它用戶控件中。由于用戶控件足ASENET中的組件，所以允許在控件本。盈洋。F 菱。髑L武漢理工大學(xué)碩士學(xué)位論文身放置標(biāo)記和WEB服務(wù)器控件的容器，同樣可以將用戶控件看作一個(gè)獨(dú)立的單元，用戶根據(jù)自身的需要為其定義屬性和方法【43】。為了更好的封裝網(wǎng)站系統(tǒng)功能模塊，本系統(tǒng)使用了大量的用戶控件，分別封裝了新近注冊(cè)用戶一覽表、最近訪問用戶一覽表、用戶形象及個(gè)人資料、日志、相冊(cè)、留言等多個(gè)功能模塊。下面對(duì)新近注冊(cè)用戶一覽表的設(shè)計(jì)作出簡(jiǎn)要的分析。設(shè)計(jì)用戶控件，與設(shè)計(jì)一個(gè)大型的網(wǎng)站系統(tǒng)一樣，都可依據(jù)三層架構(gòu)模型來設(shè)計(jì)表示層、數(shù)據(jù)層和業(yè)務(wù)邏輯層。如圖411所示。圖411新近注冊(cè)用戶控件架構(gòu)(1)設(shè)計(jì)用戶控件的表示層。考慮到網(wǎng)站系統(tǒng)的用戶量，不可能把所有用戶都加載到新近注冊(cè)用戶控件里。通過對(duì)目前流行的電腦顯示器的調(diào)查以及整個(gè)網(wǎng)站頁(yè)面布局的考慮，決定在用戶控件里展示5條新近注冊(cè)用戶信息。每一條信息里包含戶頭像展示、用戶昵稱(如果昵稱太長(zhǎng)，則截取昵稱前一段字符，后面字符以“?”替換，當(dāng)鼠標(biāo)懸浮于用戶呢稱控件上時(shí)，需要有提示展示昵稱的全名。(2)設(shè)計(jì)用戶控件的數(shù)據(jù)層。絕大多數(shù)的用戶控件在設(shè)計(jì)時(shí)，都是與數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行綁定，按照一定的格式重復(fù)展示數(shù)據(jù)。不同的用戶控件綁定的數(shù)據(jù)是不同的。用于綁定的數(shù)據(jù)都來源于系統(tǒng)的用戶信息數(shù)據(jù)庫(kù)，使用DataList控件進(jìn)行數(shù)據(jù)綁定。(3)設(shè)計(jì)用戶控件的業(yè)務(wù)邏輯層。為了實(shí)現(xiàn)設(shè)計(jì)表示層時(shí)提出的功能需求，從數(shù)據(jù)層提取合適的數(shù)據(jù)，業(yè)務(wù)邏輯層就需要解決數(shù)據(jù)庫(kù)的訪問，以及對(duì)數(shù)據(jù)的篩選，在對(duì)DataList控件進(jìn)行數(shù)據(jù)綁定。設(shè)計(jì)這些用戶控件，更方便于系統(tǒng)的搭建，使得系統(tǒng)的搭建像堆積木一樣簡(jiǎn)單，確定了頁(yè)面布局，只要把各個(gè)用戶控件添加到頁(yè)面合適的位置，修改各用戶控件的屬性，使其完成特定的功能即可。即完成了一個(gè)頁(yè)面的開發(fā)，在很大程度上縮短了項(xiàng)目開發(fā)時(shí)間，節(jié)省了大量的人力物力。用戶控件的具體實(shí)現(xiàn)依舊是按三層架構(gòu)模型分層實(shí)現(xiàn)。(1)新近注冊(cè)用戶控件表示層的實(shí)現(xiàn)。從設(shè)計(jì)的描述來具體實(shí)現(xiàn)該用戶控件的布局如圖412所示。圖412新近新人表示層設(shè)計(jì)示意圖根據(jù)測(cè)試得出新近新人用戶控件中的用戶數(shù)量為5時(shí)，整個(gè)頁(yè)面展示效果最好。為達(dá)到這樣的效果，表示層設(shè)計(jì)的源代碼如下。asp：DataList ID=”dlNewOrStar”rtmat=”servel”O(jiān)nltemDataBound=”dlNewOrStar ItemDataBound”／／OnItemDataBound事件用于數(shù)據(jù)綁定數(shù)據(jù)集RepeatColunms=什5”RepeatDirection=”Horizontal”GridLines=”Both”ShowFootcr=”False”ShowHeader=”False”∥這四條語(yǔ)句是控制用戶控件的布局。水平并列5項(xiàng)數(shù)據(jù)。武漢理工人學(xué)碩士學(xué)位論文ltemTemplate?，在并列的5項(xiàng)數(shù)據(jù)中，每一項(xiàng)都含有哪些部份組成，都在這部份內(nèi)描述。例如加入圖片操作自定義控件用于展示用戶的頭像。+， ／ltcmTemplate／asp：DataListf21新近注冊(cè)用戶控件的數(shù)據(jù)層實(shí)現(xiàn)。新近注冊(cè)用戶控件需要訪問的數(shù)據(jù)不是單獨(dú)為它設(shè)計(jì)。它訪問的數(shù)據(jù)是整個(gè)系統(tǒng)的用戶信息，具體設(shè)計(jì)部分見3 2節(jié)數(shù)據(jù)層的設(shè)計(jì)。(3)新近注冊(cè)用戶控件的業(yè)務(wù)邏輯層實(shí)現(xiàn)。按照表示層設(shè)計(jì)的是一行只有5個(gè)數(shù)據(jù)項(xiàng)。為了滿足以后系統(tǒng)的擴(kuò)展，將從數(shù)據(jù)庫(kù)中提取的數(shù)據(jù)行數(shù)設(shè)置為用戶控件的屬性，在調(diào)用用戶控件時(shí)，只需要更改控件屬性來調(diào)整顯示數(shù)據(jù)的條數(shù)，即可滿足開發(fā)需要。從數(shù)據(jù)庫(kù)中提取的數(shù)據(jù)保存到數(shù)據(jù)集dataset中，當(dāng)某個(gè)頁(yè)面調(diào)用該用戶控件時(shí)，進(jìn)行數(shù)據(jù)綁定。dlNcwOzStar．DataSource=dataset；diNewOrStar．DatoBindO；完成了新近注冊(cè)用戶的設(shè)計(jì)和實(shí)現(xiàn)后，在需要使用該控件的頁(yè)面將該用戶控件引入，設(shè)置其屬性，即可達(dá)到需要的效果。本系統(tǒng)在首頁(yè)使用了該控件，用于展示新近注冊(cè)用戶，用戶登錄系統(tǒng)之后即可看見。具體效果如圖413所示。圖413新近注冊(cè)用戶界面展示在模塊中使用的標(biāo)題是“新近新人”。為了規(guī)劃頁(yè)面的布局，只展示5位新注冊(cè)用戶。點(diǎn)擊“新近新人”用戶控件中用戶的圖片或者呢稱鏈接到該用戶的主頁(yè)。4．2 2 Ajax交互式網(wǎng)頁(yè)技術(shù)ASP．NET Ajax是微軟公司推出的與ASENET緊密集成的Ajax框架依武漢理工大學(xué)碩士學(xué)位論文托．NET平臺(tái)與Visual Studio的強(qiáng)大功能，基于ASP．NET Ajax可以很方便地創(chuàng)建兼容絕大多數(shù)瀏覽器的具有Ajax特性的信息系鰣蜘。與其它基于ASP．NET的Ajax框架相比，ASP．NET Ajax在與ASP．NET和Visual Studio開發(fā)工具的集成性上具有天然的優(yōu)勢(shì)。與傳統(tǒng)的Web應(yīng)用不同，Ajax不是以基于靜態(tài)頁(yè)面的方式來看待Web應(yīng)用的。從Ajax的角度看來，Web應(yīng)用僅由少量的頁(yè)面組成。每個(gè)頁(yè)面都包括一些使用JavaScript開發(fā)的Ajax組件。這些組件使用XMLHttpRequest對(duì)象以異步的方式與服務(wù)器通信，從服務(wù)器獲取所需數(shù)據(jù)后使用DOM API更新頁(yè)面中的部分內(nèi)容【451。因此Ajax應(yīng)用與傳統(tǒng)的w曲應(yīng)用的區(qū)別主要在于服務(wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，減輕服務(wù)器的負(fù)擔(dān)。4．2．3 DAAB數(shù)據(jù)庫(kù)訪問技術(shù)微軟發(fā)布的Enterprise Library4．1所包含的DataAcxessApplication Block(縮寫DAAB)提供了通用的數(shù)據(jù)訪問功能，DAAB模塊使用了ADO．NET里面的eonnectionStrings配置區(qū)，這樣帶來的一個(gè)好處是連接字符串可以在Application Block和自定義的．NET類之間共享該配置區(qū)。DAAB模塊是對(duì)ADO．NET的補(bǔ)充，它允許使用相同的數(shù)據(jù)訪問代碼來支持不同的數(shù)據(jù)庫(kù)，通過改變配置文件在不同的數(shù)據(jù)庫(kù)之間切捌矧。DAAB模塊中提供了一個(gè)類DatabaseFaetory來創(chuàng)建所需的Database對(duì)象，創(chuàng)建后的對(duì)象實(shí)例封裝了常用的數(shù)據(jù)庫(kù)操作，例如對(duì)數(shù)據(jù)的檢索、插入、更新和刪除等【471。通過調(diào)用不帶參數(shù)的DatabaseFactory．CreateDatabase0方法來生成一個(gè)默認(rèn)的數(shù)據(jù)庫(kù)對(duì)象，該對(duì)象包含的數(shù)據(jù)庫(kù)連接信息是配置文件中設(shè)置的“DefaultDatabase”屬性的信息。本網(wǎng)站系統(tǒng)采用帶參數(shù)的重載CrcateDatabasc0方法，給CreateDatabasc0加入string類型的參數(shù)，以便Factory生成指定的Database對(duì)象。4．3配置系統(tǒng)文件系統(tǒng)的配置文件Web．config是一個(gè)XML文件文本。通過Visual Studio 2008創(chuàng)建一個(gè)Web應(yīng)用程序后，在根目錄下會(huì)默認(rèn)創(chuàng)建一個(gè)w曲．config文件。打開文件，可以發(fā)現(xiàn)文件里已經(jīng)擁有大量默認(rèn)的配置設(shè)置。如果Web應(yīng)用程序需要42武漢理工大學(xué)碩士學(xué)位論文增加更多的功能，需要手工對(duì)Web．config文件進(jìn)行配置，例如加入可以調(diào)用自定義控件的功能、加入可以調(diào)用ajax控件的功能、加入數(shù)據(jù)庫(kù)訪問功能等。4．3．1 Ajax控件配置為了實(shí)現(xiàn)Ajax的一些動(dòng)態(tài)效果，本網(wǎng)站系統(tǒng)加入了AjaxControlToolkitT具箱。安裝AjaxControlToolkit的具體步驟不作敘述。在網(wǎng)站項(xiàng)目中配置使用的方法如下。在Web．config文件的controls?／controls子項(xiàng)下，添加如下語(yǔ)句。add namespace=”AjaxControlToolkit什assembly=什AjaxControlToolkit”tagPrefix=”ajaxToolkit”／配置成功后，Web頁(yè)面可以直接使用Ajax控件。例如在注冊(cè)模塊中，彈出選擇服務(wù)器的窗口，其實(shí)現(xiàn)如下。ajaxToolkit：PopupControlExtender ID=”pceServer”runat=”SelVOl竹PopupControlID=168。pScrver168。 OffsetX=168。30”O(jiān)ffsetY=0”Position=”Center”TargetControllD=”txtSerwr／ajaxToolkit：PopupControlExtender4．3．2 DAAB數(shù)據(jù)訪問配置DAAB使用了ADO．NET里面connectionS脅gs配置區(qū)，配置區(qū)相關(guān)語(yǔ)句如下：connectionStringsadd name：=”Sylvia竹conneetionString=”Data Souree=(10cal)；Initial Catalog=Sylvia；User ID=sa；Password=；什providerName=”System．Data．SqlClient”／／connoztionStrings在配置好ASENET的W．eb．config文件后。通過DBHdper類調(diào)用其靜態(tài)函數(shù)GetDefaultDatabase0獲取數(shù)據(jù)庫(kù)連接。4．4系統(tǒng)的實(shí)現(xiàn)視圖4．4．1訪問系統(tǒng)對(duì)社區(qū)網(wǎng)站系統(tǒng)的訪問，如圖414所示。該頁(yè)面有用戶登錄的接口和用戶43武漢理工大學(xué)碩士學(xué)位論文注冊(cè)接口圖4—14系統(tǒng)訪問頁(yè)面(1)用戶注冊(cè)模塊作為許多社區(qū)網(wǎng)站必有的模塊之一，擔(dān)負(fù)著用戶信息錄入、用戶信息安全以及創(chuàng)建新用戶的作用。用戶注冊(cè)是用戶加入社區(qū)網(wǎng)站的唯一途徑。在設(shè)計(jì)時(shí)，必須注意用戶注冊(cè)流程的簡(jiǎn)單、易用，還要具有很好的人機(jī)交互界面，為用戶提供操作提示，出現(xiàn)注冊(cè)信息錯(cuò)誤時(shí)，需要為用戶給出友好的提示。用戶注冊(cè)時(shí)首先需要錄入的是登錄用戶名，以及登錄使用的密碼。調(diào)試時(shí)的首頁(yè)路徑如圖415。圖4．15首頁(yè)路徑圖因?yàn)轫?yè)面是}rM頁(yè)面，而對(duì)用戶注冊(cè)的相關(guān)信息有嚴(yán)格的要求，需要加入腳本語(yǔ)言對(duì)用戶注冊(cè)信息進(jìn)行判定，常用的腳本語(yǔ)言有Javascript，Vbscript等，該頁(yè)面使用的是Javascdpt腳本語(yǔ)言．對(duì)用戶信息進(jìn)行判定。為了提高網(wǎng)站的安全性，在頁(yè)面中隱藏Javascript代碼，調(diào)用獨(dú)立的+is文件。整個(gè)判斷過程的數(shù)據(jù)流程圖如圖416所示：圖416 注冊(cè)模塊數(shù)據(jù)流程圖按照注冊(cè)模塊數(shù)據(jù)流程圖，用JAVASCRIPT腳本語(yǔ)言實(shí)現(xiàn)就不難了。由于郵箱名的正確判斷性比較復(fù)雜，所以給出判定用戶注冊(cè)郵箱的JAVASCRIPT函數(shù)如下://驗(yàn)證輸入郵箱名是否合法Function isEmailOnBlur(obj）{ Var srrEmail。 1舶bill)／／obj=I用于驗(yàn)證注冊(cè)時(shí)，用戶輸入郵箱是否合法s自rEmail=documelaLgetElementById(”regEmail”1 value；Ⅳ從注冊(cè)表單中提取輸入郵箱名文本框的值if(obj2)肌惻=2是用于驗(yàn)證用戶登錄系統(tǒng)時(shí)是輸入的用戶名是否合法Ⅳ從注冊(cè)表單中提取輸入郵箱名文本框的值if(chk_cmail(strEmail))／／調(diào)用檢測(cè)郵箱名是否合法的函數(shù)，對(duì)從表單中提取的值進(jìn)行檢測(cè)Ⅳ對(duì)檢測(cè)結(jié)果分類處理，并返回不同的值和提示