整理easyui实现登录过程

1、创建登录窗口和验证控件

<div id="login">
<form id="loginForm" method="post">
<div class="login_item"><span>用户名：</span><input type="text" name="LoginName" class="easyui-validatebox" data-options="required:true,missingMessage:'请填写登录名'" /></div>
<div class="login_item"><span>密    码：</span><input type="password" name="LoginPwd" class="easyui-validatebox" data-options="required:true,missingMessage:'请填写密码'" /></div>
</form>
</div>

2、写easyui扩展共用函数（根据用户环境不同弹出不一样的对话框和根据返回data.statu的状态执行不同的事件）

; (function ($) {
$.extend($, {
//根据用户环境弹出不一样的对话框
alertMsg:function(msg,title,funcSuc){
if ($.messager) {
$.messager.alert(title, msg, "info", function () {
if (funcSuc) {
funcSuc();
}
});
} else {
alert(title + "\r\r" + msg);
if (funcSuc) {
funcSuc();
}
}
},
//根据data.statu的状态执行不同的事件
procAjaxMsg: function (data, funcSuc, funcErr) {
if (!data.Statu) {
return;
}
var state = parseInt(data.Statu);
switch (state) {
case 1:
if (funcSuc) {
funcSuc(data);
}
break;
case 2:
if (funcErr) {
funcErr(data);
}
default:
}
}
})
})(jQuery);

3、写easyui代码

//根据后台返回的json数据进行判断
function chuLi(jsonData) {
$.procAjaxMsg(jsonData, function () {
window.location.href = jsonData.BackUrl;
}, function () {
$.alertMsg(jsonData.Msg, "登录提示！");
});
}

//添加dialog窗口，在窗口加两个按钮
$(function () {
$('#login').dialog({
title: "用户登录",
width: 350,
height: 200,
modal: true,
closable: false,
buttons: [{
text: "登录",
iconCls: 'icon-ok',
handler: function () {
if ($('#loginForm').form('validate')) {//验证表单的正确性
$.post("/Accounts_User/LoginIn",
{ loginName: $('#loginForm input[name="LoginName"]').val(), loginPwd: $('#loginForm input[name="LoginPwd"]').val() },
function (data) {
chuLi(data);//调用转向函数
});
}
}
}, {
text: "注册",
iconCls: 'icon-edit',
handler: function () {
alert('注册');
}
}]
})
})

4、写CSS控制控件的位置

.login_item{
margin:20px auto;

}
.login_item span{
display:inline-block;
width:100px;
text-align:right ;
}

5、后台验证

/// <summary>
/// 接收表单视图提交来用户名和密码
/// 去指定的Model验证密码的正确性
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult LoginIn()
{
string strText=string .Empty;
//通过
if (Request.Form["loginName"] != null && Request.Form["loginName"].Length > 0)
{
//封装数据
SysAdmin currentAdmin = new SysAdmin
{
LoginId = Convert.ToInt32(Request.Form["loginName"]),
LoginPwd = Request.Form["loginPwd"].ToString()
};
currentAdmin = new DAL.AdminDao().AdminLogin(currentAdmin);
if( currentAdmin !=null)
{
return  OperContext.PackagingAjaxMsg(AjaxStatu.ok,"登录成功！",null,"/Accounts_User/Index");
}
else
{
return OperContext.PackagingAjaxMsg(AjaxStatu.err ,"登录失败！");
}
}
else
{
return OperContext.PackagingAjaxMsg(AjaxStatu.err , "服务器没有接收到传过来的用户名和密码！");
}
}

6、后台用到的转json类PackagingAjaxMsg

#region 把Ajax返回值封装成json格式的字符串
public static  ActionResult PackagingAjaxMsg(AjaxStatu statu,string msg,object data=null ,string backurl="")
{
AjaxMsgModel amm = new AjaxMsgModel
{
Statu = statu,
Msg = msg,
Data = data,
BackUrl = backurl
};
JsonResult ajaxRes = new JsonResult();
ajaxRes.Data = amm;
return ajaxRes;
}

#endregion

7、 PackagingAjaxMsg用到枚举AjaxStatu

public enum AjaxStatu
{
ok = 1,
err = 2,
none = 3
}