MVC+EF登陆并跳转成功页面 -

lu930124

浏览: 30421 次
性别:
来自: 廊坊

最近访客更多访客>>

woodding2008

gyges_ali

xujianhua82

12332

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (109)

社区版块

存档分类

MVC+EF登陆并跳转成功页面

最近在做.net 的一个项目，我们的开发是基于MVC+EF+B层和D层以及封装好的底层方法的这样子一个框架。这是一个档案管理系统，毋庸置疑，在做系统时，要先登录。那么，MVC如何实现登陆呢？

思路：

和普通登陆一样，输入用户名和密码，为空判断，然后调用方法，和数据库信息进行对不，若相同，则登陆成功，把ID信息存到session或cookie中，其他页面直接验证session或cookie来判断用户是否登陆。

实现：

常言道，说的容易，做着难。先分析这个需求，按照我的思路，要先建一个controller，然后生成一个view，在view中写好页面。做出提交的按钮。js写出提交后的判断，然后再Ajax调用controller方法，验证，然后跳转页面。

逻辑非常清晰，也不难，下面是我的代码。

view的代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>管理系统</title>
    <link href="~/CSS/Loginstyle.css" rel="stylesheet" />
    <link href="~/CSS/Loginbody.css" rel="stylesheet" />
    <link href="~/Content/JqueryEasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/JqueryEasyUI/themes/icon.css" rel="stylesheet" />
     @*添加Jquery，EasyUI和easyUI的语言包的JS文件*@
    <script src="~/Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
    <script src="~/Content/JqueryEasyUI/jquery.easyui.min.js"></script>
    <script src="~/Content/JqueryEasyUI/locale/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/DatePicker/WdatePicker.js"></script>
    @*日期格式的引用*@
    <style type="text/css">
<!--
.STYLE1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 40px;
}
-->
</style>
     <script type="text/javascript">
        //调用js登陆方法验证用户名，和密码 如果通过，条页面！
         function login() {
             //获取用户名和密码
             var userid = $("#username").val();
             var password = $("#password").val();
             //验证用户名不为空
             if (userid == "" || null ) {
                 $.messager.alert("提示", "请输入用户名", "info");
                 return;
             }
                 //验证密码不为空
             else if (password == "" || null) {
                 $.messager.alert("提示", "请输密码", "info");
                 return;
             } else {
                 //验证通过，调用LoginController中的confirmation（）方法，去B层验证密码是否正确 
                 $.ajax({
                         url: "/Login/confirmation",
                         data: { userid: userid, password: password },   //传入的数据
                         type: "POST",                                      //返回的类型                           
                         dataType: 'text',
                         success: function (data) {                         //接收返回的数据 判断 成功则跳页面，失败则返回
                             if (data == "OK") {
                                 //$.messager.alert("提示", "登陆成功，请您重新输入！", "info");
                                 //        //location.reload(true);
                                 window.location.href = "../Main/Main";//你可以跟换里面的网址，以便成功后跳转
                                 //$("#myTable").hide("slow"); 
                                 //$("#success").show("slow"); 
                             } else if (data == "error") {
                                 $.messager.alert("提示", "用户名或密码不正确，请您重新输入！", "info");
                                 //$("#error").show("slow"); 
                                 //$("#load").hide("slow"); 
                             }else{ 
                                 alert("输入异常，请重新输入！");} 
                         },
                         error: function () { alert("输入异常，请重新输入！") }, //错误提示

                     });

                 }
         }
     </script>
</head>
<body>
    <div>

<!--<input type="text" placeholder="系统"> -->
<h1 class="STYLE1" style="margin-top:40px;margin-left:260px;"><img width="854" height="110" src="~/CSS/index_clip_image002_0005.png" alt="系统" /></h1>
     
</div >
   <div class="container" style="margin-top:30px;">
	<section id="content">
		<form action="">
			<h1>登录</h1>
			<div>
               
				<input type="text" placeholder="用户名" required="" id="username" />
			</div>
			<div>
				<input type="password" placeholder="密码" required="" id="password" />
			</div>
			 <div>
				<span class="help-block u-errormessage" id="js-server-helpinfo"></span></div> 
			 <input name="submit" type="button" class="btn btn-primary" id="js-btn-login" value="登录" style="margin-left:120px" onclick ="login()"/> 
             @*<input name="submit" type="submit" class="btn btn-primary" id="js-btn-login" value="登录" style="margin-left:120px"/> *@
		    <div>
				@* <input type="submit" value="Log in" /> <a href="#"></a>
				 <a href="#">Register</a>*@ 
                
			</div>

		</form>
	</section>
</div>
</body>
</html>

然后是controller中的代码

<pre name="code" class="csharp"> /// <summary>
        /// 登陆视图
        /// </summary>
        /// <returns></returns>
        public ActionResult Login()
        {
            return View();
        }

        /// <summary>
        /// d登陆方法验证
        /// </summary>
        /// <returns>OK 或者error</returns>
        public string confirmation()
        {
            //获取前台传回的数据
            string userid = Request["userid"];
            string password = Request["password"];
            //声明spring容器中的LoginBll
            ILoginBll loginbll = SpringHelper.GetObject<ILoginBll>("LoginBll");
            List<UserInfoViewModel> user = loginbll.QueryUser(userid);
            //如果验证通过，则把数据存到session中，返回成功
            if (user[0].pwd == password)
            {
                Session["userID"] = userid;
                Session["realName"] = user[0].realName;
                Session["JID"] = user[0].admin ;
                return "OK";
            }
                //验证不通过，返回失败
            else
            {
              
                 return "error";
            }
            
            
        }

这个登陆，可以说非常简单，但是，在做的过程中，却一再的报错。在调试的过程中，你发现，他哪里都走了，调用也成功了，可是，在最后，就是返回失败。最开始，我一直在思考问题出在哪里，运行时，明明已经返回了OK 为什么还是失败呢？

聪明的你，可能会想到，是Ajax的错误。没错，确实出在了Ajax上，在这里，我好好说说这个错误，也是因为这个错误，我才加上了error: function () { alert("输入异常，请重新输入！") }, //错误提示，这句话。这个错误，其实非常简单，如果，Ajax的返回数据类型是json，那么，在后面的数据接收中，就要判断和解析返回的json数据，但是，我的数据，明显返回的是String类型，在这，我们有注意到，直接给json的dataType一个String的值，就是dataType: 'String',其实，这是一个误区，Ajax的datetype类型是没有String的，与之对应的是text类型。所以，在这个小点上，我花了很长时间。在此做个笔记，与大家分享。

分享到：