刪除複選框檢查表的行

Question

我有包含數據的表。在每一行中都有一個複選框和一個複選框，用於選擇標題中的所有複選框。 選中此複選框後，相應的行將從數據庫table.Plus中刪除，在chiecking標題中的複選框時，所有行都將從數據庫表中刪除。如何才能實現此asp.net mvc。

Answer 1

像往常一樣與模型開始：

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

然後控制器：

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

最後的Index.aspx觀點：

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

<% } %> 

而且產品編輯模板（~/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

我會使用AJAX。在更改檢查狀態時，我會提交一個請求來刪除所有選定的ID並刷新表格數據。

Answer 3

使用jQuery，一些其他的JavaScript庫，或只是手動檢查複選框的AJAX請求代碼。然後在成功時更改DOM。

使用jQuery，你可以這樣做：

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

這是非常基本的實現，你可以在去除該行的一些動畫打扮起來。您還需要傳遞數據並返回一些錯誤處理的數據。點擊這裏查看jQuery AJAX tutorial。