Question

I have a table that displays from db all infrastructures (their name, description, performance). The last column of this table has checkbox. After selecting a few checkboxes, I want to have one button, which will delete all selected infrastructures. Here you have code of the table.

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

I know that I need to have some variable, which will save all value from checkboxes. I had something like that: ( but it didnt’t work well )

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

And then I must send this data ( using for example jQuery.post() ), I wrote a few functions, which send post with data, but none of them work properly. Below I put one of those functions:

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

Here is my method in 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");
    }

I always get error 500 or Resource interpreted as Other but transferred with MIME type undefined. Also if you can, show me how controller should look, to handle this ajax function. I will be grateful for any help.

Answer 1

My td with checkbox looks like that:

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

My script with post:

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

Third argument in $.post() is function which dynamically delete tr, which contains checked checkboxes. My action in controller looks like that:

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