如何使用複選框刪除多條記錄？

Question

我正在爲我的研究所創建一個項目。使用Asp.net MVC，我需要選中複選框的多個刪除選項。

我在我的視圖中添加了一張支票，但未刪除多張Raw。我不想使用第三方插件。請幫幫我。

<table class="table table-striped table-condensed table-bordered"> 
    <tr> 
     <th> 
      Select 
     </th> 
     <th> 
      @Html.ActionLink("Book Id", "Index", new { sortOrder = ViewBag.IdSortParm, currentFilter = ViewBag.CurrentFilter }) 
     </th> 
     <th> 
      @Html.ActionLink("Title", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter }) 
     </th> 
     <th> 
      @Html.ActionLink("Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter }) 
     </th> 
     <th> 
      Price 
     </th> 
     <th> 
      Category 
     </th> 
     <th class="text-center"> 
      Photo 
     </th> 
     <th> 
      User 
     </th> 
     <th>Edit</th> 
     <th>Delete</th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       <input type="checkbox" name="deleteInputs" value="@item.BookId" /> 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.BookId) 
      </td> 
      <td> 
       @Html.ActionLink(item.BookTitle, "Details", new 
       { 
        id = item.BookId 
       }) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.PublishDate) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Price) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Category) 
      </td> 
      <td class="text-center"> 
       <img class="img-thumbnail" width="50" height="50" src="~/ContentImages/Full/@item.Photo" /> 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.UserName) 
      </td> 
      <td> 
       @Html.ActionLink("Edit", "Edit", new { id = item.BookId }) 
      </td> 
      <td> 
       @Html.ActionLink("Delete", "Delete", new { id = item.BookId }) 
      </td> 
     </tr> 
    } 
</table> 

Answer 1

這可能是一種方法來實現它：

一是嵌入了一個名爲表單中的表，執行批量刪除的行爲，就像這樣：

@{ Html.BeginForm("BatchDelete", "Book", FormMethod.Post, new { name = "tableForm" }); } 
    <table class="table table-striped table-condensed table-bordered"> 
    <tr> 
     <th> 
     Select 
     </th> 
     <th> 
     @Html.ActionLink("Book Id", "Index", new { sortOrder = ViewBag.IdSortParm, currentFilter = ViewBag.CurrentFilter }) 
     </th> 
     <th> 
     @Html.ActionLink("Title", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter }) 
     </th> 
     <th> 
     @Html.ActionLink("Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter }) 
     </th> 
     <th> 
     Price 
     </th> 
     <th> 
     Category 
     </th> 
     <th class="text-center"> 
     Photo 
     </th> 
     <th> 
     User 
     </th> 
     <th>Edit</th> 
     <th>Delete</th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
     <td> 
      <input type="checkbox" name="deleteInputs" value="@item.BookId" /> 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.BookId) 
     </td> 
     <td> 
      @Html.ActionLink(item.BookTitle, "Details", new 
      { 
      id = item.BookId 
      }) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.PublishDate) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Price) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Category) 
     </td> 
     <td class="text-center"> 
      <img class="img-thumbnail" width="50" height="50" src="~/ContentImages/Full/@item.Photo" /> 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.UserName) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id = item.BookId }) 
     </td> 
     <td> 
      @Html.ActionLink("Delete", "Delete", new { id = item.BookId }) 
     </td> 
     </tr> 
    } 
    </table> 

    <!-- Section for buttons --> 
    <div class="actions"> 
     <a href="javascript:(function(){document.tableForm.submit();return void(0);})()"> 
     Delete selected books 
     </a> 
    </div> 
@{ Html.EndForm(); } 

注意到，該表後，前結束表格，我添加了一個鏈接，執行表單的提交。現在

，在控制器側，asumming其名稱是 「BookController的」：

public class BookController : Controller 
{ 
    // ... 

    [HttpPost] 
    public ActionResult BatchDelete(int[] deleteInputs) 
    { 
     // You have your books IDs on the deleteInputs array 
     if (deleteInputs != null && deleteInputs.Length > 0) 
     { 
      // If there is any book to delete 
      // Perform your delete in the database or datasource HERE 
     } 
     // And finally, redirect to the action that lists the books 
     // (let's assume it's Index) 
     return RedirectToAction("Index"); 
    } 

    // ... 
} 

注意：

• 前兩個參數的Html.BeginForm方法，是操作名稱和控制器名稱（沒有「控制器」後綴）。
• 同一方法的最後一個參數包括表單的名稱。該名稱用於鏈接的JavaScript中，以表明您要提交哪個表單。

Answer 2

首先，你需要爲每個複選框不同Id，所以你知道哪個記錄將被刪除。其次，如果您實施「刪除」作爲鏈接，則瀏覽器將執行GET操作，而不是POST。假設你沒有使用AJAX，那麼你將需要一個表單，所以你可以POST到處理刪除的控制器動作。