ASP.NET MVC - Delete rows in a table and then update database

Question

In my yahoo email the inbox is displayed as a list of email items. Clicking on the item displays its detail. Now, back to the inbox. One of the columns in the list is a checkbox. If I click one or more checkboxes and then click "delete" then all those items are deleted.

That's more or less what I'd like to achieve with my ASP.NET MVC application. I have a table with some rows in it and I can tick some checkboxes to delete the selected rows and update the database.

I am coming from an Web Forms background. If the delete button is clicked it will do a post back and I can inspect in my code behind what items need to be removed. I am doing this, however, in ASP.NET MVC and I do not have the benefit of postback or view state. I figure this could be achieved with AJAX but I'd like to have a simpler solution, like a simple form post. Unfortunately, I do not know where to start.

At this point I can delete the rows on the client side with JQuery but I don't have anything on the database part as yet. Any tips is highly appreciated.

Below is my view code:

@model IEnumerable<Simplex.Data.Models.MessageBoardModel>

@{
    ViewBag.Title = "Message Board";
}

<script type="text/javascript">
    function deleteItems() {
        $('.td_checkbox:checked').closest('tr').closest(tr).remove();
    }

    $(document).ready(function () {
        $('#btnDelete').click(function () {
            deleteItems();
        });
    });
</script>

<div id="content">
    <h2>Board List</h2>
    @{ Html.RenderAction("search", "home"); }
    <div class="board_list">
        <table>
            <tr>
                <th>
                    No
                </th>
                <th>
                    Subject
                </th>
                <th>
                    Posted By
                </th>        
                <th>
                    Posting Date
                </th>
            </tr>

    @foreach (var item in Model) {
        <tr [email protected]>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td class="subject">
                <a href="@Url.Action("details", new { id = item.Id })"><input class="td_checkbox" type="checkbox" />&nbsp;@item.Subject</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Username)
            </td>        
            <td>
                @Html.DisplayFor(modelItem => item.DatePosted)
            </td>
        </tr>
    }
    </table>
    <button id="btnDelete">Delete</button>
    <a href="@Url.Action("create")"><input type="button" value="Post" /></a>
</div>

Erik Funkenbusch · Accepted Answer · 2011-09-05 18:22:24Z

1

First Issue, don't use the @foreach, that strips out the built-in collection handling. Use @Html.DisplayForModel() instead. This will correctly create the proper indexed item names and id's.

Then in your HttpPost handler, you will want to have the parameter be the collection, and you can walk the list and see which checkboxes are set.

answered Sep 5, 2011 at 18:22

Erik Funkenbusch

93.6k29 gold badges201 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rune · Accepted Answer · 2011-09-05 18:32:41Z

Use a for loop to render the following for each message:

<input name="messages[@i.ToString()].Key" type="hidden" value="@item.Id" />
<input name="messages[@i.ToString()].Value" type="checkbox" value="true" />

Then capture the POSTed values in your action like this

[HttpPost]
public ActionResult Delete(Dictionary<int,bool> messages)
{
  IEnumerable<int> idsOfItemsYouWantToDelete = messages.Where(pair => pair.Value).Select(pair => pair.Key);
// Do delete, return redirect or whatever
}

This works because Dictionary<int,bool> is a collection of KeyValuePair<int,bool>s and the .Key and .Value input fields will be matched with the .Key and .Value properties of KeyValuePair<TKey, TValue>.

You may want to read ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries

Collectives™ on Stack Overflow

ASP.NET MVC - Delete rows in a table and then update database

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related