将对象从局部视图传递到控制器

Question

下面是我正在处理的View 的 html。它包含一个能够根据需要添加其他行的表。返回此特定 View 时，该表最初填充有 SalesOrder 对象。

@model List<Project.Models.SalesOrder>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using (Html.BeginForm("Print", "Project", FormMethod.Post))
{
    <div class="col-lg-12">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>SO#</th>
                <th>Cust#</th>
                <th>DC</th>
                <th>Stop</th>
                <th>Addr L1</th>
                <th>Addr L2</th>
                <th>City</th>
                <th>State</th>
                <th>Zip</th>
                <th>Ref 1</th>
                <th>Ref 2</th>
                <th>Pcs</th>
            </tr>
            </thead>
            <tbody>
            @foreach (var salesOrder in Model)
            {
                @Html.Partial("_SalesOrderRecord", salesOrder)
            }
            </tbody>
        </table>
    </div>
    <div class="col-lg-12">
        <button type="button" class="btn btn-primary" id="add">Add</button>
        <button type="button" class="btn btn-danger" id="delete">Remove Last Record</button>
        <button style="float: right;" type="submit" class="btn btn-danger" id="print">Print Label(s)</button>
    </div>
}

单击“添加”按钮后，将调用下面的脚本并在该表的foreach 中添加PartialView。

var url = '@Url.Action("Add", "ProjectController")'; // adjust to suit
$('#add').click(function() {
    $.get(url, function (response) {
        $('<tr />').html(response).appendTo(tableBody);
    });
});

下面是PartialView：

@model Project.Models.SalesOrder   

@using (Html.BeginCollectionItem("salesOrderTbl"))
{
    <tr id="addRow" class="form-group">
        @Html.HiddenFor(m => m.SalesOrderId)
        <td>@Html.TextBoxFor(m => m.SalesOrderNumber, new {@class="form-control", @style="height: auto; width: 5em;"})</td>
        <td>@Html.TextBoxFor(m => m.CustId, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.Location, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.DeliveryCompanyName, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.AddressL1, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.AddressL2, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.City, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.State, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.Zip, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.Reference1, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.Reference2, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
        <td>@Html.TextBoxFor(m => m.Pieces, new { @class = "form-control", @style = "height: auto; width: 5em;" })</td>
    </tr>
}

我要尝试完成的下一步是使用“打印”按钮将SalesOrder 对象发布到我的ProjectController。

下面是我尝试发布到的ProjectController 方法：

[HttpPost]
public ActionResult Print(List<SalesOrder> salesOrders)
{
    //do things
}

不幸的是，这对我不起作用，salesOrder 列表对象始终为空。我相信我误解了如何使用PartialView，所以如果有人能指出我哪里出错了，我将不胜感激。

Answer 1

您的部分正在使用 BeginCollectinItem() 添加一个名为 "salesOrderTbl" 的前缀，并且为了绑定，您的 POST 方法中的参数名称必须匹配。

[HttpPost]
public ActionResult Print(List<SalesOrder> salesOrderTbl)

或者，保留现有的方法参数名称并将部分中的视图代码更改为

@using (Html.BeginCollectionItem("salesOrders"))
{
    ....
}

还请注意，您的部分正在创建一个 <tr> 元素，因此您无需将其包含在用于动态添加新行的脚本中的另一个 <tr> 元素中。应该只是

var tableBody = $('#...'); // give your tbody an id
var url = '@Url.Action("Add", "ProjectController")'; // adjust to suit
$('#add').click(function() {
    $.get(url, function (response) {
        $(tableBody').append(response);
    });
});