登陆注册模块

    我要完成一个添加登陆模块的任务，小编人仍然是菜鸟，所以我借鉴了百度的登陆模块，试图做出一个类似于百度那样的登陆模式。百度登陆模块有以下几个特点需要我学习，通过学习列出我的需求。第一，当点击“登陆”时，会弹出一个对话框实现登陆，它屏蔽了主页。第二，该对话框要有一些登陆的基本要素，例如：输入用户名，密码，验证码，错误提示等等。第三，点击“登陆”button后，登陆的信息会在网页右上角保存，并实现登出的功能。第四，实现后台数据库的查询用户信息，插入用户搜索信息，插入用户注册信息等功能。接下来我将依次实现这几个需求和在我在实现中遇到的技术难题，虽然做出来的页面外观并不是很好，但是基本功能还是齐全的。

     一、登陆对话框：

<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,  300, height: 270, title: "登陆" });
            e.preventDefault();
        };
        var insertClick = function (e) {
            $("<iframe id='insertFrame' src='Register.aspx' />").dialog({ autoOpen: true, modal: true, resizable: false,  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函数

通过以上代码注释可以看到一些我觉得关键的东西。点击登陆成功后，将会在右上角显示登陆的状态，这就实现了需求三，以上的代码也讲到了一些需求四的实现。

     二、用户的搜索信息的收集

    这里主要是实现，当一堆搜索结果展现在用户面前的时候（我们通过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>标签再结合后台随即数字的生成。

以上就是我最近两星期做的东西。仔细看看感觉也没做什么，不过自己能做点东西多少能让我不平静的心平静下来，今天还有好声音哦~~向往事干杯吧~~