How to delete multiple items in MVC with a single link?

Question

Consider following:

Partial View:

<%= Html.ListBox("BlackList", Model.Select(
                    x => new SelectListItem
                             {
                                   Text = x.Word, 
                                   Value = x.ID.ToString(), 
                                   Selected = Model.Any(y=> y.ID == x.ID)
                             }))%>

Main View:

 <td><% Html.RenderPartial("GetBlackList", ViewData["BlackList"]); %></td>

Controller:

        [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult DeleteWord(int[] wordIdsToDelete)
    {
        if (!ModelState.IsValid)
           return View();
        try
        {
            _wordManager.DeleteWord(wordIdsToDelete);
          return RedirectToAction("WordList");
        }
        catch
        {
            return View();
        }
    }

Model (WordManager)

    public void DeleteWord(int[] idsToDelete)
    {
        var dataContext = GetLinqContext();
        var currentList = GetTabooWordList();

        foreach (var id in idsToDelete)
        {
            foreach (var item in currentList)
            {
                if (item.ID == id)
                {
                       dataContext.BadWords.DeleteOnSubmit(item);
                }
            }
        }
        dataContext.SubmitChanges();
    }

The question is how correctly pass the parameter - idsForDel ? I.E I have to pass a client data to the server?

   <%= Html.ActionLink("Delete Selected", "DeleteWord", "AdminWord", new { wordIds = idsForDel })%>

I think this can be made by jQuery. Any ideas?

Answer 1

How about this code?

  <%= Html.ActionLink("Delete Selected", "DeleteWord", 
                      "AdminWord", new { id="send" })%>
  <script type="text/javascript">
    $(function() {
      $("#send").click(function() {
        $.post(
          $("form:first").attr("action"),
          $("#GetBlackList").serialize()
        );
      });
    });
  </script>

And, If two or more records are deleted, DeleteAllOnSubmit is good.

  dataContext.BadWords.DeleteAllOnSubmit(
    currentList.Where(item=>currentList.Containts(item.id)).ToList()
  );

Answer 2

You can bind to an array using the Model Binding to a List (Haacked.com Model binding to a list, here you can see how to bind complex types as well).

Although I'm not happy with code where I create elements so I can serialize it in order to bind it to the controllers action input parameter, this code works just what you want:

<script type="text/javascript">
function DeleteWords() { 
var el = $("<form></form>");
//for every selected item create new input element and insert it
//inside of temporarty created form element 
var selItems = $('#BlackList option:selected').each(function(intIndex) {

    //is important how you name input elements (as you can read in link I referenced)
    el.append($('<input/>')
     .attr({ type: "hidden", name: "wordIdsToDelete", value: $(this).val() })
    );
});

//make an ajax call with serialized temporary form
$.ajax({
    type: "POST",
    url: "/YourController/DeleteWord",
    data: $(el).serialize(),
   // error: HandleUnespectedError,
    success: function(response) {
        //handle response    }
});}

Hope this helps...