Error deletion with modal

Question

I have a modal box that should confirm the deletion of some registers. When I click the "Excluir" button the modal appears as it should but when I click "Confirma" in the modal I get the following error:

Server Error in '/' Application. The parameters dictionary contains a null entry for parameter 'id' of non-nullable type System.Int32 for method System.Web.Mvc.ActionResult Delete(Int32) in NFE.Web.Controllers.NaturezaController. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters

Here's the JQuery code that appends the modal to the html file:

 function ModalExclusao(ID) {

var htmlModal = '';

htmlModal += '<div class="modal fade modalExclusao" id="modalExclusao" tabindex="-1" role="dialog" aria-labelledby="modalExclusaoLabel">';
htmlModal +=     '<div class="modal-dialog" role="document">';
htmlModal +=         '<div class="modal-content">';
htmlModal +=             '<div class="modal-header">';
htmlModal +=                 '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
htmlModal +=                 '<h4 class="modal-title" id="modalExclusao">Confirmação de exclusão</h4>';
htmlModal +=             '</div>';
htmlModal +=             '<h5 style="text-align: center;">Tem certeza que deseja excluir permanentemente o registro?</h5>';
htmlModal +=             '<form method="POST" action="Delete/">';
htmlModal +=                '<div class="modal-footer">';
htmlModal +=                     '<input type="text" id="'+ ID +'" name="'+ ID +'" hidden/>';
htmlModal +=                     '<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>';
htmlModal +=                     '<button type="submit" class="btn btn-success">Confirmar</button>';
htmlModal +=                 '</div>';
htmlModal +=             '</form>';
htmlModal +=         '</div>';
htmlModal +=     '</div>';
htmlModal += '</div>';    

$('#modal').html(htmlModal);}

That's the table with the registers:

<table class="table table-condensed table-bordered table-hover" id="DataTables">
                <thead>
                    <tr>
                        <th> Nome </th>
                        <th> CFOP Dentro do estado </th>
                        <th> CFOP Fora do estado </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @item.Nome
                            </td>
                            <td>
                                @item.CFPODentroEstado
                            </td>
                            <td>
                                @item.CFPOForaEstado
                            </td>
                            <td>
                                <a href="/Natureza/Edit/@item.IDNatureza">Edit</a> |
                                <a href="javascript:func()" onclick="ModalExclusao(@item.IDNatureza)" data-toggle="modal" data-target=".modalExclusao">Excluir</a>
                            </td>
                        </tr>
                    }
                    <div id="modal"></div>
                </tbody>
           </table>

And here's the Object controller:

 // POST: Natureza/Delete/5
    [HttpPost]
    public ActionResult Delete(int id)
    {
        try
        {
            if (VerificaSessao((List<Natureza>)Session["ListaDeNatureza"]))
            {
                List<Natureza> naturezas = new List<Natureza>();

                naturezas = (List<Natureza>)Session["ListaDeNatureza"];

                foreach (Natureza natureza in naturezas)
                {
                    if (natureza.IDNatureza == id)
                    {
                        naturezas.Remove(natureza);
                        return RedirectToAction("Index", "Natureza");
                    }
                }
            }
            // Se não tiver encontrado natureza retornar uma mensagem
            return RedirectToAction("Index", "Natureza");
        }
        catch
        {
            return View();
        }
    }

Thanks for the suggestion but it's not my concern right now. — Guilherme Ramalho, Oct 19 '16 at 18:43
Why in the world are you generating the modal like that. Generate you html normally (initially hidden) and show it as required. Then all you need to do is pass the `ID` and update the value of the hidden input. But that input needs to be `` so that its value is submitted — , Oct 20 '16 at 01:16

score 1 · Accepted Answer · edited May 23 '17 at 11:53

I think it's your

'<input type="text" id="'+ ID +'" name="'+ ID +'" hidden/>';

part in the jquery code. This should be

'<input type="hidden" name="id" value="' + ID + '"/>.

You aren't giving this input a value, which will make its value null. If you want to add an id, you can, but it isn't necessary for posting to the server. The most important thing you're missing is that the name attribute must be the name of the parameter you are passing to:

Addendum to sending data to server: When data gets sent to server (usually by means of HTTP POST request) all data gets sent as name-value pairs where name is the name of the input HTML control and value is its value as entered/selected by the user. This is always true for non-Ajax requests.

This should fix the binding issue with your input. Check out this question for a good reference.

Also, you may want to reconsider your Delete() method's URL routing. Once you delete one of the records with the id you pass in the URL, you may get a 404 error if you try to submit the same post again. See this post for more on that.

Error deletion with modal

1 Answers1