• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

ASP.NETMVC简单的登录功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

第一次做登录功能，有点缺陷，代码比较简单，没有过多介绍。

一、创建一个LoginModel.cs 类

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace System.Models
{
  public class LoginModel
    {
        [Required(ErrorMessage = "请输入用户名")]
        [Display(Name = "用户名")]
        public string loginName { get; set; }

        [Required(ErrorMessage = "请输入密码")]
        [Display(Name = "密码")]
        public string pwd { get; set; }

        [Required(ErrorMessage = "验证码必须填写")]
        [Display(Name = "验证码")]
        public string Vcode { get; set; }


    }
}

　二、界面

ps:因为是用layui做的，所以还需要引入layui 相关的js和样式。

@model System.Models.LoginModel
@{ 
    if (ViewData["IsShowAlert"] != null && ViewData["IsShowAlert"].ToString() == "True")
    {
        Response.Write(" <script>alert('" + ViewData["alert"] + "'); </script>");
    }
}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录--layui后台管理模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    @Styles.Render("~/Content/layuicms/layui/css/layui.css")
    @Styles.Render("~/Content/layuicms/css/login.css")
    @Styles.Render("~/Scripts/jquery-1.10.2.js")
    @Scripts.Render("~/Scripts/jquery.validate.js")
    @Scripts.Render("~/Scripts/jquery.validate.unobtrusive.js")
    <style type="text/css">
        .login {
            height:300px !important;
        }
    </style>
</head>
<body>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <div class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080" data-width="1920" height="1080" width="1920">
         <!--背景图片-->
        <img src="~/Content/layuicms/page/login/login.jpg"  style="width:100%; height:100%"/>
    </div>
    <div class="login">
            <h1>登录</h1>
            <form class="layui-form">
                <div class="layui-form-item">
                    @Html.TextBoxFor(m => m.loginName, new { @class = "layui-input", @placeholder= "用户名"  })
                    @Html.ValidationMessageFor(m => m.loginName)
        
                 </div>
                <div class="layui-form-item">
                    @Html.PasswordFor(m => m.pwd, new { @class = "layui-input", @placeholder = "密码" })
                    @Html.ValidationMessageFor(m => m.pwd)
                </div>
                <div class="layui-form-item form_code">
                    @Html.TextBoxFor(m => m.Vcode, new { @style = "height: 38px;line - height: 38px;width:126px ", placeholder = "验证码", id = "Vcode" })
                    <img src="~/Login/GetValidateCode" alt="验证码"  />
                    <a href ="javascript:changeCode()" style="text-decoration: underline;"> 换一张</a>
                    @Html.ValidationMessageFor(m => m.Vcode)

      </div>
                <input type="submit" value="登录" class="layui-btn login_btn" />
            </form>
        </div>
}         
        @Scripts.Render("~/Content/layuicms/layui/layui.js")
        @Scripts.Render("~/Content/layuicms/page/login/login.js")
       <script type="text/javascript"> 
           function changeCode() {
               document.getElementById('vcodeimg').src = document.getElementById('vcodeimg').src + '?';

           }   
       </script>
</body>
</html>

效果图：

login还要用到的js和css

layui.config({
	base : "js/"
}).use(['form','layer'],function(){
	var form = layui.form(),
		layer = parent.layer === undefined ? layui.layer : parent.layer,
		$ = layui.jquery;
    //video背景
	$(window).resize(function () {
	    if ($(".video-player").width() > $(window).width()) {
	        $(".video-player").css({ "height": $(window).height(), "width": "auto", "left": -($(".video-player").width() - $(window).width()) / 2 });
	    } else {
	        $(".video-player").css({ "width": $(window).width(), "height": "auto", "left": -($(".video-player").width() - $(window).width()) / 2 });
	    }
	}).resize();
	
	////登录按钮事件
	//form.on("submit(login)", function (data) {
	//    window.location.href = "/Home";
	//	return false;
	//})
})
//css部分
body{overflow:hidden;}
.video-player{background-color: transparent;min-width: 100%;min-height: 100%;display: block;position: absolute;z-index: 1;top:0;}
.video_mask{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:90; background-color:rgba(0,0,0,0.5); }
.login{ height:260px;width:260px;padding: 20px;background-color:rgba(0,0,0,0.5);border-radius: 4px;position:absolute;left: 50%;top: 50%; margin:-150px 0 0 -150px;z-index:99;}
.login h1{ text-align:center; color:#fff; font-size:24px; margin-bottom:20px; }
.form_code{ position:relative; }
.form_code .code{ position:absolute; right:0; top:1px; cursor:pointer; }
.login_btn{ width:100%; }

　　

 

　控制器部分：

using Common.Tools;
using DefaultConnection;
using Microsoft.Practices.Unity;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Models;
using System.Web;
using System.Web.Mvc;
using Moon.Orm;
using BLL;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

namespace WebApplication3.Controllers
{
    public class LoginController : Controller
    {
        [Dependency]
        public UserBLL usBLL { get; set; }
        // GET: Login
        public ActionResult Index()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(LoginModel model)
        {
            try
            {
               if (ModelState.IsValid==true)
                    {
                        if (Session["ValidateCode"].ToString() != model.Vcode)
                        {
                            ViewData["IsShowAlert"] = true;
                            ViewData["alert"] = "验证码错误";
                         } else{
                            var userinfo3 = usBLL.GetByLogin(model.loginName, model.pwd);
                            if (userinfo3 != null)
                            {
                                User ss = new User()
                                {
                                    Id = userinfo3.Id,
                                    LoginName = userinfo3.LoginName,
                                    PassWord = userinfo3.PassWord,
                                    Name = userinfo3.Name
                                };
                                Session["Loginname"] = ss;
                                return RedirectToAction("", "Home");   
                            }
                            else
                            {
                                ViewData["IsShowAlert"] = true;
                                ViewData["alert"] = "帐号或者密码错误";
                            }
                        }
                }
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", ex.Message);
            }
            return View();

        }

        //验证码
        public ActionResult GetValidateCode()
        {
            ValidateCode vCode = new ValidateCode();
            string code = vCode.CreateValidateCode(5);
            Session["ValidateCode"] = code;
            byte[] bytes = vCode.CreateValidateGraphic(code);
            return File(bytes, @"image/jpeg");
        }
    }
}

UserBLL 部分：

        /// <summary>
        /// 登录用
        /// </summary>
        /// <param name="loginName"></param>
        /// <param name="pwd"></param>
        /// <returns></returns>
        public  User GetByLogin(string loginName, string pwd)
        {
             User item = null;
            var mql =  UserSet.SelectAll().Where( UserSet.LoginName.Equal(loginName).And( UserSet.PassWord.Equal(pwd)));
            List< User> list = rmsUserRoleDal.GetOwnList< User>(mql);
            if (list.Count == 0)
            {
                return item;
            }
            return list[0];

        }

　　

 ValidateCode 类 （在网上找的）

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Text;

namespace Common.Tools
{
    /// <summary>
    /// 生成验证码对象
    /// </summary>

    public class ValidateCode
    {
        public ValidateCode()
        {
        }

        ///<summary>
        /// 验证码的最大长度
        ///</summary>
        public int MaxLength
        {
            get { return 10; }
        }
        ///<summary>
        /// 验证码的最小长度
        ///</summary>
        public int MinLength
        {
            get { return 1; }
        }
        ///<summary>
        /// 生成验证码
        ///</summary>
        ///<param name="length">指定验证码的长度</param>
        ///<returns></returns>
        public string CreateValidateCode(int length)
        {
            int[] randMembers = new int[length];
            int[] validateNums = new int[length];
            string validateNumberStr = "";
            //生成起始序列值
            int seekSeek = unchecked((int)DateTime.Now.Ticks);
            Random seekRand = new Random(seekSeek);
            int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000);
            int[] seeks = new int[length];
            for (int i = 0; i < length; i++)
            {
                beginSeek += 10000;
                seeks[i] = beginSeek;
            }

            //生成随机数字
            for (int i = 0; i < length; i++)
            {
                Random rand = new Random(seeks[i]);
                int pownum = 1 * (int)Math.Pow(10, length);
                randMembers[i] = rand.Next(pownum, Int32.MaxValue);
            }

            //抽取随机数字
            for (int i = 0; i < length; i++)
            {
                string numStr = randMembers[i].ToString();
                int numLength = numStr.Length;
                Random rand = new Random();
                int numPosition = rand.Next(0, numLength - 1);
                validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1));
            }

            //生成验证码
            for (int i = 0; i < length; i++)
            {
                validateNumberStr += validateNums[i].ToString();
            }
            return validateNumberStr;
        }

        ///<summary>
        /// 创建验证码的图片
        ///</summary>
        ///<param name="containsPage">要输出到的page对象</param>
        ///<param name="validateNum">验证码</param>
        public byte[] CreateValidateGraphic(string validateCode)
        {
            Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 14.0), 22);
            Graphics g = Graphics.FromImage(image);
            try
            {

                //生成随机生成器
                Random random = new Random();
                //清空图片背景色
                g.Clear(Color.White);
                //画图片的干扰线
                for (int i = 0; i < 25; i++)
                {
                    int x1 = random.Next(image.Width);
                    int x2 = random.Next(image.Width);
                    int y1 = random.Next(image.Height);
                    int y2 = random.Next(image.Height);
                    g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
                }

                Font font = new Font("Arial", 14, (FontStyle.Bold | FontStyle.Italic));
                LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),
                Color.Blue, Color.DarkRed, 1.5f, true);
                g.DrawString(validateCode, font, brush, 3, 2);

                //画图片的前景干扰点
                for (int i = 0; i < 100; i++)
                {
                    int x = random.Next(image.Width);
                    int y = random.Next(image.Height);
                    image.SetPixel(x, y, Color.FromArgb(random.Next()));
                }

                //画图片的边框线
                g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
                //保存图片数据
                MemoryStream stream = new MemoryStream();
                image.Save(stream, ImageFormat.Jpeg);
                //输出图片流
                return stream.ToArray();
            }
            finally
            {
                g.Dispose();
                image.Dispose();
            }
        }
    }
}

　登录成功后Home后台接收后将登陆人的信息显示在界面:

using DefaultConnection;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication3.ActionFilter;

namespace WebApplication3.Controllers
{
    public class HomeController : Controller
    {
        [LoginActionFilter]
        public ActionResult Index()
        {
            User user = (User)Session["Loginname"];
            User ss = new User()
            {
                Id = user.Id,
                LoginName = user.LoginName,
                PassWord = user.PassWord,
                Name = user.Name
            };
            ViewBag.LoginName = ss.Name;
            return View();
        }

        public ActionResult Main() {
            return View();
        }

        public ActionResult LoginError()
        {
            return View();
        }

    }
}　
LoginActionFilter.css
using DefaultConnection;
using Microsoft.Practices.Unity;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Models;
using System.Web;
using System.Web.Mvc;

namespace WebApplication3.ActionFilter
{
    public class LoginActionFilter : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {

            User userLoginedModel = (User)filterContext.RequestContext.HttpContext.Session["Loginname"];
            if (userLoginedModel == null)
            {
                filterContext.Result = new RedirectResult("/Home/LoginError");
            }
            return;
        }
    }
}

　效果：

LoginError错误提示界面:

@{
    ViewBag.Title = "LoginError";
}
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("error_content").innerHTML = "在线状态超时或未登录";
        setTimeout("toLogin()", 1000);
    }
    function toLogin() {
        top.location.replace('/Login/Index');
    }
</script>
<div style="position:absolute;top:50%;left:30%;"><h1 ></h1></div>

　　

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
URL与物理文件的分离【转】ASP.NET的路由系统：URL与物理文件的分离 ...发布时间：2022-07-10
下一篇：
ASP.NETWebApi技术从入门到实战演练发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap