第六章 Doking's BLOG使用者註冊頁面的實作
有人發覺:那使用者要到哪裡發表筆記、回覆呢?這是第六、七章將要解決的問題。這一章主要講解用戶註冊頁面的實作。
6.1.1 範本bkblog.dwt.aspx頁面的修改
(1)開啟範本bkblog.dwt.aspx,在左邊欄位插入表格Lefttab,在第一行插入表單Yhlogfrm,在表單Yhlogfrm中插入表格logtab ,並插入有關文字方塊、文字區域及按鈕,結果如圖6-1-1所示:
圖6-1-1 範本中使用者登入設計
(2)將作者對應的文字方塊命名為Logname;將密碼對應的文字方塊命名為Logpass,類型改為密碼;「註冊」按鈕的動作改為「無」 ;把「登入」按鈕的動作改為「提交表單」。
(3)選擇按鈕「註冊」按鈕,在【行為】面板中,新增行為轉到URL,在彈出的對話框中,輸入連結為「../yhinlog.aspx」如圖6-1-2所示:
圖6-1-2 加入到URL的行為
(4)儲存模板,更新所有的網頁。
6.1.2 註冊頁面的設計
(1)新建由模板bkblog.dwt.aspx產生的ASP.NET VB 動態頁yhinlog.aspx,在mainbody可編輯區域中插入表單Yhinfrm,再插入表格yhinlog,並進行有關設計,結果如圖6-1-3所示:
圖6-1-3 表格yhinlog的設計
(2)選擇使用者名稱對應的文字框,切換到標籤面板,展開“CSS/輔助功能”,在id中輸入YHNAME;展開“未分類”,輸入runat,server ,把YHNAME文字方塊改為伺服器控件,如圖6-1-4所示:
圖6-1-4 修改文字方塊標籤
(3)依此類推,密碼對應的文字方塊命名為YHPASS,密碼再確認對應的文字方塊命名為REPASS,QQ碼對應的文字方塊命名為YHQQ,Email對應的文字方塊命名為YHEMAIL,主頁對應的文字方塊命名為YHINDEX,將所有文字方塊改為伺服器控制項。
(4)選擇表單Yhinfrm,並將其改為伺服器控件,保存yhinlog.aspx。
6.1.3 完成註冊頁面的設計
(1)由模板bkblog.dwt.aspx新建動態動態網頁yhlogok.aspx,在mainbody可編輯區域中插入三行一列的表格logok,在第二行中輸入文字“歡迎”,點擊ASP.NET快捷選單中的“綁定資料”,再點擊“修剪的表單元素”,把遊標移到如圖6-1-5所示的位置,輸入“YHNAME”。
圖6-1-5 插入修剪的表單元素
(2)返回設計視圖,繼續輸入文字“Donking's BLOG!”,並、對錶格logok,進行有關設計,結果如圖6-1-6所示:
圖6-1-6 表格logok的設計
(3)選擇按鈕“主頁”按鈕,在【行為】面板中,添加行為轉到URL,在彈出的對話框中,輸入鏈接為“index.aspx”,保存yhlogok.aspx
為了防止使用者輸入錯誤的註冊訊息,要對使用者註冊資訊進行規範和驗證。
(1)開啟yhinlog.aspx,開啟ASP.NET快速選單,點選【更多標籤】,如圖6-2-1所示:
圖6-2-1 ASP.NET 快捷選單
(2)在彈出的標籤選擇器中展開“ASP.NET 標籤”→“驗證伺服器控制項”,在右窗架中選取“asp:RequiredFieldvalidator”,點選“插入」按扭,如下圖6-2-2所示:
圖6-2-2 標籤選擇器
(3)在彈出的標籤編輯器中,為文字方塊YHNAME新增驗證控件,填寫各項如圖6-2-3所示:
圖6-2-3 RequiredFieldValidator標籤編輯器
(4)開啟標籤選擇器,插入ASP.NET驗證伺服器控件→CompareValidator控件,為文字方塊YHPASS新增與REPASS文字方塊比較驗證控件,填有關資訊如圖6-2 -4所示:
圖6-2-4 CompareValidato標籤編輯器
(5)插入ASP.NET驗證伺服器控件→Rangevalidator控件,為文字方塊YHQQ新增驗證控件,填有關資訊如圖6-2-5所示:
圖6-2-5 Range validator標籤編輯器
(6)插入ASP.NET驗證伺服器控件→Regularexpressionvalidator控件,為文字方塊YHEMAIL新增驗證控件,填各項如圖6-2-6所示,其中的驗證表達式為:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
圖6-2-6 Regular expression validator標籤編輯器
(7)插入ASP.NET驗證伺服器控件→Regularexpressionvalidator控件,為文字方塊YHINDEX新增驗證控件,填寫各項如圖6-2-7所示,其中的驗證表達式為:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
圖6-2-7 Regular expression validator 標籤編輯器
(8)應該再一個驗證控制項防止使用者註冊的使用者名稱重複。
①新增資料集yhinlog,設為篩選,篩選欄位為YHNAME,參數變數為來之表單變數YHNAME,其設定如圖6-2-8所示:
圖6-2-8 插入資料集yhinlog
②插入ASP.NET驗證伺服器控制項→CustomValidator控件,為文字方塊YHINDEX再新增驗證控件,填寫各項如圖6-2-9所示,其中的客戶端驗證功能為:
<%# IIf(yhinlog.RecordCount>0,FALSE,TRUE) %>
圖6-2-9 Custom Validator標籤編輯器
(9)保存yhinlog.aspx,在IE中進行瀏覽,如果出現圖6-2-10所示的對話框,那說明的dklog站點根目錄下沒有子目錄aspnet_client,也是就沒有驗證控制項必要的JS腳本庫。這個在安裝.NET框架的時候,安裝程式已經複製在預設網站c: Inetpubwwwroot的根目錄下,複製c: Inetpubwwwroot中的子目錄aspnet_client到dkblog網站根目錄下,就OK了!
圖6-2-10 找不到必要JS腳本庫
(1)開啟yhinlog.aspx,加入【插入記錄】伺服器行為,表單的相關資料加入資料表YH中,其有關設定如圖6-3-1所示:
圖6-3-1 新增【插入記錄】伺服器行為
(2)ASP.NET是不支援gb2312編碼傳輸。切換到程式碼視圖,找到:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
把ResponseEncoding="gb2312" 這句程式碼刪除就OK了:
<%@ Page Language ="VB" ContentType="text/html"%>
(3)保存,在IE中瀏覽提交用戶註冊信息,在Access打開YH表,可以發現提交的中文信息全變成了??。那怎麼辦?不用急,這是由於TASP.NET不支援gb2312編碼傳輸所致。打開yhinlog.aspx,切換到程式碼視圖,找到第一行程式碼:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
把它改為:
<%@ Page Language= "VB" ContentType="text/html" %>
也就是移除ResponseEncoding="gb2312"。其他網頁也依此法修改,防止中文提交資料出錯。