【博主推荐】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
清空scripts里面js
清空系统自带的view
清空多余不用的
一个空的MVC应用就创建成功了，下面就为MVC添砖加瓦。
4.添加控制器
Controllers文件夹右键 > 添加控制器 > MVC5控制器-空
5.添加视图
方式1
Views下面Home 右键 > 添加 >视图
方式2
控制器 > 选中Index > 右键 > 添加视图
6.实现登录
6.1 登录示意图
6.2 登录源码
----Controller
public class HomeController : Controller
{
// GET: Home
public 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"];//使用session
UserModel 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");
}
}
}
----实体类UserModel
public 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 '<button class="btn btn-info">查看</button> <button class="btn btn-danger">删除</button>'
return '<button class="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>
项目源码
本文含有隐藏内容，请 开通VIP 后查看