0

I'm creating a project for my institute. Using Asp.net MVC, I need multiple delete option with selected checkbox.

I have added a check in my view, but not delete multiple Raw. I don't want to use third party plugin. Please help me.

<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>
1
  • 1
    So you want to delete rows which are marked by checkbox? Commented Jun 25, 2014 at 13:14

2 Answers 2

3

This could be a way to achieve it:

First embed the table within a named form, that executes the batch delete action, like so:

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

Note that after the table, before ending the form, I added a link that executes the submit of the form.

Now, on the controller side, asumming its name is "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");
    }

    // ...
}

Notice that:

  • The first two parameter of the Html.BeginForm method, are the action name and controller name (without the "Controller" suffix).
  • The last parameter of the same method include the name of the form. The name is used in the javascript of the link, in order to indicate which form are you going to submit.
Sign up to request clarification or add additional context in comments.

Comments

-1

First, you need a different Id for each checkbox so you know which record is to be deleted. Second, if you implement "delete" as a link then the browser will perform a GET action instead of a POST. Assuming you are not using AJAX then you will need a form so you can POST to the controller action which handles the delete.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.