邹琼俊
邹琼俊

ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

目录

  1. ASP.NET MVC搭建项目后台UI框架—1、后台主框架
  2. ASP.NET MVC搭建项目后台UI框架—2、菜单特效
  3. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开
  4. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
  5. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互
  6. ASP.NET MVC搭建项目后台UI框架—6、客户管理（添加、修改、查询、分页）
  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表
  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
  9. ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中_第1张图片

ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中_第2张图片ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中_第3张图片

现在，有一个需求，我需要将表格中选中行的数据中的一部分传直接传到控制器中，然后保存到另外一张表中。一开始，我就想到在前台使用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)
<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.PreMonthStrtd>tr>
                <tr><td><input type="radio" name="monthPayOff" value="@ViewBag.YearMonth"/>  @ViewBag.MonthStrtd>tr>
                <tr><td><input type="radio" name="monthPayOff" value="@ViewBag.NextYearMonth"/>  @ViewBag.NextMonthStrtd>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 "   " + 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 = "" + css + ">" + data + "
"; 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 = "" + css + ">" + data + "
"; 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 = ""+css+">"+data+"
"; return re; } },//总毛利 { "data": "GrossProfitRate", orderable: false, "render": function (data, type, row, meta) { var css = ""; if (data < 0) { css = " class='numberColor'"; } var re = "" + css + ">" + data + "%
"; return re; } },//毛利率 { "data": "Status",width: "120", orderable: false },//对账单状态 { "data": "LoadBillNum", orderable: false, width: "160", "render": function (data, type, row, meta) { var re = "
明细  "; if (row.IsAddMonthPayOff == 0) { var reconcileDate = row.ReconcileDate == '' ? row.CompletionTime : row.ReconcileDate; re += "添加到月结表"; } return re+"
"; } }//操作 ], paging: true,//分页 ordering: true,//是否启用排序 searching: true,//搜索 language: { "sProcessing": "处理中...", lengthMenu: '每页显示：