eliminar filas de la tabla al marcar las casillas de verificación

Question

Tengo una tabla que contiene datos. En cada fila hay una casilla de verificación más una casilla de verificación para seleccionar todas las casillas de verificación en los encabezados. Al marcar esta casilla de verificación, las filas correspondientes se eliminarán de la tabla de la base de datos. Además, al cerrar la casilla de verificación en el encabezado, todas las filas se eliminarán de la tabla de la base de datos. ¿Cómo puedo lograr este asp.net mvc?

Answer 1

Como siempre empezar con un modelo:

public class ProductViewModel 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
} 

Luego de un controlador:

public class HomeController : Controller 
{ 
    // TODO: Fetch this from a repository 
    private static List<ProductViewModel> _products = new List<ProductViewModel> 
    { 
     new ProductViewModel { Id = 1, Name = "Product 1" }, 
     new ProductViewModel { Id = 2, Name = "Product 2" }, 
     new ProductViewModel { Id = 3, Name = "Product 3" }, 
     new ProductViewModel { Id = 4, Name = "Product 4" }, 
     new ProductViewModel { Id = 5, Name = "Product 5" }, 
    }; 

    public ActionResult Index() 
    { 
     return View(_products); 
    } 

    [HttpPost] 
    public ActionResult Delete(IEnumerable<int> productIdsToDelete) 
    { 
     // TODO: Perform the delete from a repository 
     _products.RemoveAll(p => productIdsToDelete.Contains(p.Id)); 
     return RedirectToAction("index"); 
    } 
} 

Y, finalmente, el Index.aspx vista:

<% using (Html.BeginForm("delete", "home", FormMethod.Post)) { %> 

    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Select</th> 
      </tr> 
     </thead> 
     <tbody> 
      <%= Html.EditorForModel()%> 
     </tbody> 
    </table> 

    <input type="submit" value="Delete selected products" /> 

<% } %> 

Y el editor de plantillas de productos (~/Views/Home/EditorTemplates/ProductViewModel.ascx) :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ToDD.Controllers.ProductViewModel>" %> 
<tr> 
    <td> 
     <%: Model.Name %> 
    </td> 
    <td> 
     <input type="checkbox" name="productIdsToDelete" value="<%: Model.Id %>" /> 
    </td> 
</tr> 

Answer 2

Yo usaría AJAX. Al cambiar el estado comprobado, enviaría una solicitud para eliminar todos los ID seleccionados y actualizar los datos de la tabla.

Answer 3

Utilice jQuery, alguna otra biblioteca de JavaScript o simplemente codifique manualmente una solicitud AJAX al marcar la casilla de verificación. Luego modifique el DOM en caso de éxito.

Usando jQuery que podría hacer algo como:

<table> 
    <tr> 
     <td><input type="checkbox" class="check" id="1" /></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" class="check" id="2" /></td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" class="check" id="3" /></td> 
    </tr> 
</table> 


$('.check').click(function() { 
    var tableRow = $(this).parent().parent(); 
    var id = $(this).attr('id'); 
    $.ajax({ 
     url: 'http://www.YOURDOMAIN.com/Controller/Action/' + id, 
     success: function(data) { 
      $(tableRow).remove(); 
     } 
    }); 
)}; 

Ésta es la aplicación muy básica, que podría vestir para arriba con un poco de animación en la eliminación de la fila. También necesita pasar datos y devolver datos con algún tipo de manejo de errores. Consulte aquí para obtener un jQuery AJAX tutorial.