xóa các hàng của bảng khi kiểm tra hộp kiểm

Question

Tôi có bảng chứa dữ liệu. Trong mỗi hàng có một hộp kiểm cộng với hộp kiểm để chọn tất cả hộp kiểm tại tiêu đề. Khi kiểm tra các hộp kiểm này, các hàng sửa lỗi sẽ bị xóa khỏi bảng cơ sở dữ liệu.Thêm vào việc đánh dấu vào hộp kiểm ở đầu trang, tất cả các hàng sẽ bị xóa khỏi bảng cơ sở dữ liệu. Làm thế nào tôi có thể đạt được mvc asp.net này.

Answer 1

Như mọi khi bắt đầu với một mô hình:

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

Sau đó, một bộ điều khiển:

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

Và cuối cùng là Index.aspx xem:

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

<% } %> 

Và mẫu biên tập sản phẩm (~/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

Tôi sẽ sử dụng AJAX. Khi thay đổi trạng thái đã chọn, tôi sẽ gửi yêu cầu xóa tất cả các ID đã chọn và làm mới dữ liệu bảng.

Answer 3

Sử dụng jQuery, một số thư viện javascript khác hoặc chỉ cần mã tay một yêu cầu AJAX trên hộp kiểm. Sau đó thay đổi DOM thành công.

Sử dụng jQuery bạn có thể làm một cái gì đó như:

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

Đây là thực hiện rất cơ bản, bạn có thể ăn mặc nó lên với một số hình ảnh động trong việc loại bỏ các hàng. Bạn cũng cần truyền dữ liệu và trả về dữ liệu với một số xử lý lỗi. Hãy xem tại đây để biết số jQuery AJAX tutorial.