Post模型和2个复选框列表到控制器与Jquery Ajax

Post model and 2 checkbox lists to controller with Jquery Ajax

本文关键字:控制器 Jquery Ajax 列表 模型 2个 复选框 Post      更新时间:2023-09-26

我想发送2个列表,包含选中的复选框的值以及我的模型使用JQuery Ajax从EditorTemplate被用作部分视图。

@model EsdpExport.View_Models.ProductLineCreateViewModel
@using EsdpHelpers
<script type="text/javascript">
    $('#add-list').click(function () {
        var commoditiesToRemove = $('input[type="checkbox"].removeCheckbox:checked').map(function () {
            return $(this).val();
        }).toArray();
        var commoditiesToAdd = $('input[type="checkbox"].addCheckbox:checked').map(function () {
            return $(this).val();
        }).toArray();
        $.ajax({
            type: 'POST',
            url: { @Url.Action("UpdateCommodityList", "ProductLine") },
            contentType: "application/json; application/json; application/json",
            data: { availableCommoditiesToAdd: commoditiesToAdd,
                currentCommoditiesToRemove: commoditiesToRemove,
                @Model.ToJson() },
            success: function (result) {
                $('#CommodityTable').html(result);
            },
        });
        return false;
    });
    $('#remove-list').click(function () {
        var commoditiesToRemove = $('input[type="checkbox"].removeCheckbox:checked').map(function () {
            return $(this).val();
        }).toArray();
        var commoditiesToAdd = $('input[type="checkbox"].addCheckbox:checked').map(function () {
            return $(this).val();
        }).toArray();
        $.ajax({
            type: 'POST',
            url: { @Url.Action("UpdateCommodityList", "ProductLine") },
            contentType: "application/json; application/json; application/json",
            data: {
                availableCommoditiesToAdd: commoditiesToAdd,
                currentCommoditiesToRemove: commoditiesToRemove,
                @Model.ToJson() },
            success: function (result) {
                $('#CommodityTable').html(result);
            },
        });
        return false;
    });
</script>

<div id="CommodityTable">
    @Html.WetStyleValidationSummary(true)
    <table title="Current Commodities">
        <tr>
            <th>
                Commodity Name
            </th>
            <th></th>
        </tr>
        @for (int i = 0; i < Model.CurrentCommodities.Count; i++)
        {
            <tr>
                <td>
                    @Html.HiddenFor(model => Model.CurrentCommodities[i].Name)
                    @Html.DisplayFor(model => Model.CurrentCommodities[i].Name)
                </td>
                <td>
                    @Html.HiddenFor(model => Model.CurrentCommodities[i].Id)
                    <input name="currentCommoditiesToRemove" class="removeCheckbox" type="checkbox" value="@Model.CurrentCommodities[i].Id">
                </td>
            </tr>
        }
    </table>
    <input id="remove-list" name="remove" type="button" value="Remove from Product" class="button button-accent ui-link" /> 
    <table title="Searched Commodities" id="Searched">
        <thead>
        <tr>
            <th>
                Commodity Name
            </th>
            <th></th>
        </tr>
    @for (int j = 0; j < Model.AvailableCommodities.Count; j++)
        {
        <tr>
            <td>
                @Html.HiddenFor(model => Model.AvailableCommodities[j].Name)
                @Html.DisplayFor(model => Model.AvailableCommodities[j].Name)
            </td>
            <td>
                @Html.HiddenFor(model => Model.AvailableCommodities[j].Id)
                <input name="availableCommoditiesToAdd" class="addCheckbox" type="checkbox" value="@Model.AvailableCommodities[j].Id" />
            </td>
        </tr>
        }
    </table>
    <input id="add-list" name="add" type="button" value="Add To Product" class="button button-accent ui-link" /> 
</div>

这是控制器的动作方法:

        [HttpPost]
        public ActionResult UpdateCommodityList(string[] availableCommoditiesToAdd,
            string[] currentCommoditiesToRemove, ProductLineCreateViewModel productModel)
        {
        }

由于某些原因,我的POST没有到达ActionMethod。为什么?

$的Url参数。Ajax是一个字符串,而不是对象,所以把这行改成这样:

url: "@Url.Action("UpdateCommodityList", "ProductLine")",