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?

arknotts · Accepted Answer · 2014-08-21 15:05:12Z

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")",

answered Aug 21, 2014 at 15:05

arknotts

4543 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2929190 Over a year ago

That was an error yeah, but it still isn't posting.

arknotts Over a year ago

Are you getting any javascript errors? Pull out your data parameter into a variable and print it out using console.log(...) to see if it looks correct.

user2929190 Over a year ago

I don't think it is generating any request at all. I getting no network traffic.

user2929190 Over a year ago

I think the issue is that the <script> is embedded inside a form in HTML (since that View I posted is just an EditorTemplate), so it isn't executing?

arknotts Over a year ago

You should be able to include a <script> in the editor template. Try wrapping your javascript in the standard $(document).ready(function() {...}) block as the elements may not exist yet.

Collectives™ on Stack Overflow

Post model and 2 checkbox lists to controller with Jquery Ajax

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related