Question

我有一个从db显示所有基础结构的表（它们的名称，描述，性能）。该表的最后一列有复选框。选中几个复选框后，我想要一个按钮，这将删除所有选定的基础结构。这里有代码表。

<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或资源解释为其他但转移MIME类型未定义。如果可以，请告诉我控制器应该如何看待，以处理这个ajax函数。我将不胜感激任何帮助。

Answer 1

我的td with checkbox看起来像是：

<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

我不确定我是否理解你的问题。我认为您正在寻找一种方法来发布已检查基础架构的ID。

在这种情况下，这就是我要做的事情：

将输入复选框的名称更改为非变量值（例如“Infrastuktura [@ item.InfrastrukturaID] .myCheckbox”变为“InfrastukturaID”）

使用jquery post方法，将数据作为表单数据发布回url。

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

这不会将您的数据发布为json数据（您没有将其作为要求提及）。相反，您将获得一个发布到网址的查询字符串。在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

尝试使用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);
    }
})

Here有关数组序列化的一些信息。

从jQuery 1.4开始，$ .param（）方法递归地序列化深层对象，以适应现代脚本语言和框架，如PHP和Ruby on Rails。您可以通过设置jQuery.ajaxSettings.traditional = true;。
来全局禁用此功能

Answer 4

使用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");
    }
});

通过jQuery.post（）方法将几个复选框的值发送到控制器

4 个答案: