目錄
- 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、服務器端排序
現在，有一個需求，我需要將表格中選中行的數據中的一部分傳直接傳到控制器中，然后保存到另外一張表中。一開始，我就想到在前台使用ajax構造json數據，然后控制器直接通過list接收。
選中界面中的行，然后點擊“批量添加到月結表”，彈出一個對話框，這個對話框的月份列表為當前選擇數據行中結賬日期所在月份、以及前一個月和后一個月，選擇月份后，將選擇的月份，以及界面選中的行中的數據一起傳到控制器中去。我發現網上很少有這種在前台構造復雜json，傳遞給控制器的，更多的是從控制器調用Json方法把后台數據轉換為json格式，然后展示到前台，所以我就把實現方式記錄下來，希望能夠給大家提供參考。
控制器Reconciliation代碼：
/// <summary> /// 添加月結表 /// </summary> /// <param name="no"></param> /// <param name="date"></param> /// <returns></returns> public ActionResult AddMonthPayOff(DateTime payOffDate) { ViewBag.PreMonthStr = payOffDate.AddMonths(-1).Month + "月"; ViewBag.MonthStr = payOffDate.Month + "月"; ViewBag.NextMonthStr = payOffDate.AddMonths(1).Month + "月"; ViewBag.PreYearMonth = payOffDate.AddMonths(-1); ViewBag.YearMonth = payOffDate; ViewBag.NextYearMonth = payOffDate.AddMonths(1); return View(); } /// <summary> /// 添加月結表 /// </summary> /// <param name="data"></param> /// <param name="isNeglect">是否忽視異常</param> /// <returns></returns> [HttpPost] public JsonResult AddMonthPayOff(List<MonthPayOffModel> data, bool isNeglect, DateTime payOffMonth) { string message = string.Empty; var dealdata = data.Select(a => new MonthPayOffData() { MonthPayTime = payOffMonth, ReconcileTime = a.ReconcileTime, PreTotalCostFee = a.PreTotalCostFee, TotalCostFee = a.TotalCostFee, PreInComeFee = a.PreInComeFee, InComeFee = a.InComeFee, TotalMargin = a.TotalMargin, LoadBillBy = LoadBillInCome.GetByLoadBillNum(a.LoadBillNum) }).ToList(); if (MonthPayOff.AddMonthPay(isNeglect, dealdata, payOffMonth, out message)) { return Json(new { IsSuccess = true, Message = string.Format("共計:{0}個提單添加到月結", data.Count) }); } else { return Json(new { IsSuccess = false, Message = message, IsPoint = message.Substring(0, 2) == "提醒" ? true : false }); } }
視圖AddMonthPayOff：
@{ ViewBag.Title = "AddMonthPayOff"; Layout = null; } @Html.Raw(ViewBag.Msg) <script src="~/Scripts/jquery-1.8.3.min.js"></script> <link href="~/Content/main.css" rel="stylesheet" /> <style type="text/css"> table tr { height:24px; } </style> <script type="text/javascript"> function selectpayMonth() { var list = $('input:radio[name="monthPayOff"]:checked').val(); if (list == null) { return false; } else { frameElement.api.opener.postSelectData(list,false); } } </script> @using (Html.BeginForm("AddMonthPayOff", "Reconciliation", FormMethod.Post, new { @clase = "form-inline", @role = "form", name = "from1" })) { <table style="text-align:center;width:190px;margin-top:10px;"> <tr><td style="width:190px;"><input type="radio" name="monthPayOff" value="@ViewBag.PreYearMonth"/> @ViewBag.PreMonthStr</td></tr> <tr><td><input type="radio" name="monthPayOff" value="@ViewBag.YearMonth"/> @ViewBag.MonthStr</td></tr> <tr><td><input type="radio" name="monthPayOff" value="@ViewBag.NextYearMonth"/> @ViewBag.NextMonthStr</td></tr> <tr><td><input type="button" value="確定" onclick="selectpayMonth()" class="popbtn1 mg" style="text-align:center;margin:10px 0 10px 10px !important;"> @*<input type="button" value="關閉" class="popbtn3 mg2" onclick="frameElement.api.opener.addDG.close();" />*@</td> </tr> </table> }
主界面視圖LoadBill：這里主要記錄選中的行數據，然后將其構造成json格式，通過ajax傳遞給控制器，注意這里構造的json數據，和控制器中對應的接收參數是一致的。
//添加到月結表 提單號，結算月份、包裹數、總成本、總收入、總毛利
function AddMonthlyBalance(id, date, ExpressCount, CostTotalFee, InComeTotalFee, GrossProfitRate) {
if (date == '') {
$.dialog.alert("提貨單“"+id+"”數據未導入成本數據,且未清關");
return false;
}
var d = { isNeglect: false, data: [{"LoadBillNum": id, "ReconcileTime": date, "PreTotalCostFee": CostTotalFee,"TotalCostFee": CostTotalFee,"PreInComeFee":
InComeTotalFee,"InComeFee": InComeTotalFee,"TotalMargin": GrossProfitRate }] };
selectData = JSON.stringify(d);
addDG = $.dialog({
id: 'AddMonthPayList',
title: '添加到月結表',
width: 200,
height: 150,
content: "url:/Reconciliation/AddMonthPayOff?payOffDate="+date,
close: true,
btnBar: false,
max: false,
min: false,
lock: true
})
}
視圖源碼：
@{ ViewBag.Title = "提貨單對賬"; } <link href="~/libs/DataTables-1.10.6/media/css/jquery.dataTablesNew.css" rel="stylesheet" /> <script src="~/libs/DataTables-1.10.6/media/js/jquery.dataTables.min.js"></script> <script src="~/Scripts/DataTablesExt.js"></script> <script src="~/libs/My97DatePicker/WdatePicker.js"></script> <script type="text/javascript"> var selectData; //選擇行數據 $(function () { var table = $("#table_local").dataTable({ bProcessing: true, "scrollY": table_h, "scrollX": $(document).width(), "scrollCollapse": "true", "dom": 'tr<"bottom"lip><"clear">', "bServerSide": true, //指定從服務器端獲取數據 "iDisplayLength": 10, sServerMethod: "POST", showRowNumber:true, sAjaxSource: "@Url.Action("LoadBillList", "Reconciliation")", //"initComplete": function (data, args) { // //getTotal(args); // var arr = new Array(7,8,9,10,11,14,15,16,17,18); //頁面一加載隱藏的列 // controlColumnShow(table, arr,false); //}, "fnServerParams": function (aoData) { //查詢條件 aoData.push( { "name": "CusName", "value": $("#CusName").val() }, { "name": "LoadBillNum", "value": $("#LoadBillNum").val() }, { "name": "CompletionSTime", "value": $("#CompletionSTime").val() }, { "name": "CompletionETime ", "value": $("#CompletionETime").val() } ); }, //跟數組下標一樣，第一列從0開始，這里表格初始化時，第四列默認降序 "order": [[ 2, "asc" ]], columns: [ { "data": "ID", orderable: false,width:"60", "render": function (data, type, row, meta) { return " <input id='cbx" + data + "' type='checkbox' onclick='controlSelectAll(" + data + ")' class='cbx' value='" + data + "'/> " + row.Index; } }, { "data": "CusName" }, //客戶名稱 { "data": "LoadBillNum" },//提單號 { "data": "FeeWeight", orderable: false }, //提單包裹重量 { "data": "ExpressCount", orderable: false }, //提單包裹數量 { "data": "CompletionTime" }, //清關完成時間 { "data": "GroundHandlingFee", visible: false },//郵政地勤費 { "data": "CostStoreFee", visible: false },//郵政倉租 { "data": "CostExpressFee", orderable: false, visible: false, "render": function (data, type, row, meta) { var css = ""; if (row.IsReal==0) { css = " class='preColor'"; } var re = "<div" + css + ">" + data + "</div>"; return re; } },//郵政郵資 { "data": "CostOperateFee", orderable: false, visible: false, "render": function (data, type, row, meta) { var css = ""; if (row.IsReal == 0) { css = " class='preColor'"; } var re = "<div" + css + ">" + data + "</div>"; return re; } },//郵件處理費 { "data": "CostOtherFee", visible: false },//郵政其他費用 { "data": "CostTotalFee" },//郵政總成本 { "data": "CostStatus" },//郵政結算狀態 { "data": "InComeLoadFee", visible: false },//客戶提貨費 { "data": "InComeStoreFee", visible: false },//客戶倉租 { "data": "InComeExpressFee", visible: false },//客戶運費 { "data": "InComeOperateFee", visible: false },//客戶操作費 { "data": "InComeOtherFee", visible: false },//其他費用 { "data": "InComeTotalFee" },//總收入 { "data": "InComeStatus",orderable: false ,width:"90"},//結算狀態 { "data": "TotalGrossProfit", orderable: false, "render": function (data, type, row, meta) { var css = ""; if (data < 0) { css=" class='numberColor'"; } var re = "<div"+css+">"+data+"</div>"; return re; } },//總毛利 { "data": "GrossProfitRate", orderable: false, "render": function (data, type, row, meta) { var css = ""; if (data < 0) { css = " class='numberColor'"; } var re = "<div" + css + ">" + data + "%</div>"; return re; } },//毛利率 { "data": "Status",width: "120", orderable: false },//對賬單狀態 { "data": "LoadBillNum", orderable: false, width: "160", "render": function (data, type, row, meta) { var re = "<div style='text-align:center'><a style='visibility:visible' onclick='openDetail(" + data + ")'>明細</a> "; if (row.IsAddMonthPayOff == 0) { var reconcileDate = row.ReconcileDate == '' ? row.CompletionTime : row.ReconcileDate; re += "<a style='visibility:visible' name='addMonthPayOff' onclick='AddMonthlyBalance(\"" + data + "\",\"" + reconcileDate + "\"," + row.ExpressCount + "," + row.CostTotalFee + "," + row.InComeTotalFee + "," + row.TotalGrossProfit + ")'>添加到月結表</a>"; } return re+"</div>"; } }//操作 ], paging: true,//分頁 ordering: true,//是否啟用排序 searching: true,//搜索 language: { "sProcessing": "處理中...", lengthMenu: '每頁顯示：<select class="form-control input-xsmall">' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="50">50</option>' + '<option value="100">100</option>' + '<option value="150">150</option>' + '<option value="200">200</option>'
+ '<option value="250">250</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"//分頁樣式的類型 }); //new $.fn.dataTable.FixedColumns(table); //設置選中行樣式 $('#table_local tbody').on('click', 'tr', function () { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); //展開折疊列 $("#imgIncome").click(function () { var url = $("#imgIncome").attr("src"); var arr = new Array(8, 9, 10, 6,7); if (url == "/images/icon_9.png") { controlColumnShow(table, arr, true); $("#imgIncome").attr("src", "/images/icon_10.png"); } else { controlColumnShow(table, arr, false); $("#imgIncome").attr("src", "/images/icon_9.png"); } }); //收入展開折疊 $("#imgCost").click(function () { var url = $("#imgCost").attr("src"); var arr = new Array(14,15,16, 17, 13); if (url == "/images/icon_9.png") { controlColumnShow(table, arr, true); $("#imgCost").attr("src", "/images/icon_10.png"); } else { controlColumnShow(table, arr, false); $("#imgCost").attr("src", "/images/icon_9.png"); } }); //獲取批量選擇行 $("#btnAddMonthPayOffList").click(function () { var nTrs = table.fnGetNodes();//fnGetNodes獲取表格所有行，nTrs[i]表示第i行tr對象 var row; selectData = "{'data': ["; var selectCounts = 0; var date; for (var i = 0; i < nTrs.length; i++) { if ($(nTrs[i])[0].cells[0].children[0].checked) { row = table.fnGetData(nTrs[i]);//fnGetData獲取一行的數據 selectCounts++; var tempdate = row.ReconcileDate == '' ? row.CompletionTime : row.ReconcileDate; if (tempdate == '') { $.dialog.alert("提貨單“" + row.LoadBillNum + "”數據未導入成本數據,且未清關"); return false; } //當時間不統一時,獲取最大時間 if (date == undefined || new Date(tempdate.replace("-", "/").replace("-", "/")) > new Date(date.replace("-", "/").replace("-", "/"))) { date = tempdate; } selectData += "{'LoadBillNum':'" + row.LoadBillNum + "','ReconcileTime':'" + tempdate + "','PreTotalCostFee':'" + row.CostTotalFee +"','TotalCostFee':'"+row.CostTotalFee+ "','PreInComeFee':'" + row.InComeTotalFee +"','InComeFee':'"+row.InComeTotalFee+ "','TotalMargin':'" + row.TotalGrossProfit + "'},"; } } selectData = selectData.substring(0, selectData.length - 1) selectData += "]}"; if (selectCounts < 1) { $.dialog.alert("請先選擇要添加的數據行！"); return false; } AddMonthlyBalanceList(date); }); }); function reloadList() { var tables = $('#table_local').dataTable().api();//獲取DataTables的Api，詳見 http://www.datatables.net/reference/api/ tables.ajax.reload(function () { //var json = tables.context[0].json; //getTotal(json); }, false); } //統計 function getTotal(json) { if (json) { if (json.TotalWeight) { $("#spnTotalWeight").html(json.TotalWeight); $("#spnTotalWayBillFee").html(json.TotalWayBillFee); $("#spnTotalProcessingFee").html(json.TotalProcessingFee); $("#spnTotalExpressFee").html(json.TotalExpressFee); $("#spnTotalOperateFee").html(json.TotalOperateFee); $("#spnSumWayBillProfit").html(json.SumWayBillProfit); $("#spnSumTotalProfit").html(json.SumTotalProfit); } } } //控制指定定列的隱藏和顯示（table，列索引數組，隱藏or顯示:true,false) function controlColumnShow(table, arr,tag) { for (var i = 0; i < arr.length; i++) { table.fnSetColumnVis(arr[i],tag); } } var addDG; var payOffMonth; //添加到月結表 提單號，結算月份、包裹數、總成本、總收入、總毛利 function AddMonthlyBalance(id, date, ExpressCount, CostTotalFee, InComeTotalFee, GrossProfitRate) { if (date == '') { $.dialog.alert("提貨單“"+id+"”數據未導入成本數據,且未清關"); return false; } var d = { isNeglect: false, data: [{"LoadBillNum": id, "ReconcileTime": date, "PreTotalCostFee": CostTotalFee,"TotalCostFee": CostTotalFee,"PreInComeFee": InComeTotalFee,
"InComeFee": InComeTotalFee,"TotalMargin": GrossProfitRate }] }; selectData = JSON.stringify(d); addDG = $.dialog({ id: 'AddMonthPayList', title: '添加到月結表', width: 200, height: 150, content: "url:/Reconciliation/AddMonthPayOff?payOffDate="+date, close: true, btnBar: false, max: false, min: false, lock: true }) } //批量添加到月結表 function AddMonthlyBalanceList(date) { addDG = $.dialog({ id: 'AddMonthPay', title: '添加到月結表', width: 200, height: 150, content: "url:/Reconciliation/AddMonthPayOff?payOffDate=" + date, close: true, btnBar: false, max: false, min: false, lock: true }) } //隱藏彈出框 function hidePublishWin(msg, result, isStay) { var icon = "success.gif"; if (result == "False") { icon = "error.gif"; } $.dialog({ title: "提示", icon: icon, titleIcon: 'lhgcore.gif', content: msg, lock: true, ok: true }); if (result != "False") { if (addDG) { addDG.close(); } if (isStay == 0) { reloadList(); } else { reloadListNew(); } } } //傳遞選擇的行數據 function postSelectData(payOffMonth, isNeglect) { //JSON.parse //var json = JSON.stringify(selectData); //var json = selectData;//JSON.parse(selectData); selectData = selectData.substring(0, selectData.length - 1) + ",'payOffMonth':'" + payOffMonth + "','isNeglect':"+isNeglect+"}"; $.ajax({ url: '/Reconciliation/AddMonthPayOff', type: 'POST', dataType: 'json', data: selectData, contentType: 'application/json; charset=utf-8', success: function (data) { if (isNeglect==false) { addDG.close(); } if (!data.IsSuccess && data.IsPoint) { $.dialog.confirm(data.Message, function () { postSelectData(payOffMonth, true); }); } else { $.dialog.alert(data.Message); } } }); } </script> <div class="areabx clear"> @using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" })) { <div id="divSearch"> @*<div class="areabx_header">@ViewBag.Title</div>*@ <ul class="formod mgt10"> <li><span>客戶名：</span>@Html.TextBox("CusName","",new { @class = "trade-time wid153" })</li> <li><span>提單號：</span>@Html.TextBox("LoadBillNum","", new { @class = "trade-time" })</li> </ul> <ul class="formod mgt10"> <li><span style="width:120px;">清關完成時間：</span>@Html.TextBox("CompletionSTime", "", new { @class = "trade-time wid153", @onClick = "WdatePicker({maxDate:'#F{$dp.$D(\\'CompletionETime\\')}'})" })</li> <li><span style="text-align:left;width:25px;margin-left:-20px;">—</span> @Html.TextBox("CompletionETime", "", new { @class = "trade-time wid153",
@onClick = "WdatePicker({minDate:'#F{$dp.$D(\\'CompletionSTime\\')}'})" })</li> </ul> <div class="botbtbx pdb0"> <input type="button" value="查詢" id="btnSearch" onclick="reloadList();" class="btn btn-primary" /> <input type="button" id="btnAddMonthPayOffList" value="批量添加到月結表" class="btn btn-primary"/> </div> </div> } <div class="tob_box mgt15"> <table id="table_local" class="display" cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> <thead> <tr> <th rowspan="2"><input type='checkbox' id='chkAllColl' onclick='selectAll()' />序號</th> <th rowspan="2">客戶簡稱</th> <th rowspan="2">提單號</th> <th rowspan="2">提單包裹重量(KG)</th> <th rowspan="2">提單包裹數量</th> <th rowspan="2">清關完成時間</th> <th colspan="7"><span>成本</span><span class="divIncome1"><img id="imgIncome" src="/images/icon_9.png" alt="收起/展開" title="收起/展開"/></span></th> <th colspan="7"><span>收入</span><span class="divIncome1"><img id="imgCost" src="/images/icon_9.png" alt="收起/展開" title="收起/展開"/></span></th> <th colspan="2">毛利</th> <th rowspan="2">對賬單狀態</th> <th rowspan="2">操作</th> </tr> <tr> <th>郵政地勤費</th> <th>郵政倉租</th> <th>郵政郵資</th> <th>郵件處理費</th> <th>郵政其他費用</th> <th>郵政總成本</th> <th>郵政結算狀態</th> <th>客戶提貨費</th> <th>客戶倉租</th> <th>客戶運費</th> <th>客戶操作費</th> <th>其他費用</th> <th>總收入</th> <th>結算狀態</th> <th>總毛利</th> <th>毛利率</th> </tr> </thead> @*<tfoot> <tr> <td>總計</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td><span id="spnTotalWeight"></span></td> <td><span id="spnTotalWayBillFee"></span></td> <td><span id="spnTotalProcessingFee"></span></td> <td></td> <td></td> <td></td> <td><span id="spnTotalExpressFee"></span></td> <td><span id="spnTotalOperateFee"></span></td> <td></td> <td></td> <td></td> <td><span id="spnSumWayBillProfit"></span></td> <td><span id="spnSumTotalProfit"></span></td> <td></td> <td></td> <td></td> </tr> </tfoot>*@ </table> </div> </div>
MonthPayOffModel模型類：
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Site.Models { public class MonthPayOffModel { /// <summary> /// 對賬時間 /// </summary> public DateTime ReconcileTime { get; set; } /// <summary> /// 預計總成本 /// </summary> public decimal PreTotalCostFee{get;set;} /// <summary> /// 真實總成本 /// </summary> public decimal TotalCostFee{get;set;} /// <summary> /// 預計總收入 /// </summary> public decimal PreInComeFee{get;set;} /// <summary> /// 真實總收入 /// </summary> public decimal InComeFee { get; set; } /// <summary> /// 總毛利 /// </summary> public decimal TotalMargin { get; set; } /// <summary> /// 提單號 /// </summary> public string LoadBillNum { get; set; } } }
js控制全選反選
//監聽每一行的復選框,控制全選、反選按鈕 function controlSelectAll(i) { var tblName, cbkAll; //Gridview ID ，全選框ID var tblName = "table_local"; var cbkAll = "chkAllColl"; var id = "#cbx" + i; //點擊復選框選中行 //if ($(id)[0].checked == true) { // $(id).parent().parent().addClass('selected'); // $(id).parent().parent().siblings().removeClass('selected'); //} else { // $(id).parent().parent().siblings().removeClass('selected'); // $(id).parent().parent().removeClass('selected'); //} var chks = getCheckbox(tblName); var count = 0; for (var i = 0; i < chks.length; i++) { if (chks[i].checked == true) { count++; } } if (count < chks.length) { document.getElementById(cbkAll).checked = false; } else { document.getElementById(cbkAll).checked = true; } } //全選反選 function selectAll() { if ($("#chkAllColl").attr("checked")) {//如果全選的checkbox為選中狀態時 $("#table_local input").attr("checked", "checked");//其他的checkbox全部勾選 //$("#table_local tbody tr").addClass('selected'); } else {//如果全選的checkbox為選非中狀態時 $("#table_local input").attr('checked', false);//其他的checkbox全部取消勾選 //$("#table_local tbody tr").removeClass('selected'); } }
代碼很多，不要被嚇到了，其實也很簡單，難點在在於如何構造json，然后讓控制器自動接收並自動解析成List<Model>形式。這里用到了js的JSON.stringify(d)方法，注意json字符串里面的屬性和值都加引號。