3、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle項目開發之——使用者登入

標籤：style   blog   class   code   java   ext   

最近由於項目趕著上線，一直沒時間接著寫部落格，今天終於空出了時間。聲名：我不是專業美工，所以介面問題，希望大家不要拍磚。登入介面如下：

在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 = "請填寫使用者名稱")] 必填 ...等驗證            {                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", "使用者名稱或者密碼出錯。");            return View();        }   public void ValidateCode()        {            Response.ClearContent(); //需要輸出圖象資訊 要修改HTTP頭             Response.ContentType = "image/jpeg";            ValidateCodeFun.CreateValidateCode(4);        }

其中LogOnModel是專門為登入進行設計的業務模型，

    public class LogOnModel    {        [Required(ErrorMessage = "請填寫使用者名稱")]        [DisplayName("使用者名稱")]        public string PersonName { get; set; }        [StringLength(100, ErrorMessage = "{0} 必須至少包含 {2} 個字元。", MinimumLength = 3)]        [Required(ErrorMessage = "請填寫密碼")]        [DataType(DataType.Password)]        [DisplayName("密碼")]        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">                            使用者名稱：                        </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>