ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
2015-05-18 12:28
881 查看
目录
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、Demo演示Controller和View的交互
ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)
ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
ASP.NET MVC搭建项目后天UI框架—10、导出excel(数据量大,非常耗时的,异步导出)
这一节,我将用一个Demo来演示在此UI框架中,控制器和视图的交互。以渠道管理为例。效果图如下:
按回车执行查询,不是F5,笔误。
@{ ViewBag.Title = "Index"; } <style type="text/css"> html, body { overflow:hidden; } #table_local 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>
View Code
5、添加视图AddChannel,这里没写完。本来还打算把修改也添加进去的,有兴趣的朋友可以自己去完成
@{ ViewBag.Title = "添加渠道"; } <style type="text/css"> body { overflow:hidden; } </style> <h2>添加渠道</h2> <div>开发中...</div>
由于要保持和美工给的样式风格一直,我修改了dataTables的样式源码
6、按F5运行
框架中用到的js和css、Img:CssJsImg源码
系列本来没写完,不打算写了,我就先把这个半成品的源码贴出来吧,免得小编又说我没有足够的知识分享了,虽然是半成品,但是基本的框框都有了。
插曲:本篇文章之前都没法在博客园首页显示的,小编给的回复是:没有足够的知识分享。我心拔凉拔凉的。虽然字码得不多,但是代码中倾注了我的思想和经验、时间和心血。精简、通俗、易懂一直是我追求的。
开发环境:VS2012
有朋友评论说源码里少了dll,那两个dll都是没用到的,我现在已经将没用的dll引用删除,所以源码下载地址更新了,给大家带来的不便请谅解!
半成品UI框架源码下载:http://pan.baidu.com/s/1c055sw4
如果源码对大家很有帮助,希望大家给个推荐,当是支持下我无偿的技术分享,如果有更好的建议或不同的意见,可以提出来,大家一起探讨。谢谢!
相关文章推荐
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
- ASP.NET MVC搭建项目后台UI框架—9、服务器端排序
- ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
- 搭建你的Spring.Net+Nhibernate+Asp.Net Mvc 框架 (二)创建你的项目(转)
- 【搭建Spring.net+EF+Asp.net MVC框架】---(1) 创建项目
- ASP.NET MVC中从后台控制器(Controller)传递数据到前台页面视图(View)方式
- Asp.net Mvc Framework 九 (View与Controller交互)
- 主攻ASP.NET.4.5.1 MVC5.0之重生:空地搭建一个包含 Ninject框架 项目
- ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式
- ASP.NET MVC4 WEB API入门 第二篇:ASP.NET MVC入门基础(1)——项目框架搭建
- C# Asp.Net MVC 3 项目实现控制器(controller)与页面(view)分项目管理
- asp.net MVC 项目 框架搭建
- C# Asp.Net MVC 3 项目实现控制器(controller)与页面(view)分项目管理
- 软件也需靠脸吃饭,带您做张明星脸 --ASP.NET MVC+Jquery开发框架形成之旅(后台经典框架 DEMO 下载)
- ASP.NET MVC企业级项目框架搭建实战
- ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式