目录
现在，有一个需求，我需要将表格中选中行的数据中的一部分传直接传到控制器中，然后保存到另外一张表中。一开始，我就想到在前台使用ajax构造json数据，然后控制器直接通过list接收。
选中界面中的行，然后点击“批量添加到月结表”，弹出一个对话框，这个对话框的月份列表为当前选择数据行中结账日期所在月份、以及前一个月和后一个月，选择月份后，将选择的月份，以及界面选中的行中的数据一起传到控制器中去。我发现网上很少有这种在前台构造复杂json，传递给控制器的，更多的是从控制器调用Json方法把后台数据转换为json格式，然后展示到前台，所以我就把实现方式记录下来，希望能够给大家提供参考。
控制器Reconciliation代码：
////// 添加月结表 /// /// /// ///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(); } /// /// 添加月结表 /// /// /// 是否忽视异常 ///[HttpPost] public JsonResult AddMonthPayOff(List 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) @using (Html.BeginForm("AddMonthPayOff", "Reconciliation", FormMethod.Post, new { @clase = "form-inline", @role = "form", name = "from1" })) { | @ViewBag.PreMonthStr |
| @ViewBag.MonthStr |
| @ViewBag.NextMonthStr |
| @**@ |
主界面视图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 = "提货单对账";} @using (Html.BeginForm("List", null, FormMethod.Get, new { @clase = "form-inline", @role = "form" })) { @* @ViewBag.Title *@ - 客户名：@Html.TextBox("CusName","",new { @class = "trade-time wid153" })
- 提单号：@Html.TextBox("LoadBillNum","", new { @class = "trade-time" })
- 清关完成时间：@Html.TextBox("CompletionSTime", "", new { @class = "trade-time wid153", @onClick = "WdatePicker({maxDate:'#F{$dp.$D(\\'CompletionETime\\')}'})" })
- — @Html.TextBox("CompletionETime", "", new { @class = "trade-time wid153", @onClick = "WdatePicker({minDate:'#F{$dp.$D(\\'CompletionSTime\\')}'})" })
} 序号 客户简称 提单号 提单包裹重量(KG) 提单包裹数量 清关完成时间 成本
收入 毛利 对账单状态 操作 邮政地勤费 邮政仓租 邮政邮资 邮件处理费 邮政其他费用 邮政总成本 邮政结算状态 客户提货费 客户仓租 客户运费 客户操作费 其他费用 总收入 结算状态 总毛利 毛利率 @* 总计 *@
MonthPayOffModel模型类：
using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Site.Models{ public class MonthPayOffModel { /// /// 对账时间 /// public DateTime ReconcileTime { get; set; } /// /// 预计总成本 /// public decimal PreTotalCostFee{ get;set;} /// /// 真实总成本 /// public decimal TotalCostFee{ get;set;} /// /// 预计总收入 /// public decimal PreInComeFee{ get;set;} /// /// 真实总收入 /// public decimal InComeFee { get; set; } /// /// 总毛利 /// public decimal TotalMargin { get; set; } /// /// 提单号 /// 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字符串里面的属性和值都加引号。