码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-08-29 21:43:04      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:

      最近在做.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类型。所以,在这个小点上,我花了很长时间。在此做个笔记,与大家分享。


版权声明:本文为博主原创文章,未经博主允许不得转载。

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

标签:

原文地址:http://blog.csdn.net/lu930124/article/details/48055155

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!