如何在 asp.net mvc razor 中使用 jquery 将 html 表数据传递给控制器？

问题描述 投票：0回答：2

标记：

<div class="form-group">
<table class="table table-bordered" id="tblSavingColl" style="width: 97%; margin-left:1.5%;">
                            <thead>
                                <tr>
                                    <th>Client Code</th>
                                    <th>Name</th>
                                    <th>Bal</th>
                                    <th>Due</th>
                                    <th>Received <br/>G S</th>
                                    <th>Adj Y/N</th>
                                    <th><input type="checkbox" id="selectall" /> All</th>
                                    <th>GS Adj Amt</th>
                                    <th>Bal</th>
                                    <th>Due</th>
                                    <th>Received SS</th>
                                    <th>Adj Y/N</th>
                                    <th><input type="checkbox" id="selectAll2" /> All</th>
                                    <th>SS Adj Amt</th>
                                    <th>Bal</th>
                                    <th>Deposit</th>
                                    <th>Withdraw</th>
                                    <th>Rcvd</th>
                                    <th>Prst</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
</div>
<div class="form-group">
  <input type="button" class="button" id="btnSaveSaving" value="Save Saving Details" />
</div>

加载表格行的 Javascript：

<script type="text/javascript">
  $(document).ready(function(){
   var savAcList = []; // to store ac infos

   $.ajax({
        type: 'GET',
        url: '@Url.Action("GetSavingCollSheet", "CollectionSheetTranscation")',
        dataType: 'json',
        data: { adDate: $('#adDate').val(), centerCode: $('#centerCode').val(), collnSheetNo: $('#collnSheetNo').val() },
        success: function (data) {
            $.each(data, function (i, dets) {
                var $row = $('<tr>' +
                    '<td>' + dets.clientNo + '</td>' +
                    '<td>' + dets.clientName + '</td>' +
                    '<td>' + dets.MSBal + '</td>' +
                    '<td>' + dets.MSDue + '</td>' +
                    '<td><input type="text" value = "' + dets.MSRec + '" class="chkBox" /></td>' +
                    '<td class="GSCol">' + msadjCheckBox + '</td>' +
                    '<td>' + msadjCode + '</td>' +
                    '<td>' + msadjAmount + '</td>' +
                    '<td>' + dets.PSBal + '</td>' +
                    '<td>' + dets.PSRec + '</td>' +
                    '<td><input type="text" value = "' + dets.PSRec + '" class="chkBox" /></td>' +
                    '<td class="SSCol">' + psadjCheckBox + '</td>' +
                    '<td>' + psadjCode + '</td>' +
                    '<td>' + psadjAmount + '</td>' +
                    '<td>' + dets.OSBal + '</td>' +
                    '<td>' + dets.OSDep + '</td>' +
                    '<td>' + dets.OSWithdraw + '</td>' +
                    '<td>' + recFlag + '</td>' +
                    '<td>' + prFlag + '</td>'
                    );
                $('#tblSavingColl > tbody').append($row);

                savAcList.push(dets.SavAcCode);

                totMSDue += Number(dets.MSRec);
                totPSDue += Number(dets.PSRec);
                totOSDep += Number(dets.OSDep);
                totOSWith += Number(dets.OSWithdraw);
                totUFDue += Number(dets.UFRec);
                psTransfer += Number(dets.PSAdjAmt);
                msTransfer += Number(dets.MSAdjAmt);
                if (dets.PresentFlag == "Y")
                    totPresent++;
            });
            var totalCollectionAmt = (totPSDue + totMSDue + totOSDep + totUFDue + 0 - (totOSWith + psTransfer + msTransfer));
            $('#txttotalpensav').val(totPSDue);
            $('#txttotaloptsav').val(totOSDep);
            $('#txttotalwithdraw').val(totOSWith);
            $('#txtpresent').val(totPresent);
            $('#txttotalmonthsav').val(totMSDue);
            $('#txttotunitfund').val(totUFDue);
            $('#txttotalcolln').val(totalCollectionAmt);
            $('#txtwelfarefundamt').val("0");
            $('#txttotpentrans').val(psTransfer);
            $('#txttotmontrans').val(msTransfer);
            $('#txttotaltransfer').val(Number(psTransfer) + Number(msTransfer));

            //alert(savAcList[0]);
        },
        error: function () {
            alert("Error");
        }
    })
  });
</script>

问题一 现在加载表格后，我们在第 6 列和第 12 列中有复选框。我需要将复选框事件处理为

  1. 选中第 6 列中的复选框时，我必须在第 7 列的下拉列表中加载一个值以及第 5 列到第 8 列的值。
  2. 类似地，当第 12 列的复选框被选中时，我必须在第 13 列的下拉列表中加载一个值，以及第 11 列到第 12 列的值。

对于要在下拉列表中加载的值，我之前在 jquery 中创建了一个名为“savAcList”的数组，并在使用数据加载表时获取了该值。

我找不到执行上述操作的复选框列。我所做的如下所示，但下面的 javascript 做了一些错误步骤，比如我需要选中第 6 列中的第一个复选框，然后只选中第 12 列复选框。我取消选中该复选框时，如果未选中第 12 列复选框，它将清除第 6 列的值，反之亦然。

我做的javascript是：

 var meroIndex = 0; var meroRow = 999;

$('#tblSavingColl').on('click', 'tr', function (e) {

    //var myIndex = $('#tblSavingColl tr input[type="checkbox"]:checked').parent().index();   // get the index of the checkbox i.e. colIndex

    var myIndex = $('#tblSavingColl tr input[type="checkbox"]').parent().index();           // get the index of the checkbox i.e. colIndex
    var myRow = $(this).index();                                                            // get the rowIndex

    if (meroIndex == myIndex && myRow == meroRow)
        myIndex = 12;

    if (meroIndex == myIndex && myRow != meroRow)
        myIndex = myIndex;

    //alert("My Index " + myIndex + "   MeroIndex = " + meroIndex);

    meroIndex = myIndex;
    meroRow = myRow;

    var myTIndex = myIndex + 2;
    var mySelIndex = myIndex + 1;

    var ReceivedGS = $(this).find('td:nth-child(' + (Number(myIndex) - 1) + ') input').val();
    var myAcCode = savAcList[Number(myRow)];

    if ($(e.target).is('input[type=checkbox]')) {

        var option = document.createElement("option");            // create a new element option [this here is created for a new option to be appended in the dropdownlist]
        option.value = myAcCode;                                  // associate the option element with value attribute
        option.text = myAcCode;                                   // associate the option element with text attribute

        if ($(e.target).is(':checked')) // if the checkbox is checked
        {

            $(this).find('td:nth-child(' + myTIndex + ') input').val(ReceivedGS);                      // sets the textbox to the value in "ReceivedGS" variable
            $(this).find('td:nth-child(' + mySelIndex + ') select').removeAttr("disabled");              // removes the disabled property of the dropdownlist
            $(this).find('td:nth-child(' + mySelIndex + ') select').append(option);                      // append the option variable to the dropdownlist
            $(this).find('td:nth-child(' + mySelIndex + ') select>option:eq(1)').attr('selected', true); // selects the newly created option of the dropdownlist
        }
        else    // if the checkbox is not checked
        {

            $(this).find('td:nth-child(' + myTIndex + ') input').val("0");                                             // sets the textbox value to 0
            $(this).find('td:nth-child(' + mySelIndex + ') select').find("option[value='" + myAcCode + "']").remove();   // removes the appended item from dropdownlist
            $(this).find('td:nth-child(' + mySelIndex + ') select').prop("disabled", "disabled");                        // applies the disabled property to the dropdownlist
        }
    }
});

我需要上述帮助。

以及当我要保存表格数据时。我确实将所有行和列存储在一个数组中并想传递给控制器。这就是我所做的一切：

 $('#btnSaveSaving').click(function () {
    var myTableArray = [];

    $('#tblSavingColl tbody tr').each(function () {
        var arrayOfThisRow = [];

        var tableData = $(this).find('td');
        if (tableData.length > 0) {
            tableData.each(function () {
                if ($(this).find("input[type=text]").length) {
                    var myText = $(this).find("input[type=text]").val();
                    arrayOfThisRow.push(myText);
                }
                else if ($(this).find("input[type=checkbox]").length) {
                    var myText = $(this).find("input[type=checkbox]");
                    if ((myText).prop('checked') == true)
                        arrayOfThisRow.push('Y');
                    else arrayOfThisRow.push('N');
                }
                else if ($(this).find("select").length) {
                    var myText = $(this).find("select :selected").text();
                    arrayOfThisRow.push(myText);
                }
                else arrayOfThisRow.push($(this).text());
            });

            myTableArray.push(arrayOfThisRow);
        }
    });

    var params = [];

    /*for (var i = 0; i < myTableArray.length; i++) {
        var dataValue = myTableArray[i].split(',');

            params = {
                collSheetNo: $('#collnSheetNo').val(),
                clientNo: dataValue[0],
                clientCode: dataValue[0],
                clientName: dataValue[1],
                UFAcNo: dataValue[6],
                UFBal: dataValue[2],
                UFDue: dataValue[3],
                UFRec: dataValue[4],
                MSAcNo: dataValue[6],
                MSBal: "a",
                MSDue: "a",
                MSRec: "a",
                MSAdjFlag: "a",
                MSAdjACNo: "a",
                MSAdjCode: "a",
                MSAdjAmt: "a",
                PSAcNo: "a",
                PSBal: "a",
                PSDue: "a",
                PSRec: "a",
                PSAdjFlag: "a",
                PSAdjAcNo: "a",
                PSAdjCode: "a",
                PSAdjAmt: "a",
                OSAcNo: "a",
                OSBal: "a",
                OSDep: "a",
                OSWithdraw: "a",
                ReceivedFlag: "a",
                PresentFlag: "a"
            };
    }*/

    $.ajax({
        type: 'POST',
        url: '@Url.Action("SaveSavingColln", "CollectionSheetTranscation")',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({ savingColln: params}), 
        success: function (result) {
            alert(result);
        },
        error: function () {
            alert("Error while saving Saving Collection Sheet");
        }
    });
});

注释行填充 params 变量。但事实上它不会在

之后执行 
  var dataValue = myTableArray[i].split(',');

问题2 所以，我在将数据发送到控制器时也遇到了问题。 好吧，我什至尝试了以下方式将数据传递给控制器。

 data: JSON.stringify({ savingColln: myTableArray}),

我在controller上打了一个断点，知道数据有没有传到controller。它实际上到达了控制器和 myTableArray 的长度，但没有获取任何值。我的控制器如下：

 public JsonResult SaveSavingColln(List<SavingCollectionModel> savingColln)
    {
        string result = iCollService.SavingCollnSave(savingColln);
        return Json(result, JsonRequestBehavior.AllowGet);
    }

jquery asp.net asp.net-mvc-4 razor model-view-controller
2个回答
0
投票

请确保您已创建正确的 json 数据以发送服务器端。

请试试这个

var str = JSON.stringify(myTableArray);
str = str.substring(0, str.length - 1).substring(1, str.length);

然后将这个

var str
作为数据传递给服务器，如下所示

data:'{"savingColln":'+str+'"}',

希望这能解决问题

0
投票

我通过执行以下操作获得了将表数据传递给控制器的解决方案：

$('#btnSaving').click(function(){
   var myTableArray = [];

   $('#tblSavingColl tr:not(:first)').each(function () {
        var tds = $(this).find('td');

        var myDets= { collSheetNo: $('#').val(), clientNo: $(tds[0]).html() }
        myTableArray.push(myDets);
    })

    $.ajax({
        type: 'POST',
        url: '@Url.Action("SaveSavingColln", "CollectionSheetTranscation")',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(myTableArray),
        success: function (result) {
            alert(result);
        },
        error: function () {
            alert("Error while saving Saving Collection Sheet");
        }
    });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.