Отправить значение пары флажков в контроллер с помощью метода jQuery.post ()

Question

У меня есть таблица, которая отображает из БД все инфраструктуры (их название, описание, производительность).Последний столбец этой таблицы имеет флажок.После выбора нескольких флажков, я хочу иметь одну кнопку, которая удалит все выбранные инфраструктуры.Здесь у вас есть код таблицы.

<table>
<tr>
    <th>
        Nazwa //name
    </th>
    <th>
        Opis // description
    </th>
    <th>
        Wydajność // performance
    </th>
    <th>
        zaznacz  // select
    </th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Nazwa)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Opis)
        </td>
        <td style="text-align: center">
            @Html.DisplayFor(modelItem => item.Wydajnosc) j
        </td>
        <td style="padding-left: 2%; padding-right: 2%;">
            <input type='checkbox' id='myCheckbox' name='Infrastuktura[@item.InfrastrukturaID].myCheckbox' value='@item.InfrastrukturaID' />
        </td>
    </tr>
}

Я знаю, что мне нужно иметь некоторую переменную, которая будет сохранять все значения из флажков.У меня было что-то подобное: (но это не сработало)

var checked = $('input[type="checkbox"]#myCheckbox').attr('checked');

И затем я должен отправить эти данные (используя, например, jQuery.post ()), я написал несколько функций, которые отправляютпост с данными, но ни один из них не работает должным образом.Ниже я поместил одну из этих функций:

    $('#submitButton').click(function () {
    if (checked) {
        $.ajax({
            type: 'POST',
            url: '/Home/InfrastrukturaDelete',
            data: 'id: ' +checked,
            contentType: 'json',
            dataType: 'json'
        });
    }
    else {
        alert("ble");
    }
});

Вот мой метод в HomeController:

    [HttpPost]
    public ActionResult InfrastrukturaDelete(int[] myCheckbox)
    {
        foreach (int item in myCheckbox)
        {
            Infrastruktury infrastruktura = naukaRepository.GetInfrastruktura(item);
            naukaRepository.DeleteInfrastruktura(infrastruktura);
            naukaRepository.Save();
        }

        return RedirectToAction("InfrastrukturyView");
    }

Я всегда получаю ошибку 500 или Resource, интерпретируемую как Other, но переданную с неопределенным типом MIME.Также, если можете, покажите мне, как должен выглядеть контроллер, чтобы справиться с этой функцией ajax.Буду благодарен за любую помощь.

Answer 1

Мой тд с флажком выглядит так:

<td style="padding-left: 2%; padding-right: 2%;">
     <input type='checkbox' id='myCheckbox' name='InfrastukturaID' value='@item.InfrastrukturaID' />
</td>

Мой скрипт с постом:

<script type="text/javascript">
    function deleteRow() {
        if ($(':checkbox:checked')) {
            var postData = $('input[type="checkbox"]').serialize();
            $.post('/Home/InfrastrukturaDelete', postData,
            function () {
                $(':checkbox:checked').each(function () {
                    if (this.checked) {
                        $(this).closest('tr').detach();
                    }
                });
            });
        }
    };
</script>

Третий аргумент в $ .post () - это функция, которая динамически удаляет tr, котораясодержит отмеченные флажки.Мое действие в контроллере выглядит так:

    [HttpPost]
    public ActionResult InfrastrukturaDelete(int[] InfrastukturaID)
    {
        foreach (int item in InfrastukturaID)
        {
                Infrastruktury infrastruktura = naukaRepository.GetInfrastruktura(item);
                naukaRepository.DeleteInfrastruktura(infrastruktura);
                naukaRepository.Save();
        }
        return Content("OK");
    }

Answer 2

Я не уверен, что понял ваш вопрос.Я думаю, что вы ищете способ опубликовать идентификаторы проверенных инфраструктур.

В этом случае я бы сделал следующее:

1. измените имя входных флажков на не переменное значение (например, Infrastuktura [@item.InfrastrukturaID] .myCheckbox "становится" InfrastukturaID ")

2. С помощью метода jquery post отправьте данные в виде данных формы на URL.

   $('#submitButton').click(function () {
       $.post('/Home/InfrastrukturaDelete', 
              $("input[type='checkbox']").serialize(),
              function (msg) {
                  $('#mRooms').html(msg);
              })
       );
   });
   

Это не будет публиковать ваши данные как данные json (вы не упомянули это как требование).Вместо этого вы получите строку запроса, размещенную на URL.Подробнее о .serialize () см. По адресу http://api.jquery.com/serialize/

С одним именем для всех флажков отправленная строка запроса будет выглядеть примерно так:

InfrastukturaID=ID1&InfrastukturaID=ID2&InfrastukturaID=ID5

Это не должно бытьслишком сложно перебрать на стороне сервера для выполнения удалений.

на стороне сервера Я бы выполнил цикл следующим образом (извините, я кодирую vb, а не c #, но вы должны иметь возможность переводить):

For Each id As String In Request.Form("InfrastrukturaID")
    'try convert string to int ID
    'perform delete operation using the id
Next
    'submit/save changes for delete operation

Я использовал строку в цикле вместо int, так как вы должны убедиться, что сначала можете привести к int.Не могу доверять данным всегда будет то, что вы намереваетесь.

Answer 3

Работает ли contentType: "application/json; charset=utf-8"?

$('#submitButton').click(function () {
    if (checked) {
        $.ajax({
            type: 'POST',
            url: '/Home/InfrastrukturaDelete',
            data: 'id: ' +checked,
            contentType: "application/json; charset=utf-8", //<--- Change here
            dataType: 'json'
        });
    }
    else {
        alert("ble");
    }
});

Answer 4

Попробуйте сериализовать данные с traditional: true

Взято из этого в mvc3-ajax-post-mutliple-checkbox-values-to-controller , это может быть полезно для вас ...

$.ajax({
    url: "/room/removeselectedroom/@Model.mRoomid",
    type: "POST",
    dataType: "json",
    data: jdata,
    traditional: true,
    success: function (msg) {
        $('#mRooms').html(msg);
    }
})

Здесь некоторая информация о сериализации массива.

Начиная с jQuery 1.4, метод $ .param () рекурсивно сериализует глубокие объекты для размещения современных языков сценариев и сред, таких как PHP и Ruby on Rails. Вы можете отключить эту функцию глобально, установив jQuery.ajaxSettings.traditional = true;.