使用C#编写MVC登录页面
2024-06-13 17:46:29
在编写项目时，编写了一部分关于登录页面的一些代码，现在和大家分享一下。
上图是本篇文章所要实现的样式和效果，可以更换身份，点击登录时跳转到主页面。
第一步先判断用户ID是否为空，如果不为空就跳转到登录页面。
public ActionResult Main(){// 读取session中的用户信息if (Session["UserID"] == null){return Redirect("/Main/Login");}return View();}
2.下面代码是登录页面的样式代码
（1）所要引入的文件
<head><meta name="viewport" content="width=device-width" /><title>登录</title><link href="~/Plugins/bootstrap-4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" /><link href="~/Content/css/login.css" rel="stylesheet" /><link rel="icon" type="image/png" sizes="16x16" href="~/Content/images/logo.ico"></head>（2）body的样式代码
<div class="container-fluid"><div class="row"><div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3 login"><div class="card border-info"><div class="card-body"><form action="/" method="post" id="fmLogin"><div class="form-group row"><label for="UserName" class="col-sm-3 col-xl-2 col-form-label txtr">用户名</label><div class="col-sm-9 col-xl-10"><input type="text" class="form-control" id="UserName" name="UserNuber" placeholder="请输入您的用户名" value="@ViewBag.UserNuber"></div></div><div class="form-group row"><label for="PassWord" class="col-sm-3 col-xl-2 col-form-label txtr">密 码</label><div class="col-sm-9 col-xl-10"><input type="password" class="form-control" id="PassWord" name="password" placeholder="请输入您的密码" value="@ViewBag.Password"></div></div><div class="form-group row"><label for="IdentifyingCode" class="col-sm-3 col-xl-2 col-form-label txtr">验证码</label><div class="col-sm-9 col-xl-10"><div class="input-group"><input type="text" class="form-control" id="IdentifyingCode" name="validCode" placeholder="请您输入验证码"><div class="input-group-prepend"><img src="/Main/ValidCode" class="input-group-text p-0" id="ValidateCode" /></div></div></div></div><div class="form-group row"><label for="IdentifyingCode" class="col-sm-3 col-xl-2 col-form-label txtr">身 份</label><div class="col-sm-9 col-xl-10"><select id="UserTypeClass" name="UserTypeClass" class="form-control select2 "><option value="1" @(ViewBag.UserTypeClass == "1" ? "selected" : "")>学生</option><option value="2" @(ViewBag.UserTypeClass == "2" ? "selected" : "")>教师</option><option value="3" @(ViewBag.UserTypeClass == "3" ? "selected" : "")>管理</option></select></div></div><div class="form-group row"><div class="col-sm-10 offset-sm-3 offset-lg-2"><div class="form-check"><input class="form-check-input" type="checkbox" id="RememberMe" name="rememberMe" checked="@ViewBag.isRember" ><label class="form-check-label" for="RememberMe">记住我</label></div></div></div><div class="form-group row"><div class="col-sm-10 offset-sm-3 offset-lg-2"><button type="button" class="btn btn-primary px-4" id="btnSubmit">登 陆</button><button type="reset" class="btn btn-outline-primary px-4 ml-4" id="">重 置</button></div></div></form></div></div></div></div></div>（3）js部分
<script src="~/Plugins/jquery-3.2.1.min.js"></script><script src="~/Plugins/layui/layui.js"></script><script>$(document).ready(function () {if (window.top.location.href != window.location.href) {window.top.location.href = window.location.href;}});//快捷键登录 回车$("body").keyup(function (e) {//事件对象if (e.keyCode == 13) {$("#btnSubmit").click();}});//验证图片点击切换$("#ValidateCode").click(function () {$(this).prop("src", "/Main/ValidCode?v=" + new Date().getTime());});//登录$("#btnSubmit").click(function () {//===登录逻辑//获取值var UserNuber = $('#fmLogin [name="UserNuber"]').val();var password = $('#fmLogin [name="password"]').val();var validCode = $('#fmLogin [name="validCode"]').val();var UserTypeClass = $('#fmLogin [name="UserTypeClass"]').val();//获取是否勾选 true falsevar rememberMe = $('#fmLogin [name="rememberMe"]').is(":checked");// 获取checkbox的值 $('#fmLogin [name="rememberMe"]').prop("checked")//判断是否填写数据if (strValIsNotNull(UserNuber) && strValIsNotNull(password) && strValIsNotNull(validCode)) {$.post("/Main/UserLogin", {UserNuber: UserNuber,password: password,validCode: validCode,UserTypeClass: UserTypeClass,rememberMe: rememberMe,}, function (msg) {if (msg.State) {window.location.replace("/Main/Main");//使用replace不会出现后退按钮} else {layer.alert(msg.Text)//清空密码和验证码$("#password").val("");$("#ValidateCode").val("");//验证码刷新$("#ValidateCode").click();}})} else {layer.alert("登录信息请填写完整");}});//字符串值不为空function strValIsNotNull(strVal) {return strVal != undefined && strVal != null && strVal != '';}</script>3. 验证码生成
public ActionResult ValidCode(){//生成一个随机字符串 验证码string strRandom = ValidCodeUtils.GetRandomCode(5);//五位数//string strRandom = "123";//验证码为123//将验证码存入Session会话Session["validCode"] = strRandom;//byte[] 根据验证码产生图片byte[] imgByte = ValidCodeUtils.CreateImage(strRandom);//返回图片信息return File(imgByte, @"image/jpeg");}4. 登录验证
public ActionResult UserLogin(){ReturnJson msg = new ReturnJson();//获取页面传递的数据string strUserNuber = Request["UserNuber"].Trim();//用户名string strPassword = Request["password"].Trim();//密码string strValidCode = Request["validCode"].Trim();//验证码string strIsRember = Request["rememberMe"].Trim();//记住否 string strUserTypeClass = Request["UserTypeClass"];//用户类型ID//获取存放在session中的验证码string sessionValiCode = "";try{sessionValiCode = Session["validCode"].ToString();}catch (Exception e){msg.Text = "验证码丢失！请刷新验证码，重新登录验证";return Json(msg, JsonRequestBehavior.AllowGet);}//判断填入的验证和session中的验证码是否一致if (sessionValiCode.Equals(strValidCode.Trim(), StringComparison.InvariantCultureIgnoreCase)){try{PW_User dbUser = (from tbUser in myModel.PW_Userwhere tbUser.UserNuber == strUserNuber && tbUser.ToVoidNo == trueselect tbUser).Single();//单条数据据，当没有数据或者有多条数据时会触发异常///将用户输入的密码进行AES265后与数据库中的密码对比string password = AESEncryptHelper.Encrypt(strPassword);if (dbUser.Password.Equals(password)){var listUserType = (from tbUser in myModel.PW_Userjoin tbUserRoleDetail in myModel.PW_UserRoleDetail on tbUser.UserID equals tbUserRoleDetail.UserIDjoin tbUserType in myModel.SYS_UserType on tbUserRoleDetail.UserTypeID equals tbUserType.UserTypeIDwhere tbUser.UserID == dbUser.UserID && tbUserType.typeClass == strUserTypeClassselect new{tbUserType.UserTypeID,tbUserType.UserType}).ToList();if (listUserType.Count > 0){//用户身份验证完成 开始处理登录信息//获取用户类型名称Session["UserID"] = dbUser.UserID; // 传递 UserID Session["UserTypeID"] = listUserType[0].UserTypeID;// 传递 UserTypeID Session["ServerTime"] = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); ;//登录时间Session["UserTypeClass"] = strUserTypeClass;//用户的类型 1-学生；2-教师；3-管理//如果需要记住密码 strIsRember =="true "设置cookieif (strIsRember == "true"){//记住密码 保存cookieHttpCookie cookie = new HttpCookie("user");cookie.Expires = DateTime.Now.AddDays(7);//保存7天//HttpUtility 提供在处理 Web 请求时用于编码和解码 URL 的方法//UrlEncode()使用指定的编码对象，对 URL 字符串进行编码cookie["UserNuber"] = HttpUtility.UrlEncode(strUserNuber, Encoding.GetEncoding("UTF-8"));//用户名cookie["Password"] = strPassword;//密码cookie["UserTypeClass"] = strUserTypeClass;//用户类型Response.Cookies.Add(cookie);}else {//删除 cookieHttpCookie cookie = new HttpCookie("user");cookie.Expires = DateTime.Now.AddDays(-1);//通过设置 Cookie 的过期时间为负，强制使 Cookie 过期Response.Cookies.Add(cookie);}msg.State = true;msg.Text = "用户登录成功";}else{msg.Text = "用户类型错误!";}}else {msg.Text = "用户密码错误，请重新输入";}}catch (Exception e){Console.WriteLine(e);msg.Text = "此用户不存在，请重新输入";}}else {msg.Text = "验证码错误！请重新登录验证";}return Json(msg, JsonRequestBehavior.AllowGet);}5.模块权限查询 By 用户ID
public ActionResult SelectModularJurisdiction(){if (Session["UserID"] != null){int userId = Convert.ToInt32(Session["UserID"]);//读取权限信息var tempModulars = from tbUserRoleDetail in myModel.PW_UserRoleDetailjoin tbJurisdiction in myModel.PW_Jurisdiction on tbUserRoleDetail.UserTypeID equals tbJurisdiction.UserTypeIDjoin tbModularDetail in myModel.SYS_ModularDetail on tbJurisdiction.ModularDetailID equals tbModularDetail.ModularDetailIDjoin tbModular in myModel.SYS_Modular on tbModularDetail.ModularID equals tbModular.ModularIDwhere tbUserRoleDetail.UserID == userIdselect new{ID = tbModularDetail.ModularID,Name = tbModular.ModularName.Trim()};//外连接(左连接)var userModulars = (from tbSysModular in myModel.SYS_Modularjoin tbTempModulars in tempModulars on tbSysModular.ModularID equals tbTempModulars.ID into tempselect new{ModularID = tbSysModular.ModularID,ModularName = tbSysModular.ModularName.Trim(),ID = temp.Select(t => t.ID).FirstOrDefault() != null ? temp.Select(t => t.ID).FirstOrDefault() : 0}).ToList();return Json(userModulars, JsonRequestBehavior.AllowGet);}else {return Json("", JsonRequestBehavior.AllowGet);}}6.数据回填
public ActionResult Login(){#region 读取cookie中的数据 登录页面数据回填string UserNuber = "";string Password = "";string UserTypeClass = "";bool isRember = false;//读取浏览器请求传递的cookieHttpCookie cookie = System.Web.HttpContext.Current.Request.Cookies["user"];if (cookie != null)//判断cookie是否存在{if (cookie["UserNuber"] != null){//UserNuber = System.Web.HttpContext.Current.Server.UrlDecode(cookie["UserNuber"]);UserNuber = HttpUtility.UrlDecode(cookie["UserNuber"], Encoding.GetEncoding("UTF-8"));}if (cookie["Password"] != null){Password = System.Web.HttpContext.Current.Server.UrlDecode(cookie["Password"]);}if (cookie["UserTypeClass"] != null){UserTypeClass = System.Web.HttpContext.Current.Server.UrlDecode(cookie["UserTypeClass"]);}isRember = true;}#endregionViewBag.UserNuber = UserNuber;ViewBag.Password = Password;ViewBag.UserTypeClass = UserTypeClass;ViewBag.isRember = isRember;return View();使用C#编写MVC登录页面相关推荐
- ASP.NET.MVC登录页面
ASP.NET.MVC登录页面 开发工具与关键技术:Visual Studio 2015 作者:昨夜星辰 撰写时间:2019年05月09日 一.我们学习MVC的时候做的第一步就是登陆,登陆是做项目必不 ...
- vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
- 用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码 登 陆 微信登陆QQ登陆 注 册 #zuo{ width: 500px; height: 540px; background: whi ...
- php编写用户登录页面,PHP实现用户登录页面
PHP学习日常,放在上面记录一下咯 我用了bootstrap框架,这样的界面要好看一点 登录页面: 必须用户名.密码.验证码都输入正确才能登录成功喔,否则出现下面提示 登陆成功之后,登录和注册选项切换 ...
- php编写用户登录页面,js+php实现静态页面实时调用用户登陆状态的方法
这篇文章主要介绍了js+php实现静态页面实时调用用户登陆状态的方法,采用在静态页面中使用js调用php页面从而实现用户登录状态的实时调用功能,需要的朋友可以参考下 本文实例讲述了js+php实现静态 ...
- 【Vue2注册登录界面】Vue2+elementUI编写一个登录页面，路由式开发，后台管理系统登录界面
目录 效果图 1.template部分 2.style部分 3.vue部分 (1).引入封装的axios接口,方便后面联调 (2)表单 (3).methods部分 4.完整代码 效果图 1.templ ...
- php代码编写注册登录页面,PHP开发登录注册完整代码之注册HTML页面
创建 reg.html 文件 我们此页面有一个 表单,里面有四个input输入框,我们用JS对输入框里面的内容作了登录判断,并使用了css对表单进行了布局. 代码如下html> 登陆界面 fun ...
- 软件测试案例｜Python+Selenium+unittest完成对登录页面的自动化测试
软件测试案例:Python+Selenium+unittest完成对登录页面的自动化测试 01.实验简介 本实验使用Python语言结合Selenium UI测试工具,利用unittest组织测试用例 ...
- HTML登录页面设计
HTML登录页面设计 编写用户登录页面,效果如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
最新文章
- sudo brew install mongodb报错
- 万能的model数据选择列表
- 设置eclipse中的编辑区的背景颜色、注释文字的颜色、修改注释内作者名和时间
- c获取文件的名字和运行到程序的第几行功能
- ios信号从4g变成无服务器,苹果信号满格显示是4g却没网络
- Hbase二级索引+CDH+Lily
- linux与s7-300,Siemens SIMATIC S7-300硬编码凭证安全限制绕过漏洞
- 移动磁盘连接电脑后，仅有“只读”权限解决方案
- 把wasm反编译出来
- 流程管理对企业有何价值？如何做好企业流程管理？
- FileZilla的下载与安装以及简单使用（有图解超简单）
- jupyter notebook 实用快捷键大全
- 手机App开发的基础概念
- 1166 - Unknown error 1166[mysql 错误
- DB-Engines：2016年10月份全球数据库排名
- 又写无关IT的东西：经济学术语
- c语言随机产生大小写字母,c# 产生随机字符串，包括大小写字母和数字
- freecodecamp_freeCodeCamp发布样式指南
- 现在市场上，C++ 主要用来做什么？
- 2021-1-22初学JAVA