【博主推荐】C#MVC后台管理系统(附源码)
2022-08-03 09:57:03
267
{{single.collect_count}}

【博主推荐】C#MVC后台管理系统(附源码)

【博主推荐】C#MVC后台管理系统(附源码),从项目创建,一步步指导开发一套完整的后台管理系统。

1.MVC框架说明

MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写.

1.App_Data: 该文件夹主要是包含应用程序的本地存储, 它通常以文件形式(如Microsoft SQL Server数据库文件, XML文件等)包含数据存储。

2.App_Start: 该文件夹包含应用程序的配置逻辑文件, 具体包括BundleConfig.cs, FilterConfig.cs, RouteConfig.cs, Startup.Auth.cs。

BundleConfig.cs: 注册所使用的捆绑的CSS 和 JS文件。FilterConfig.cs: 注册外部/全局过滤器,这些过滤器可以被应用到每个Action和Controller中去.RouteConfig.cs: 配置MVC应用程序的系统路由路径。Startup.Auth.cs: 配置MVC应用程序的安全信息,包括Authentication和Authorization配置以及第三方Authentication Provider

3.Content: 该文件夹被推荐用于存储静态内容文件类似CSS 和 (图片)Images。

4.Controllers:顾名思义,该文件夹用于存储所有的控制器且控制器必须以"Controller"结尾。

5.fonts: 该文件夹用于存储MVC应用程序可能用到的字体文件。

6.Models: 该文件夹用于存储应用程序实体模型类, 实体类可以定义对象以及应用程序逻辑。

7.Scripts: 该文件夹默认存储ASP.NET Ajax Foundation files和Jquery.主要被用来存储应用程序所支持的脚本(JS)文件。

8.Views: 该文件夹主要用来存储MVC应用程序所使用的.cshtml网页,Account是账户页面,Home是主页面,Shared共享页面。

9.Gobal.asax:
(摘自MSDN)这里的Global.asax主要是web应用程序的全局设置文件,该文件包含响应 ASP.NET 或HTTP模块所引发的应用程序级别和会话级别事件的代码。Global.asax 文件驻留在 ASP.NET 应用程序的根目录中。运行时,分析 Global.asax 并将其编译到一个动态生成的 .NET Framework 类,该类是从HttpApplication基类派生的。配置 ASP.NET,以便自动拒绝对 Global.asax 文件的任何直接的 URL 请求;外部用户不能下载或查看其中的代码。Global.asax 文件是可选的。只在希望处理应用程序事件或会话事件时,才应创建它。

10.Web.config:
((摘自MSDN)Web.config文件是一个XML文本文件,它用来储存ASP.NETWeb 应用程序的配置信息(如最常用的设置ASP.NETWeb 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中。当你通过.NET新建一个Web应用程序后,默认情况下会在根目录自动创建一个默认的Web.config文件,包括默认的配置设置,所有的子目录都继承它的配置设置。如果你想修改子目录的配置设置,你可以在该子目录下新建一个Web.config文件。它可以提供除从父目录继承的配置信息以外的配置信息,也可以重写或修改父目录中定义的设置。

在运行时对Web.config文件的修改不需要重启服务就可以生效(注: 节例外)。当然Web.config文件是可以扩展的。你可以自定义新配置参数并编写配置节处理程序以对它们进行处理。

11.Startup.cs:
重点介绍下Startup.cs文件:
这个文件主要是提供给OWIN(Open Web Interface for .NEt)应用程序使用,OWIN的目的是为了解耦服务器应用程序。例如在ASP.NET Identity使用OWIN security, SignalR self hosting使用OWIN hosting等情况下, 我们的MVC应用程序都有使用到OWIN, 所以,他们都相应的会使用到startup.cs所定义的Startup class. 关于OWIN的应用这里不作详述,这里提到OWN主要是为了说明Startup.cs文件的使用。

2.启动项目执行先后

1.Global.asax
2.Startup.cs
3.index.cshtml
4.Layout.cshtml
5.LoginPartial.cshtml

3.新建一个MVC

x
在这里插入图片描述
在这里插入图片描述
清空scripts里面js
清空系统自带的view
清空多余不用的
一个空的MVC应用就创建成功了,下面就为MVC添砖加瓦。

4.添加控制器

Controllers文件夹右键 > 添加控制器 > MVC5控制器-空
在这里插入图片描述

5.添加视图

方式1
Views下面Home 右键 > 添加 >视图

方式2
控制器 > 选中Index > 右键 > 添加视图
在这里插入图片描述

6.实现登录

6.1 登录示意图

在这里插入图片描述

6.2 登录源码

----Controllerpublic class HomeController : Controller{// GET: Homepublic ActionResult Index(){return View();}//登录public ActionResult Login(string UserName, string UserPwd){if (UserName == null || UserPwd == null){return View();}if (UserName.Equals("admin") && UserPwd.Equals("000000")){var sessionUser = System.Web.HttpContext.Current.Session["UserInfo"];//使用sessionUserModel userModel = new UserModel();userModel.passWord = UserName;userModel.userName = UserPwd;if (sessionUser == null){System.Web.HttpContext.Current.Session["UserInfo"] = userModel;//userDTO登陆用户实体类}else{System.Web.HttpContext.Current.Session.Clear();System.Web.HttpContext.Current.Session["UserInfo"] = userModel;//userDTO登陆用户实体类}return RedirectToAction("Home", "Index");//控制跳控制}else{ViewBag.LoginInfo = "用户名密码错误";return View("~/Views/Home/Login.cshtml");}}}
----实体类UserModelpublic class UserModel{public string userName { get; set; }public string passWord { get; set; }}
----View视图<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><meta name="format-detection" content="telephone=no, email=no, date=no, address=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="format-detection" content="telephone=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta content="black" name="apple-mobile-web-app-status-bar-style"><link href="~/Content/bksystem.css" rel="stylesheet" type="text/css" /><link href="~/skin/black/skin.css" rel="stylesheet" type="text/css" id="skin" /><link href="~/Content/module.css" rel="stylesheet" type="text/css" /><link href="~/fonts/iconfont.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="~/Content/login/css/supersized.css" /><title>登录</title><link rel="shortcut icon" href="~/favicon.ico"><script src="~/scripts/jquery-1.9.1.min.js" type="text/javascript"></script><script src="~/scripts/jquery.cookie.js" type="text/javascript"></script><script src="~/scripts/jquery.nicescroll.js" type="text/javascript"></script><script src="~/scripts/BKframe.js" type="text/javascript"></script><script src="~/scripts/layer/layer.js" type="text/javascript"></script></head><body class="login-layout Reg_log_style" id="loginstyle" oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;"><div id="supersized"></div><div class="loginbody"><div class="login-container"><div class="position-relative"><div id="login-box" class="login-box widget-box no-border visible"><div class="login-main" style="width:400px; border-radius:20px 20px 0px 0px;"><div class="clearfix" style="width:400px; border-radius:20px 20px 0px 0px;"><form id="form1" class="" action="Login" method="post" style=" width:300px; float:right; margin-right:40px;"><h4 class="title_name"><img src="~/Images/login_title.png" /></h4><fieldset><ul><li class="frame_style form_error"><label class="user_icon iconfont"></label><input name="UserName" type="text" data-name="用户名" id="UserName" /><i>用户名</i></li><li class="frame_style form_error"><label class="password_icon iconfont"></label><input name="UserPwd" type="password" data-name="密码" id="UserPwd" /><i>密码</i></li>@*<li class="frame_style form_error"><label class="Codes_icon iconfont"></label><input name="" type="text" data-name="验证码" id="Codes_text" /><i>验证码</i><div class="Codes_region"><img src="images/yanzhengma.png" width="100%" height="38px"></div></li>*@</ul><div class="space"></div><div class="clearfix">@*<label class="inline"><input type="checkbox" class="ace"><span class="lbl">保存密码</span></label>*@<label class="inline"><span class="lbl" style="color:#01435D;">@Html.Raw(ViewBag.LoginInfo)</span></label><button type="button" class="login_btn" id="login_btn"> 登 录 </button></div><div class="space-4"></div></fieldset></form></div></div></div></div></div></div><div class="loginbm" style="font-size:16px;">版权所有 2022</div><script type="text/javascript" src="~/Content/login/js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="~/Content/login/js/supersized-init.js"></script><script type="text/javascript" src="~/Content/login/js/supersized.3.2.7.min.js"></script></body></html>

7.实现首页

7.1首页示意图

在这里插入图片描述

7.2 首页源码

----View界面<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><title>后台管理系统</title><link rel="stylesheet" href="~/Scripts/bootstrap/css/bootstrap.min.css" /><link rel="stylesheet" href="~/Content/font-awesome.min.css" /><link rel="stylesheet" href="~/Content/index.css" /><link rel="stylesheet" href="~/Content/skins/_all-skins.css" /><style type="text/css">body {font-family:STSong,华文宋体;}</style></head><body class="hold-transition skin-blue sidebar-mini" style="overflow:hidden;"><div id="ajax-loader" style="cursor: progress; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: #fff; z-index: 10000; overflow: hidden;"><img src="img/ajax-loader.gif" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;" /></div><div class="wrapper"><!--头部信息--><header class="main-header"><a href="#" target="_blank" class="logo"><span class="logo-mini">Manager</span><span class="logo-lg">Manager<strong>System</strong></span></a><nav class="navbar navbar-static-top"><a class="sidebar-toggle"><span class="sr-only">Toggle navigation</span></a><div style="position:absolute;left:50px;top:10px;z-index:999;font-size:20px;font-weight:bold;"><span style="letter-spacing:0px;">后台管理系统</span></div><div class="navbar-custom-menu"><ul class="nav navbar-nav"><li class="dropdown user user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="~/Images/user1.jpg" class="user-image" alt="User Image"><span class="hidden-xs">admin</span></a><ul class="dropdown-menu pull-right"><li><a class="menuItem" data-id="userInfo" href="sysdetail.aspx"><i class="fa fa-user"></i>系统介绍</a></li><li class="divider"></li><li><a href="/Home/LoginOut"><i class="ace-icon fa fa-power-off"></i>安全退出</a></li></ul></li></ul></div></nav></header><!--左边导航--><div class="main-sidebar"><div class="sidebar"><div class="user-panel"><div class="pull-left image"><img src="~/Images/user1.jpg" class="img-circle" alt="User Image"></div><div class="pull-left info"><p>admin</p><a><i class="fa fa-circle text-success"></i>在线</a></div></div><ul class="sidebar-menu" id="sidebar-menu"><!--<li class="header">导航菜单</li>--></ul></div></div><!--中间内容--><div id="content-wrapper" class="content-wrapper"><div class="content-tabs"><button class="roll-nav roll-left tabLeft"><i class="fa fa-backward"></i></button><nav class="page-tabs menuTabs"><div class="page-tabs-content" style="margin-left: 0px;"><a href="javascript:;" class="menuTab active" data-id="/Home/First">欢迎首页</a></div></nav><button class="roll-nav roll-right tabRight"><i class="fa fa-forward" style="margin-left: 3px;"></i></button><div class="btn-group roll-nav roll-right"><button class="dropdown tabClose" data-toggle="dropdown">页签操作<i class="fa fa-caret-down" style="padding-left: 3px;"></i></button><ul class="dropdown-menu dropdown-menu-right"><li><a class="tabReload" href="javascript:void();">刷新当前</a></li><li><a class="tabCloseCurrent" href="javascript:void();">关闭当前</a></li><li><a class="tabCloseAll" href="javascript:void();">全部关闭</a></li><li><a class="tabCloseOther" href="javascript:void();">除此之外全部关闭</a></li></ul></div><button class="roll-nav roll-right fullscreen"><i class="fa fa-arrows-alt"></i></button></div><div class="content-iframe" style="overflow: hidden;"><div class="mainContent" id="content-main" style="margin: 10px; margin-bottom: 0px; padding: 0;"><iframe class="LRADMS_iframe" width="100%" height="100%" src="/Home/First" frameborder="0" data-id="/Home/First"></iframe></div></div></div></div><script src="~/Scripts/jQuery-2.2.0.min.js"></script><script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script><script src="~/Scripts/index.js"></script></body></html>

8.实现列表

8.1 列表示意图

列表
在这里插入图片描述
在这里插入图片描述

8.1列表源码

----View界面<!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>项目</title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="~/list/css/normalize.css"><link rel="stylesheet" href="~/list/bootstrap/css/bootstrap.css"><link rel="stylesheet" href="~/list/src/mmGrid.css"><link rel="stylesheet" href="~/list/src/theme/bootstrap/mmGrid-bootstrap.css"><link rel="stylesheet" href="~/list/src/mmPaginator.css"><link rel="stylesheet" href="~/list/src/theme/bootstrap/mmPaginator-bootstrap.css"><style>html,body {font-family: 'Helvetica Neue',helvetica, "Hiragino Sans GB",'Microsoft YaHei', "WenQuanYi Micro Hei", sans-serif;font-size: 12px;color: #444;}.btn {font-size: 12px;}.btnPrice {display: block;width: 16px;height: 16px;margin: 0px auto;background: url(~/list/img/botton_g1.gif) no-repeat;}.btnPrice:hover {background: url(~/list/img/botton_g2.gif) no-repeat;}</style><!--[if lt IE 9]><script src="js/vendor/html5shiv.js"></script><![endif]--><script src="~/list/js/vendor/modernizr-2.6.2.min.js"></script></head><body style="margin:0px;padding:0px;padding-top:5px;"><main><div style="margin-bottom: 5px;"><button id="btnRemoveAll" class="btn" onclick="add('/Item/ItemMan','新增');">新增数据</button></div><table id="mmg" class="mmg"><tr><th rowspan="" colspan=""></th></tr></table><div id="pg" style="text-align: right;"></div></main><script src="~/list/js/vendor/jquery-1.9.1.min.js"></script><script src="~/list/js/plugins.js"></script><script src="~/list/js/vendor/json2.js"></script><script src="~/list/src/mmGrid.js"></script><script src="~/list/src/mmPaginator.js"></script><script src="~/Scripts/layer/layer.js"></script><script>var token = "@ViewBag.token";var url = "@ViewBag.url";function add(url,type) {var index = layer.open({type: 2,title: "管理 - "+type,maxmin: true,area: ['500px', '350px'],content: url,cancel: function (index, layero) {//取消事件},end: function () {//无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数。layer.open关闭事件location.reload();  //layer.open关闭刷新}});}var h = window.innerHeight - 80;$(document).ready(function(){var fixed2 = function(val){if(!val){return '';}return val.toFixed(2);}var cols = [{ title: '序号', name: 'ID', width: 100, sortable: false, hidden: true, align: 'center' },{ title: '项目名称', name: 'NAME', width: 100, sortable: false, align: 'center' },{ title: '密钥编码', name: 'CODE', width: 100, sortable: false, align: 'center' },{ title: '备注', name: 'DETAIL', width: 100, sortable: false, align: 'center' },{ title: '操作时间', name: 'INSERTTIME', width: 100, sortable: false, align: 'center' },{ title:'操作', name:'' ,width:150, align:'center', lockWidth:true, lockDisplay: true, renderer: function(val){//return '<buttonclass="btn btn-info">查看</button> <buttonclass="btn btn-danger">删除</button>'return '<buttonclass="btn btn-danger">删除</button>'}}];var mmg = $('.mmg').mmGrid({height: h, cols: cols, url: url+'apiselect?token='+token+'&tablename=SMS_ITEM&tj= and 1@A@1', method: 'get', remoteSort:true//, items: items, sortName: 'ID', sortStatus: 'asc', multiSelect: true, noDataText:"没有数据"//没有数据时显示没有数据, checkCol: true, fullWidthRows: true, autoLoad: false, plugins: [$('#pg').mmPaginator({limitList: [10, 20, 30, 40]})]});mmg.on('cellSelected', function(e, item, rowIndex, colIndex){//console.log('cellSelected!');//console.log(this);//console.log(e);//console.log(item);//console.log(rowIndex);//console.log(colIndex);//查看if($(e.target).is('.btn-info, .btnPrice')){e.stopPropagation();//阻止事件冒泡alert(JSON.stringify(item));}else if($(e.target).is('.btn-danger') && confirm('你确定要删除该行记录吗?')){e.stopPropagation(); //阻止事件冒泡mmg.removeRow(rowIndex);$.ajax({type: "post",url: url+"apidel",data: {token: token,tablename: 'SMS_ITEM',tj:'id@@A@@'+item.ID},dataType: "json",//请求参数的格式为json.另外还有text等async: false,//这里默认为false,即异步请求,如果为true就是同步success: function (data) {//成功返回信息var obj = eval(data);layer.msg(data.message);window.location.href = "/Item/ItemList";},error: function (message) {layer.msg(message);//错误返回信息//console.log(message);}});}}).on('loadSuccess', function(e, data){//这个事件需要在数据加载之前注册才能触发//console.log('loadSuccess!');//console.log(data);//console.log(mmg.rowsLength());}).on('rowInserted', function(e, item, index){//console.log('rowInserted!');//console.log(item);//console.log(index);//console.log(mmg.rowsLength());}).on('rowUpdated', function(e, oldItem, newItem, index){//console.log('rowUpdated!');//console.log(oldItem);//console.log(newItem);//console.log(index);}).on('rowRemoved', function(e, item, index){//console.log('rowRemoved!');//console.log(item);//console.log(index);//console.log(mmg.rowsLength());}).load();});</script></body></html>

项目源码

【博主推荐】C#MVC后台管理系统(附源码)

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}