Post model and 2 checkbox lists to controller with Jquery Ajax

Question

I want to send 2 lists containing values of the checked checkboxes along with my model using JQuery Ajax from an EditorTemplate being used as a partial view. Here it is:

@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>

Here is the Controller action method:

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

For some reason, my POST isn't reaching the ActionMethod. Why?

Answer 1

The Url parameter for $.ajax is a string, not an object so change that line to read like so:

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