Creating a modal with the function of deleting .Net Core 2.0



  • Good evening, would you like help in a .Net Core 2.0 issue, how do I create a boostrap 4 modal with the function of deleting in the code below? My main problem and how to recover and make the delete button of modal erase the register of the table. My index cshtml:

       @{
        ViewData["Title"] = "Chamados";
    }
    

    <div class="container">
    <div class="table-wrapper">
    <div class="table-title">
    <div class="row">
    <div class="col-sm-6">
    <h2>Lista de Chamados</b></h2>
    </div>
    <div class="col-sm-6">
    <a href="~/Chamados/Cadastro" class="btn btn-success"><i class="fas fa-plus-circle"></i>
    <span>Novo Chamado</span></a>

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;table class="table table-striped table-hover"&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                 &lt;th&gt;ID&lt;/th&gt;
                 &lt;th&gt;Titulo&lt;/th&gt;
                 &lt;th&gt;Status&lt;/th&gt;
                 &lt;th&gt;Valor&lt;/th&gt;
                 &lt;th&gt;Ações&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    &lt;tr&gt;                        
            @{
              foreach (var item in (List&lt;ChamadosModel&gt;)ViewBag.ListaChamados){
              &lt;tr&gt;          
              &lt;td&gt;@item.Id&lt;/td&gt;
              &lt;td&gt;@item.Titulo&lt;/td&gt;
              &lt;td&gt;@item.Status&lt;/td&gt;
              &lt;td&gt;@item.Valor&lt;/td&gt;
              &lt;td&gt;
            &lt;a href="#editEmployeeModal" class="edit" data-toggle="modal" onclick="Editar(@item.Id)"&gt;&lt;i class="fas fa-edit" data-toggle="tooltip" title="Edit"&gt;&lt;/i&gt;&lt;/a&gt;
    
              &lt;a href="#deleteEmployeeModal" class="delete" data-toggle="modal" data-id="@item.Id"&gt;&lt;i class="fas fa-trash" data-toggle="tooltip" title="Delete"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/td&gt;
        &lt;/tr&gt;
        }
    }
                        &lt;/td&gt;
                    &lt;/tr&gt;
    
                &lt;/tbody&gt;
            &lt;/table&gt;
    
    
    &lt;!-- Delete Modal HTML --&gt;
    &lt;div id="deleteEmployeeModal" class="modal fade"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;form&gt;
                    &lt;div class="modal-header"&gt;                      
                        &lt;h4 class="modal-title"&gt;Deletar Chamado&lt;/h4&gt;
                        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;                    
                        &lt;p&gt;Tem certeza que deseja deletar este chamado?&lt;/p&gt;
                        &lt;p class="text-warning"&gt;&lt;small&gt;Está ação não tem volta!&lt;/small&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                         @using (Html.BeginForm())
                {
                    @Html.AntiForgeryToken()
                    &lt;div class="form-actions no-color"&gt;
                        &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancelar&lt;/button&gt;
                        &lt;input type="submit" value="Delete" class="btn btn-primary" /&gt;                     
                    &lt;/div&gt;
                }
                    &lt;/div&gt;
                &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    

    <script>
    $(function () {

            $(".delete").click(function () {
                var id = $(this).attr("data-id");
    
                $("#modal").load("Delete?id=" + id, function () {
                    $("#modal").modal();
                })
            });
    
        })
    &lt;/script&gt;
    

    Model:

     public void Delete(int id)
    {
    DAL objDal = new DAL();
    string sql = $"DELETE FROM CHAMADOS WHERE ID='{id}'";

            objDal.ExecutarComandoSQL(sql);
        }
    

    Controller:

     [HttpPost]
    public IActionResult Delete(int id){
    new ChamadosModel().Delete(id);
    return View();
    }



  • You can do without using ajax as below

    View Index

    <a href="#deleteEmployeeModal" class="delete" data-toggle="modal" data-id="@item.Id"><i class="fas fa-trash" data-toggle="tooltip" title="Delete"></i></a>
    

    <!-- Delete Modal HTML -->
    <div id="deleteEmployeeModal" class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h4 class="modal-title">Deletar Chamado</h4>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
    <div class="modal-body">
    <p>Tem certeza que deseja deletar este chamado?</p>
    <p class="text-warning"><small>Está ação não tem volta!</small></p>
    </div>
    <div class="modal-footer">

                &lt;form asp-action="Delete"&gt;
                &lt;div class="form-actions no-color"&gt;
                    &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancelar&lt;/button&gt;
                    &lt;button type="submit" value="Delete" class="btn btn-primary" /&gt;                     
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    

    </div>

    Just direct the form post to your "Delete" action in the controller.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2