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>