目录
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
- ASP.NET MVC搭建项目后台UI框架—5、演示Controller和View的交互
这一节，我将用一个Demo来演示在此UI框架中，控制器和视图的交互。以渠道管理为例。效果图如下：
这里我使用了基于jquery的模态窗体组件lhgdialog和表格组件dataTables。dataTables更多资料请参考：http://dt.thxopen.com/example/
lhgdialog更多资料请参考：http://www.lhgdialog.com/api/
Action
1、在我们的MVC项目中的Models文件夹中，添加一个model类ChannelInfo.cs，因为项目中的ORM框架使用的是Nhibernate，所以属性前面加了virtual
public class ChannelInfo
{
public virtual int ID { get; set; }
public virtual string ChannelStyle { get; set; }
public virtual string ChannelCode { get; set; }
public virtual string CnName { get; set; }
public virtual string EnName { get; set; }
public virtual string Status { get; set; }
}
2、添加控制器ChannelController，这里为了演示，我使用的假数据
public class ChannelController : Controller
{
//
// GET: /Channel/
public ActionResult Index()
{
return View();
}
//添加渠道
public ActionResult AddChannel()
{
return View();
}
[HttpPost]
public JsonResult List(ChannelInfo filter)
{
List<ChannelInfo> list = new List<ChannelInfo>();
for (int i = 0; i < 1100; i++)
{
list.Add(new ChannelInfo
{
ID = 1,
ChannelCode = "E_Express"+i,
ChannelStyle = "香港E特快"+i,
CnName = "香港E特快"+i,
EnName = "HK E-Express"+i,
Status = "1"
});
}
if (!string.IsNullOrEmpty(filter.ChannelCode))
{
list = list.Where(x => x.ChannelCode == filter.ChannelCode.Trim()).ToList();
}
if (!string.IsNullOrEmpty(filter.CnName))
{
list = list.Where(x => x.CnName == filter.CnName.Trim()).ToList();
}
if (!string.IsNullOrEmpty(filter.EnName))
{
list = list.Where(x => x.EnName == filter.EnName.Trim()).ToList();
}
//构造成Json的格式传递
var result = new { iTotalRecords = 1100, iTotalDisplayRecords = 10, data = list };
return Json(result, JsonRequestBehavior.AllowGet);
}
}
3、修改_Layout.cshtml，因为后面的View会用到
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>财务管理 @ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@* @Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")*@
<link href="~/Content/sharestyle.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Lib/lhgdialog/lhgdialog.min.js?self=true&skin=iblue"></script>
</head>
<body>
@* @RenderSection("featured", required: false)*@
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
@*<footer>
<div class="copyright"> ©2015 </div>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - 我的 ASP.NET MVC 应用程序</p>
</div>
</div>
</footer>*@
@* @Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)*@
</body>
</html>
4、添加渠道管理的视图，代码很简单，我都添加了详细的注释，相信大家都看得懂。这里主要只添加了列表展示，和查询过滤，分页排序。datables是支持服务器端排序的，但是我这里只写了客户端排序，就是先一次性把所有的数据查出来，然后再进行排序。
在数据量小的情况下，体验还是非常不错的，也简单。同时datables是支持缓存的，具体使用大家可以参考我上面发的网址，我这里只做个简单的引荐。
@{
ViewBag.Title = "Index";
}
<style type="text/css">
html, body
{
overflow:hidden;
}
tbody
{
height:50px;
}
table
{
overflow-y:auto;
overflow-x:hidden;
}
</style>
<link href="~/Lib/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" />
<script src="~/Lib/DataTables-1.10.6/media/js/jquery.dataTables.min.js"></script>
<script src="~/Content/DataTablesExt.js"></script>
<script type="text/javascript">
//查询 刷新
function reloadList() {
var tables = $(‘#table_local‘).dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
tables.ajax.reload();
}
function deleteRecord(id) {
$.dialog.confirm("确定要删除吗？", function () { $.dialog.alert("删除成功！"); }, null)
}
function successFun() {
$.dialog.alert("渠道添加成功！");
}
//弹出框
var dg;
function showPublishWin() {
dg = new $.dialog({
id: "AddChannel",
title: "添加渠道",
content: "url:/Channel/AddChannel",
width: 424,
height: 320,
max: false,
min: false,
lock: true,
close: true,
cancel: true, //X按钮是否显示，如果设置了回调函数，一定会显示
//cancel: controlAllBtn,
ok: successFun //点击确定执行的回调函数
});
dg.show();
}
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 27) { // 按 Esc
//要做的事情
}
if (e && e.keyCode == 13) { // enter 键
//要做的事情
reloadList();
}
};
</script>
<script type="text/javascript">
$(function () {
var h = $(document).height() - 258;
$("#table_local").dataTable({
//"iDisplayLength": 10,//每页显示10条数据
//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
//"aLengthMenu": [[10, 15, 20, 25, 50, -1], [10, 15, 20, 25, 50, "All"]],
bProcessing: true,
//"dom": ‘i,p‘,//l - Length changing 选择每页显示行数下拉框的控件 f - Filtering input 搜索过滤控件t - The Tabletools 导出excel，csv的按钮
//i - Information 显示汇总信息（从 1 到 100 /共 1,288 条数据） p - Pagination 分页控件 r - pRocessing 显示加载时的进度条 C - copy 显示复制，excel的控件
//ajax: "/SendGoods/List",
"scrollY": h,
"scrollCollapse": "true",
"dom": ‘tr<"bottom"lip><"clear">‘,
"bServerSide": false, //指定从服务器端获取数据
sServerMethod: "POST",
sAjaxSource: "@Url.Action("List", "Channel")",
"fnServerParams": function (aoData) { //查询条件
aoData.push(
{ "name": "ChannelCode", "value": $("#ChannelCode").val() },
{ "name": "CnName", "value": $("#CnName").val() },
{ "name": "EnName", "value": $("#EnName").val() }
);
},
columns: [
{
title: "1",
"visible": false,
"data": "ID", "sClass": "center", //样式
orderable: false, //该列不排序
"render": function (data, type, row) { //列渲染
return "<label class=‘position-relative‘><input id=‘cbx" + data + "‘ type=‘checkbox‘ onclick=‘controlSelectAll(" + data + ")‘ class=‘cbx‘ value=‘" + data + "‘/>";
}
},
{ "data": "ChannelCode", title: "渠道代码" },
{ "data": "ChannelStyle", title: "渠道类别" },
{ "data": "CnName", title: "中文名" },
{ "data": "EnName", title: "英文名" },
{
"data": "Status", title: "是否启用", orderable: false, "render": function (data, type, row, meta) { //自定义列
if (data == "1") {
return "是";
}
else {
return "否";
}
}
}
, {
"data": "ID", orderable: false, title: "操作", "render": function (data, type, row, meta) { //自定义列
return "<a style=‘visibility:visible‘ onclick=‘deleteRecord(" + data + ")‘>删除</a>";
}
}
],
paging: true,//分页
ordering: true,//是否启用排序
searching: false,//搜索
language: {
lengthMenu: ‘每页显示：<select class="form-control input-xsmall">‘ + ‘<option value="5">5</option>‘ + ‘<option value="10">10</option>‘ + ‘<option value="15">15</option>‘
+ ‘<option value="20">20</option>‘ + ‘<option value="25">25</option>‘ + ‘<option value="30">30</option>‘ + ‘<option value="35">35</option>‘ + ‘<option value="40">40</option>‘,//左上角的分页大小显示。
search: ‘<span class="label label-success">搜索：</span>‘,//右上角的搜索文本，可以写html标签
paginate: {//分页的样式内容。
previous: "上一页",
next: "下一页",
first: "",
last: ""
},
zeroRecords: "暂无记录",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共 <span class=‘pagesStyle‘>(_PAGES_) </span>页，显示 _START_ -- _END_ ，共<span class=‘recordsStyle‘> (_TOTAL_)</span> 条",//左下角的信息显示，大写的词为关键字。初始_MAX_ 条
infoEmpty: "0条记录",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示，
},
pagingType: "full_numbers"//分页样式的类型
});
$("#table_local_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。
});
</script>
<div class="areabx clear" style="margin-bottom:0px;padding-bottom:0px;">
@using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" }))
{
<div class="areabx_header">渠道管理</div>
<ul class="formod mgt10">
<li><span>渠道代码：</span>@Html.TextBox("ChannelCode","", new {@class="trade-time wid153" })</li>
<li><span>渠道中文名：</span>@Html.TextBox("CnName", "",new {@class="trade-time" })</li>
<li><span>渠道英文名：</span>@Html.TextBox("EnName", "",new {@class="trade-time" })</li>
</ul>
<div class="botbtbx pdb0">
<input type="button" value="添加渠道" class="btn btn-primary" onclick="showPublishWin()"/>
<input type="button" value="查询" onclick="reloadList();" class="btn btn-primary">
</div>
}
<div class="tob_box mgt15">
<table id="table_local" class="display" cellspacing="0" cellpadding="0" border="0" style="width:100%">
</table>
</div>
</div>
5、添加视图AddChannel，这里没写完。本来还打算把修改也添加进去的，有兴趣的朋友可以自己去完成
@{
ViewBag.Title = "添加渠道";
}
<style type="text/css">
body {
overflow:hidden;
}
</style>
<h2>添加渠道</h2>
<div>开发中...</div>
由于要保持和美工给的样式风格一直，我修改了dataTables的样式源码
6、按F5运行
框架中用到的js和css、Img：CssJsImg源码
系列没写完，不写了，我就先把这个半成品的源码贴出来吧，免得小编又说我没有足够的知识分享了。
开发环境：VS2012
半成品UI框架源码下载：http://pan.baidu.com/s/1ntIGLVN
如果源码对大家很有帮助，希望大家给个推荐，当是支持下我无偿的技术分享，如果有更好的建议或不同的意见，可以提出来，大家一起探讨。谢谢！
时间： 2024-10-10 08:23:52