c# - 我们如何从 View 到 Controller 访问列表和其他字段

Question

下面是我的代码，但我只获取列表形式的表格数据，而不是其他字段。 我如何在 Controller 中获取列表和其他字段数据。 当我用“提交”代码更改保存按钮类型时，我会以列表形式提供其他字段而不是表格数据。另一方面，当我将保存按钮类型更改为“按钮”时，代码仅提供表格数据而不是其他字段。

请解决给定的代码。

@using (Html.BeginForm("ClosingOfTruck", "TripManage", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        <input type="hidden" value="@ViewBag.TruckId" />

        <div class="form-group">
            @Html.Label("Current Truck:", htmlAttributes: new { @class = "control-label col-md-5 adg" })
            <div class="col-md-6 adg">
                <input class="form-control" type="text" value="@ViewBag.TruckNo" disabled />
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Cash received from various points", htmlAttributes: new { @class = "control-label col-md-5 adg" })
            <div class="col-md-6 adg">
                <input class="form-control" type="text" name="OpeningBalance" />
            </div>
        </div>

        //Table for expense should be here
        <div class="row" style="margin:0px;">
            <table id="tblCustomers" class="table" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th style="width:150px">Description</th>
                        <th style="width:150px">Amount</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <td><input type="text" id="txtName" /></td>
                        <td><input type="text" id="txtCountry" /></td>
                        <td><input type="button" id="btnAdd" value="Add" /></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        //end

        <div class="form-group">
            @Html.Label("Received from driver", htmlAttributes: new { @class = "control-label col-md-5 adg" })
            <div class="col-md-6 adg">
                <input class="form-control" type="text" name="ReceivedFromDriver" />
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Pay to driver", htmlAttributes: new { @class = "control-label col-md-5 adg" })
            <div class="col-md-6 adg">
                <input class="form-control" type="text" name="PayToDriver" />
            </div>
        </div>

        <div class="form-group">
            @Html.Label("Closing balance", htmlAttributes: new { @class = "control-label col-md-5 adg" })
            <div class="col-md-6 adg">
                <input class="form-control" type="text" name="ClosingBalance" />
            </div>
        </div>
        <div class="row" style="margin:0px;">
            <input class="form-control" type="button" id="btnSave" value="Save" />
        </div>
    }
</div>
@section Script{

<script type="text/javascript">
            $("body").on("click", "#btnAdd", function () {
                //Reference the Name and Country TextBoxes.
                var txtName = $("#txtName");
                var txtCountry = $("#txtCountry");

                //Get the reference of the Table's TBODY element.
                var tBody = $("#tblCustomers > TBODY")[0];

                //Add Row.
                var row = tBody.insertRow(-1);

                //Add Name cell.
                var cell = $(row.insertCell(-1));
                cell.html(txtName.val());

                //Add Country cell.
                cell = $(row.insertCell(-1));
                cell.html(txtCountry.val());

                //Add Button cell.
                cell = $(row.insertCell(-1));
                var btnRemove = $("<input />");
                btnRemove.attr("type", "button");
                btnRemove.attr("onclick", "Remove(this);");
                btnRemove.val("Remove");
                cell.append(btnRemove);

                //Clear the TextBoxes.
                txtName.val("");
                txtCountry.val("");
            });

            function Remove(button) {
                //Determine the reference of the Row using the Button.
                var row = $(button).closest("TR");
                var name = $("TD", row).eq(0).html();
                if (confirm("Do you want to delete: " + name)) {
                    //Get the reference of the Table.
                    var table = $("#tblCustomers")[0];

                    //Delete the Table row using it's Index.
                    table.deleteRow(row[0].rowIndex);
                }
            };

            $("body").on("click", "#btnSave", function () {
                //Loop through the Table rows and build a JSON array.
                var Exps = new Array();
                $("#tblCustomers TBODY TR").each(function () {
                    var row = $(this);
                    var customer = {};
                    customer.Desc = row.find("TD").eq(0).html();
                    customer.Amount = row.find("TD").eq(1).html();
                    Exps.push(customer);
                });

                //Send the JSON array to Controller using AJAX.
                $.ajax({
                    url: $(this).attr("action"),
                    type: "POST",
                    data: JSON.stringify(Exps),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        alert(r + " record(s) inserted.");
                    }
                });
            });
</script>
}

Answer 1

看起来你只是用表数据填充你的 json 数组 Exps:

var Exps = new Array();
$("#tblCustomers TBODY TR").each(function () {
    var row = $(this);
    var customer = {};
    customer.Desc = row.find("TD").eq(0).html();
    customer.Amount = row.find("TD").eq(1).html();
    Exps.push(customer);
});

因此，如果不提交完整的表单，您只会发布该数据:

data: JSON.stringify(Exps),

并得到:

[{"Desc":"Sandwich","Amount":"5"},{"Desc":"Drink","Amount":"2"}]

如果您想在不提交表单的情况下发布表单输入，则必须在进行 ajax 调用之前将它们添加到数据对象中。也许像这样(确保还向所有输入添加名称属性):

var Log = new Array();
var frmData = $(document).find('form').serializeArray();
$.each(frmData, function (idx) {
    Log.push({ [this.name]: this.value });
});
var Exps = new Array();
$("#tblCustomers TBODY TR").each(function () {
    var row = $(this);
    var customer = {};
    customer.Desc = row.find("TD").eq(0).html();
    customer.Amount = row.find("TD").eq(1).html();
    Exps.push(customer);
});
Log.push(Exps);

并将您的 ajax 数据更改为:

data: JSON.stringify(Log),

获取发布的以下对象数据:

[{"TruckId":"1"}
,{"OpeningBalance":"1"}
,{"ReceivedFromDriver":"1"}
,{"PayToDriver":"1"}
,{"ClosingBalance":"1"}
,[{"Desc":"Desc1","Amount":"1"},{"Desc":"Desc2","Amount":"1"}]]

如果您不需要以 json 格式发布，您也可以使用适当的名称和值将隐藏的输入添加到表格单元格中，并在您的 ajax 调用中检索所有表单数据，如下所示:

data: $form.serialize(),