Search code examples
javascriptasp.net-mvcmodel-view-controllerforeachcheckboxlist

Dynamic created checkbox using foreach in asp.net mvc


I have list page to show all images with its name from database in asp.net mvc list action (PhotoList - get).. in that view page (PhotoList.aspx), I have created checkbox to delete multiple rows. I want scenario like following

First page shows the list with in first column checkbox and in second column PhotoName and on the down page one button for delete selected rows . when selects checkboxes and clicks the delete button, according to selection the rows will be deleted from database and return the same list page..

I don't understand where to write code for delete and how?

<% foreach (var item in Model) { %>
    <tr>
        <td>
             <input type="checkbox" name="deleteImage" value="<%= item.PhotoId %>"/>
        </td>
        <td>
            <%= Html.ActionLink("Edit", "Edit", new { id=item.PhotoId }) %> 
        </td>
        <td>
            <%= Html.Encode(item.PhotoName) %>
        </td>
    </tr>
<% } %>
<input type="button" name="Delete" value="Delete Selected items"/>      

Solution

  • The Code for delete will be written in the HttpPost action for delete. Something like below should work if you are using myModel

    [HttpPost]
    public ActionResult Delete(myModel deleteEntries) //This is the post-version of your Action that rendered the view..If it's Edit, then change the name to Edit
    {
        var deleteList = db.deleteEntries.where(d => d.checkBox == true).ToList();
        foreach (myList my in deleteList)
        {
            db.myList.Remove(my); // remember db should be your DbContext instace
        }
        db.SaveChanges();
    }
    

    UPDATE

    You will first need to make a ViewModel because otherwise you cannot recognize which entries are checked for deletion with the help of checkbox.

    Make a ViewMode class like following

    using pratice3.Models; 
    public class MyPhotoViewModel
    {
        public UserManagementDbEntities.tblPhoto TablePhoto { get; set; }
        public bool checkBox { get; set; }
    }
    

    Return this to your view

    [AcceptVerbs(HttpVerbs.Get)] 
    public ActionResult PhotosList() 
    {
        var viewModel = _datamodel.tblPhoto.Select(g => new MyPhotoViewModel
                                       {
                                           TablePhoto = g;
                                           checkBox = false;
                                       }).ToList();      
        return View(viewModel); 
    }
    

    In View, change the using statement to reflect IEnumerable<MyPhotoViewModel> and make appropriate changes accordingly.

    Then, define your Post Action like following

    [HttpPost]
    public ActionResult PhotosList(IEnumerable<MyPhotoViewModel> myPhotoList) 
    {
        var deleteList = myPhotoList.where(d => d.checkBox == true).ToList();
        foreach (var deletePhoto in deleteList)
        {
            _datamodel.tblPhoto.DeleteObject(deletePhoto.TablePhoto); 
        }
        db.SaveChanges();
    }