asp.net 完善注冊登錄+sqlite數據庫

結合sqlite數據庫，完善asp.net制作的web網頁中的注冊和登錄操作。

1. Account-Register.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <title>注冊頁面</title>
    <script src="../../Scripts/Common/JScript.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    用　　戶：<input id="name" type="text"/><br /><br />
    密　　碼：<input id="pwd1" type="text"/><br /><br />
    確認密碼：<input id="pwd2" type="text"/><br /><br />
    驗 證 碼：<input id="code" type="text"/><br /><br />
    <img id="vimg" src="/Common/Image" onclick="changeImage()" />
    <input type="button" onclick="Register()" value="注冊"/>
    <label id="showRegister" style="color:Red"></label>

</asp:Content>

這里的頁面采用了微軟新建項目自帶的母版格式。注冊頁有用戶、密碼、確認密碼、圖片驗證碼和注冊按鈕。

2. 點擊注冊按鈕 onclick="Register()" 事件，保存在Scripts-Common-JScript.js中

function Register() {
    var name = $("#name").val();
    var pwd1 = $("#pwd1").val();
    var pwd2 = $("#pwd2").val();
    var code = $("#code").val();
    //前台校驗過濾
    if (name != "") {
        $.post("/Account/DoRegister", { name: name, pwd1: pwd1, pwd2: pwd2, code: code },
       function (data) {
           if (data == "0") {
               $("#showRegister").html("注冊成功");
               window.location.href = "/account/login";
           }
           else if (data == "-1") {
               $("#showRegister").html("用戶名或密碼為空");
           }
           else if (data == "-2") {
               $("#showRegister").html("密碼輸入錯誤");
           }
           else if (data == "-3") {
               $("#showRegister").html("用戶名已存在");
           }
           else if (data == "-4") {
               $("#showRegister").html("驗證碼錯誤");
           }
       });
    }
   else {
       $("#showRegister").html("用戶名為空");
    }
    
}

function changeImage() { var imgNode = document.getElementById("vimg"); imgNode.src = "/Common/Image/" + (new Date()).valueOf(); //加上時間的參數防止瀏覽器緩存 }

function Register()是前后台邏輯判斷，前台通過$("#id").val()的方式獲取id的值，后台利用request.form["name"]的形式接收，提示結果顯示在id="showRegister"的<lable>上。jQuery通過ajax異步傳輸post，將值對交給后台判斷"/Account/DoRegister"

function changeImage()是為了點擊圖片驗證碼，自變換的點擊事件。通過對驗證碼vimg，加上時間參數來改變src的方式進行改變。
3. 后台邏輯判斷 AccountController.cs

public ActionResult DoRegister()
        {
            string name = Request.Form["name"];
            string pwd1 = Request.Form["pwd1"];
            string pwd2 = Request.Form["pwd2"];
            string code = Request.Form["code"]; //驗證碼
            //后台驗證
            int res = 0;
            string checkCode = Session["Code"].ToString();
            
            if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(pwd1))
            {
                res = -1;
            }
            else if (pwd1 != pwd2)
            {
                res = -2;
            }
            else if (code.ToLower() != checkCode.ToLower()) //驗證碼全部轉為小寫
            {
                res = -4;
            }
            else
            {
                //判斷用戶是否已經存在
                List<MVCStudy.Model.User> userList = userBll.GetModelList("name= '" + name + "' and pwd= '" + pwd1 + "'");
                if (userList.Count != 0)
                {
                    res = -3;
                }
                else {
                    //插入數據""
                    MVCStudy.Model.User userModel = new Model.User();
                    userModel.Name = name;
                    userModel.Pwd = pwd1;
                    userModel.AddTime = DateTime.Now.ToString();
                    userBll.Add(userModel);
                }
            }
            return Content(res.ToString());
        }

前提已經建好User的sqlite數據庫表，里面存放了name和pwd，用戶名和密碼。再次確認密碼和密碼做比較，圖片驗證碼存放在session["Code"]中，與輸入的code做比較，且比較時全部轉為小寫字母，不區分大小寫。將注冊輸入符合規范且圖片驗證碼輸入正確的，先判斷是否已經在數據庫中存在，若存在則提示“該用戶已存在，請直接登錄”，否則，則添加到數據庫中，並提示用戶添加成功，並跳轉到登錄頁面。

 

4. Account-Login.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <title>登錄頁面</title>
    <script src="../../Scripts/Common/JScript.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    用　　戶：<input id="name" type="text"/><br /><br />
    密　　碼：<input id="pwd1" type="text"/><br /><br />
    <%--<img id="vimg" src="/Common/Image" onclick="changeImage()" />--%>
    <input type="button" onclick="Login()" value="登錄"/>
    <label id="showLogin" style="color:Red"></label>

</asp:Content>

登錄頁面比較簡單，只有用戶、密碼和登錄按鈕。（利用剛剛注冊的用戶c登錄成功）

5. 登錄按鈕 onclick="Login()" 事件：

function Login() {
    var name = $("#name").val();
    var pwd1 = $("#pwd1").val();

    $.post("/Account/DoLogin", { name: name, pwd1: pwd1 },
       function (data) {
           if (data == "0") {
               $("#showLogin").html("登錄成功");
               window.location.href = "/home/index";
           }
           else if (data == "-1") {
               $("#showLogin").html("用戶名或密碼為空");
           }
           else if (data == "-2") {
               $("#showLogin").html("用戶名或密碼錯誤");
           }
       });
}

6. AccountController.cs-DoLogin函數：

MVCStudy.Business.User userBll = new Business.User();
        public ActionResult DoLogin()
        {
            //后台c#獲取前台js提交過來的數據
            string name = Request.Form["name"];
            string pwd1 = Request.Form["pwd1"];

            int res = 0;
            if (string.IsNullOrEmpty(name)||string.IsNullOrEmpty(pwd1))
            {
                res = -1;
            }
            else {
                List<MVCStudy.Model.User> userList = userBll.GetModelList("name= '"+name+"' and pwd= '"+pwd1+"'");
                if (userList.Count == 0)
                {
                    res = -2;
                }
                else {
                    Session["user"] = userList[0].Name;
                }
            }
            
            return Content(res.ToString());
        }

登錄前，先新建一個MVCStudy.Business.User的userBll，利用GetModelList(“查找條件”)找出與輸入的name和pwd相同的user，返回的是List<Model>的格式，取出userList[0]，即為一條用戶的信息，將userList[0].Name存放在Session["user"]中，成功跳轉主頁后用於顯示登錄人的信息。