ASP.NET MVC搭建專案後臺UI框架—8、將View中選擇的資料行中的部分資料傳入到Controller中
阿新 • • 發佈：2019-01-17
目錄
現在，有一個需求，我需要將表格中選中行的資料中的一部分傳直接傳到控制器中，然後儲存到另外一張表中。一開始，我就想到在前臺使用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; } },//