jquery - 模型和列表框

Question

好的，所以我尝试使用带有列表框的 View 模型，这样当我将项目添加到列表框然后发布表单时，这些项目将通过 View 模型传递到操作。

View 模型:

public virtual ICollection<Sku> Skus { get; set; }  //This is this items sku's
public virtual ICollection<Sku> AllSkus { get; set; } //This is all sku's

我的列表框如下所示:

@Html.ListBoxFor(m=>m.Skus, new MultiSelectList(Model.Skus, "Id", "Name"), new { id = "skuList", style="width: 200px; height: 100px" })

我有一个包含所有 sku 的表，当我选择一个时，它会使用 jquery 添加到列表框。 (我将在下面发布所有代码)

我的接收操作(sku 为空):

    [HttpPost]
    public ActionResult AddProductOffering(ProductOfferingModel model)
    {

        return View(model);
    }

这些项目很好地添加到列表框中，但是模型在发布后仍然为空。

显然我只是更新列表框而不是模型，我不知道如何以这种方式将两者联系在一起。

任何帮助将不胜感激，谢谢!

(更新)完整的 .cshtml 文件:

@using Web.ControlPanel.Helpers
@model Web.ControlPanel.ViewModels.Offering.ProductOfferingModel

@using (Html.BeginForm())
{

<h2>Product Offering</h2>
<br />

@Html.LabelFor(m => m.Name)
@Html.EditorFor(m => m.Name)

<br />
<br />

<label>Offerings Skus</label><br/>

@Html.ListBoxFor(m=>m.Skus, new MultiSelectList(Model.Skus, "Id", "Name"), new { id = "skuList", style="width: 200px; height: 100px" })

<br/><br/>

<button class="button" type="submit" value="Save">Save</button>

<br/><br/><br/>

<h3>All Skus</h3>

<p>
    Search: @Html.TextBox("skuFilter")
    <input type="submit" value="Search Skus" name="search" />
</p>

<table class="onepx" style="width: 80%">
    <tr>
        <td colspan="4" style="text-align: right;">
            @Html.Pager("List", Model.SkuPager, 3, (string)ViewBag.SkuFilter)
        </td>
    </tr>
    <thead>
        <tr style="font-weight: bold;">
            <td>Product</td>
            <td>Sku</td>
            <td>List Price</td>
            <td>MSRP</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>

        @if (Model.Skus != null)
        {
            foreach (var sku in Model.AllSkus)
            {

                <tr>
                    <td>
                        @Html.DisplayFor(m => sku.Product.Name)
                    </td>
                    <td>
                        <label id="skuName@(sku.Id)">@sku.Name</label>
                    </td>
                    <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f6b0f073b2223610b263c3f232e3609203d" rel="noreferrer noopener nofollow">[email protected]</a>(m => sku.ListPrice)
                    </td>
                    <td><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c086c645841400268455f5c404d556a435e" rel="noreferrer noopener nofollow">[email protected]</a>(m => sku.Msrp)
                    </td>
                    <td>
                        <a href="#" class="AddSku" id="addSku@(sku.Id)">Add To Offering</a>
                    </td>
                </tr>

            }
        }
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4" style="text-align: right;">
            @Html.Pager("List", Model.SkuPager, 3, (string)ViewBag.SkuFilter)
        </td>
    </tr>
</tfoot>
</table>
}

@section Scripts {
<script>
    $(document).ready(function() {

        //Array of skus
        var skus = new Array();

        $('.AddSku').click(function(e) {
            e.preventDefault();
            var id = e.target.id.replace("addSku", "");

            var exists = false;

            for (var i = 0; i < skus.length; i++) {
                if (skus[i] == id) {
                    exists = true;
                }
            }

            if (!exists) {
                var name = $("#skuName" + id).text();
                $('#skuList').append('<option value=' + id + '>' + name + '</option>');
                skus.push(id);
            }

        });

    });
</script>

}

Answer 1

MVC 在技术上无法绑定(bind)到类型(或对象)的接口(interface) - ICollection - 更改您的 ICollection<T>至List<T> 。然后您需要查看列表是如何在列表框中呈现的(选择)。它应该以数组表示法呈现，即类似Sku[0] ... Sku[n] 。您的 jQuery 需要以相同的数组表示法附加到选择。阅读 Phil Haack 的 Model Binding to a List article了解更多信息。