3、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle项目开发之——用户登录
近期因为项目赶着上线,一直没时间接着写博客,今天最终空出了时间。声名:我不是专业美工,所以界面问题,希望大家不要拍砖。登录界面例如以下:
在ASP.NET MVC中,要新增一个功能,我们首先要加入一个控制器,AccountController.cs,加入方法:右键单击Controllers目录,
/// <summary> /// 登录页面 /// </summary> /// <returns></returns> public ActionResult Index() { return View(); } /// <summary> /// 点击 登录系统 后取消 /// </summary> /// <param name="model">登录信息</param> /// <returns></returns> [HttpPost] public ActionResult Index(LogOnModel model) { #region 验证码验证 if (Session["_VCode"] != null && model.ValidateCode!=null&& model.ValidateCode.ToLower() != Session["_VCode"].ToString()) { ModelState.AddModelError("PersonName", "验证码错误!"); //return ""; return View(); } #endregion if (ModelState.IsValid) //这个是界面数据的模型验证 相应LogOnModel模型类中 诸如:[Required(ErrorMessage = "请填写username")] 必填 ...等验证 { SMUSERTB person = _accountService.ValidateUser(model.PersonName, xEncrypt.EncryptText(model.Password)); if (person != null) //登录成功 { Account account = new Account(); account.USER_NAME = person.USER_NAME; account.UID = person.U_ID; account.USER_ID = person.USER_ID; account.GuidCode = person.GUILD_CODE; Session["account"] = account; return RedirectToAction("Index", "Home"); } } ModelState.AddModelError("PersonName", "username或者password出错。"); return View(); } public void ValidateCode() { Response.ClearContent(); //须要输出图象信息 要改动HTTP头 Response.ContentType = "image/jpeg"; ValidateCodeFun.CreateValidateCode(4); }当中LogOnModel是专门为登录进行设计的业务模型,
public class LogOnModel { [Required(ErrorMessage = "请填写username")] [DisplayName("username")] public string PersonName { get; set; } [StringLength(100, ErrorMessage = "{0} 必须至少包括 {2} 个字符。", MinimumLength = 3)] [Required(ErrorMessage = "请填写password")] [DataType(DataType.Password)] [DisplayName("password")] public string Password { get; set; } [Required(ErrorMessage = "请填写验证码")] [DisplayName("验证码")] public string ValidateCode { get; set; } [DisplayName("记住我?")] public bool RememberMe { get; set; } }
关于验证码类,我就不多说了,大家都懂,我这里直接贴代码,例如以下:
public static class ValidateCodeFun { public static void CreateValidateCode(int codeNum) { string vnum= GetByRndNum(codeNum); Bitmap Img = null; Graphics g = null; Random random = new Random(); int gheight = vnum.Length * 16; Img = new Bitmap(gheight, 26); g = Graphics.FromImage(Img); //Font f = new Font("微软雅黑", 16, FontStyle.Bold); Color[] c = { Color.SpringGreen, Color.Red, Color.LightBlue, Color.SeaGreen, Color.Orange, Color.Yellow, Color.RosyBrown }; Font f = new Font("宋体", 16, FontStyle.Bold); g.Clear(Color.White);//设定背景色 //Pen blackPen = new Pen(ColorTranslator.FromHtml("#e1e8f3"), 18); Pen blackPen = new Pen(c[random.Next(7)], 18); //绘图片的前景噪音点 for (int i = 0; i < 80; i++) { int x = random.Next(Img.Width); int y = random.Next(Img.Height); Img.SetPixel(x, y, Color.FromArgb(random.Next())); } for (int i = 0; i < 128; i++)// 随机产生干扰线,使图象中的认证码不易被其他程序探測到 { int x = random.Next(gheight); int y = random.Next(20); int xl = random.Next(6); int yl = random.Next(2); g.DrawLine(blackPen, x, y, x + xl, y + yl); } SolidBrush s = new SolidBrush(ColorTranslator.FromHtml("#411464")); g.DrawString(vnum, f, s, 1, 1); //画边框 blackPen.Width = 1; g.DrawRectangle(blackPen, 0, 0, Img.Width - 1, Img.Height - 1); Img.Save(HttpContext.Current.Response.OutputStream, ImageFormat.Jpeg); s.Dispose(); f.Dispose(); blackPen.Dispose(); g.Dispose(); Img.Dispose(); //Response.End(); } //-----------------给定范围获得随机颜色 static Color GetByRandColor(int fc, int bc) { Random random = new Random(); if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.Next(bc - fc); int g = fc + random.Next(bc - fc); int b = fc + random.Next(bc - bc); Color rs = Color.FromArgb(r, g, b); return rs; } //取随机产生的认证码(数字) public static string GetByRndNum(int VcodeNum) { string VNum = ""; Random rand = new Random(); for (int i = 0; i < VcodeNum; i++) { VNum += VcArray[rand.Next(0, 61)]; } HttpContext.Current.Session["_VCode"] = VNum.ToLower(); return VNum; } private static readonly string[] VcArray = new string[] {"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i", "j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G", "H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z" }; }
最后,看下视图View,新建View方法例如以下:
View十分简单,这里我就不多说,自己看代码,例如以下:
@model YKT.Model.LogOnModel @{ Layout = null; } <!DOCTYPE html> <html> <head id="Head1"> <title>企业平台登录</title> <link href="@Url.Content("~/Content/Login.css")" rel="stylesheet" type="text/css" /> <script type="text/javascript"> function RefreshValidateCode(obj) { obj.src = "/Account/ValidateCode/" + Math.floor(Math.random() * 10000); } </script> </head> <body> @using (Html.BeginForm((string)ViewBag.FormAction, "Account")) { <div class="login"> <div class="top"> </div> <div class="middle"> <div class="left"> <img alt="登录" src="images/login_pic.gif"></div> <div class="right"> <div class="right2"> <fieldset style="border-top: 0px; border-left: #e8e8e8 1px solid; border-right: #e8e8e8 1px solid; border-bottom: #e8e8e8 1px solid;"> <div class="editor-label"> username: </div> <div class="personname"> @Html.TextBoxFor(m => m.PersonName) </div> <div class="editor-label"> 密 码: </div> <div class="password"> @Html.PasswordFor(m => m.Password) </div> <div class="editor-label" > 验证码: </div> <div class="validatecode"> @Html.TextBoxFor(m => m.ValidateCode, new { MaxLength = "4",@class="easyui-validatebox",required="true", missingMessage="不能为空"}) <img alt="点击刷新验证码!" title="点击刷新验证码!" src="Account/ValidateCode" style="cursor: pointer;" onclick="RefreshValidateCode(this);" /> </div> <p> <input class="submitcss" type="submit" value="登录系统" /> <span style="display:none"> @Html.CheckBoxFor(m=>m.RememberMe,"记住我") @Html.LabelFor(m=>m.RememberMe) </span> </p> <p> @Html.ValidationMessageFor(m => m.PersonName)<br /> @Html.ValidationMessageFor(m => m.Password) </p> </fieldset> </div> </div> </div> <div class="bottom"> </div> </div> } </body> </html>