usuwanie wierszy tabeli przy sprawdzaniu pól wyboru

Question

Mam tabelę zawierającą dane. W każdym rzędzie znajduje się pole wyboru oraz pole wyboru, aby zaznaczyć wszystkie pola wyboru w nagłówkach. Po zaznaczeniu tego pola wyboru korespondujące wiersze mają zostać usunięte z tabeli bazy danych.Plus, po zaznaczeniu pola wyboru w nagłówku wszystkie wiersze zostaną usunięte z tabeli bazy danych. Jak mogę osiągnąć ten asp.net mvc.

Answer 1

Jak zawsze zaczynać się od modelu

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

następnie Kontroler:

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

i wreszcie Index.aspx widok:

<% 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" /> 

<% } %> 

a szablonu edytora produkt (~/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

Używałbym AJAX. Po zmianie stanu sprawdzenia wysłałbym żądanie usunięcia wszystkich wybranych identyfikatorów i odświeżenia danych tabeli.

Answer 3

Użyj jQuery, innej biblioteki javascript lub po prostu ręcznie zakoduj żądanie AJAX przy sprawdzaniu pola wyboru. Następnie zmień DOM w przypadku sukcesu.

jQuery można zrobić coś takiego:

<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(); 
     } 
    }); 
)}; 

Jest to bardzo proste wdrożenie, można ubierać ją z pewnym animacji w usunięciu wiersza. Konieczne jest również przekazywanie danych i zwracanie danych z pewną obsługą błędów. Sprawdź tutaj, aby uzyskać jQuery AJAX tutorial.