登錄註冊模塊

 

 

    我要完成一個添加登錄模塊的任務，小編人仍然是菜鳥，因此我借鑑了百度的登錄模塊，試圖作出一個相似於百度那樣的登錄模式。百度登錄模塊有如下幾個特色須要我學習，經過學習列出個人需求。第一，當點擊「登錄」時，會彈出一個對話框實現登錄，它屏蔽了主頁。第二，該對話框要有一些登錄的基本要素，例如：輸入用戶名，密碼，驗證碼，錯誤提示等等。第三，點擊「登錄」button後，登錄的信息會在網頁右上角保存，並實現登出的功能。第四，實現後臺數據庫的查詢用戶信息，插入用戶搜索信息，插入用戶註冊信息等功能。接下來我將依次實現這幾個需求和在我在實現中遇到的技術難題，雖然作出來的頁面外觀並非很好，可是基本功能仍是齊全的。

     1、登錄對話框：

<div id="Login1" style = "text-align:right;">
    <div style="float:right"><a href="Register.aspx" id="Register1" style="display:block">註冊</a></div>
    <div style="float:right">&nbsp</div>
    <div style="float:right"><a href="Login.aspx" id="linkLogin" style="display:block">登錄</a></div>
</div>

以上的代碼能夠看到兩個<a>標籤和中間的三個<div>標籤來實現外觀效果，<div>的效果是使得「登錄」和「註冊」居右，這種方法是比較笨的，固然還有其餘的方法，我感受最正規的方法是使用<table>標籤，可是小編不會用，只能採用一些骯髒卻適合本身的方法，使用<a>標籤能夠說是個習慣吧。具體的外觀結果以下：

是否是有點像百度嘞~~小編自滿下。。。。其實還沒加粗。。

說白了以上的代碼只是實現了超連接，還未實現對話框的需求，下面我利用JQUI中的dialog來實現該效果，要用JQUI須要一些添加一些JQ的頭文件（能夠這麼說吧），頭文件怎麼加我就不說了，看下面這段代碼：

var LoginClick = function (e) {
            $("<iframe id='editFrame' src='Login.aspx' scrolling='no' />").dialog({ autoOpen: true, modal: true, resizable: false, width: 300, height: 270, title: "登錄" });
            e.preventDefault();
        };
        var insertClick = function (e) {
            $("<iframe id='insertFrame' src='Register.aspx' />").dialog({ autoOpen: true, modal: true, resizable: false, width: 300, height: 300, title: "註冊" });
            e.preventDefault();
        };
        $(function () {
            $("#linkLogin").click(LoginClick);
            $("#Register1").click(insertClick);
        });

從以上代碼能夠看到，我利用JQ的外部插件（UI）dialog實現對話框的彈出效果，可是具體的登錄頁面須要利用iframe技術來實現。以上的代碼就是爲標籤<a>添加點擊事件。點擊「登錄」具體效果以下：

上圖其實還包括了iframe的效果，圖中的一些Textbox控件，Button控件，驗證碼圖片等等除了那個黃色的東東以外都是iframe的內容，下面介紹利用iframe來實現登錄。
     其實對話框dialog中的白色區域能夠加入各類東西，具體能夠查看該網站http://www.jqui.net/，而我這裏插入的是子頁。父頁是整個頁面，而子頁就是上圖中白色的區域。這裏有必要區分父頁和子頁，由於等下點擊登錄按鈕後，須要調用父頁的JS函數實現網頁的跳轉（這裏是一個關鍵）。先貼上前臺外觀的一些重要的代碼，白色的區域，也就是需求二，我利用的是C#中的LOGIN控件實現：

<asp:Label ID="ErrorMessages" runat="server" Text="213" Visible="false"></asp:Label>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="必須填寫用戶名。" ToolTip="必須填寫用戶名" ValidationGroup="Login1">*</asp:RequiredFieldValidator>
<asp:Image ID="Image1" runat="server" Height="23px" ImageUrl="~/ValidateNum.aspx" style="margin-top: 0px" Width="74px" />
<asp:CheckBox ID="RememberMe" runat="server" Text="下次記住我" />
<asp:Button ID="LoginButton" runat="server"  Text="登陸" ValidationGroup="Login1" onclick="LoginButton_Click" />

能夠看到上面有6個控件，須要講一講的是RequiredFieldValidator控件，它的做用是保證用戶名、密碼和驗證碼必須填寫，若是是空，則在它綁定的TextBox控件右邊顯示一個符號'*'，還有一個比較重要的東西就是Button控件中的ValidationGroup，做用就是觸發RequiredFieldValidator控件的驗證。接下來看看控件Button的事件，貼上一些重要的代碼：

TextBox ValidateTextbox_1 = (TextBox)Login1.FindControl("ValidateTextbox1"); //你會發現若是要爲一個控件添加一些按鈕，不能直接使用Login1.ValidateTextbox1，而要用以上方法

string s = "Data Source=.\\SQLEXPRESS;AttachDbFilename=E:\\search\\modelsearch\\App_Data\\user.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True";
        SqlConnection con = new SqlConnection(s);
        SqlDataAdapter dap = new SqlDataAdapter("select * from 系統管理員表 where 用戶名稱='" + Login1.UserName + "'and 密碼='" + Login1.Password + "'", con);
        DataSet ds = new DataSet();
        dap.Fill(ds);     //鏈接數據庫的代碼

ValidateNum1 = Session["ValidateNum"].ToString(); //經常使用Session實現不一樣aspx頁間傳值

Page.ClientScript.RegisterStartupScript(this.GetType(), "pop", "ssss()", true);//該方法是用後臺C#語言調用前臺的JS語言

function ssss() { window.parent.CloseEditPage();
 } //iframe調用父頁的js函數

經過以上代碼註釋能夠看到一些我以爲關鍵的東西。點擊登錄成功後，將會在右上角顯示登錄的狀態，這就實現了需求三，以上的代碼也講到了一些需求四的實現。

     2、用戶的搜索信息的收集

    這裏主要是實現，當一堆搜索結果展示在用戶面前的時候（咱們經過datalist來展示），收集的是用戶的搜索輸入和用戶對搜索結果的選擇信息。用戶的搜索輸入信息的收集較爲容易，而用戶對搜索結果的選擇信息就好像某些電商網站的效果。不過我用的方法是爲每一個在datalist中顯示的items下添加了一個CheckBox。又添加了兩個按鈕，一個是「選擇」，另外一個是「肯定」。看下面的代碼：

<asp:DataList ID="datalist1" RepeatColumns="5" RepeatDirection="Horizontal" 
                    GridLines="Both" runat="server" BorderWidth="2px">
                    <ItemTemplate>
                        <table>
                              ...
                            <tr>
                            <td align="center"><asp:CheckBox ID="CheckBox1" runat="server" /> </td>
                            </tr>
                         </table>
                    </ItemTemplate>
                    <ItemStyle VerticalAlign="Bottom" />
</asp:DataList>

其實爲每datalist.items添加CheckBox 就那麼簡單的一條HTML的代碼。下面來看看其後臺的代碼：

protected void Page_Load(object sender, EventArgs e)
    {
        string tmp = string.Empty;
        tmp = Session["UserName"].ToString();  //頁間傳值，保存用戶名稱
        this.HiddenField1.Value = tmp;
        if (!IsPostBack)   //若是沒有該行，你將會發現CheckBox選中卻，CheckBox.Checked==false，我沒查過爲何，個人感受是，因爲頁面刷新致使。
        {
            interestNum = string.Empty;
            ....
       }
    }

再接下來看看「選擇」按鈕事件：

    protected void Button1_Click(object sender, EventArgs e)
    {
        string chooseModel = string.Empty;
        foreach(DataListItem it in datalist1.Items){                 //循環全部的datalist的item
            CheckBox ck = it.FindControl("CheckBox1") as CheckBox;   //對於每一個item都有一個checkbox
            Label lk = it.FindControl("Label1") as Label;            //對於每一個item都有一個label標籤
            if (ck.Checked) {                                        //若是被選中
                chooseModel = chooseModel + " " + lk.Text + ",";     //保存被選中item的label
            }
        }
        interestNum = interestNum + chooseModel;                     //這裏有個關鍵靜態變量interestNum，因爲咱們的item是分頁顯示，因此它的做用是保存全部子頁面用戶的選擇信息。
    }

再看看「肯定」按鈕事件：

protected void Button2_Click(object sender, EventArgs e)
    {
        string tmpUser, tmpF, tmpS, tmpT;
        tmpUser = Session["UserName"].ToString();
        tmpF = Session["frontView"].ToString();    //保存用戶搜索輸入
        tmpS = Session["sideView"].ToString();
        tmpT = Session["topView"].ToString();
        string s = "Data Source=.\\SQLEXPRESS;AttachDbFilename=E:\\search\\modelsearch\\App_Data\\user.mdf;Integrated Security=True;Connect Timeout=30;User Instance=True";
        SqlConnection con = new SqlConnection(s);
        con.Open();
        SqlCommand cmd = new SqlCommand("INSERT INTO User_Model(UsNum,ModelNum,FrontView,SideView,TopView) values('" + tmpUser + "','" + interestNum + "','" + tmpF + "','" + tmpS + "','" + tmpT + "')", con);
        cmd.ExecuteNonQuery();
        con.Close();//如何向數據庫插入數據
    }

註冊的功能相似於登錄，具體我就不寫博客了，其實這裏面還有超多的細節和功夫，例如用CSS調整格式，Session的clear，還有一些密碼安全問題，驗證碼的實現等等。其實驗證碼的實現就是一個<img>標籤再結合後臺隨即數字的生成。

以上就是我最近兩星期作的東西。仔細看看感受也沒作什麼，不過本身能作點東西多少能讓我不平靜的心平靜下來，今天還有好聲音哦~~嚮往事幹杯吧~~