CODEWITHSUNDEEP
asp.net-mvc
Ronald
Ronald

Reputation: 1542

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

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>

Upvotes: 1

Views: 4320

Answers (2)

Rune
Rune

Reputation: 8380

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

Upvotes: 0

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93434

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.

Upvotes: 1

Related Questions