结合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"]中,成功跳转主页后用于显示登录人的信息。