使用asp.net mvc中的foreach动态创建复选框

时间:2012-01-11 06:40:57

标签: javascript asp.net-mvc model-view-controller foreach checkboxlist

我有列表页面显示所有图像的名称来自数据库中的asp.net mvc list action(PhotoList - get)..在该视图页面(PhotoList.aspx)中,我创建了复选框以删除多行。我想要像下面这样的场景

第一页显示第一列中的列表复选框和第二列PhotoName,下页显示删除所选行的一个按钮。 当选中复选框并单击删除按钮时,根据选择,行将从数据库中删除并返回相同的列表页面。

我不明白在哪里编写删除代码以及如何编写?

它紧急帮助我..

<% 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"/>      

2 个答案:

答案 0 :(得分:0)

删除代码将写入HttpPost操作中以进行删除。如果您使用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();
}

<强>更新

您首先需要制作一个ViewModel,否则您无法通过复选框识别哪些条目被检查删除。

创建一个ViewMode类,如下所示

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

将此视图返回到您的视图

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

在“视图”中,更改using语句以反映IEnumerable<MyPhotoViewModel>并相应地进行相应更改。

然后,定义您的帖子操作,如下所示

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

答案 1 :(得分:0)

使用jQuery可以做到这一点。

点击按钮,点击所有照片ID,如下所示

  var selected = new Array();
  $('name="deleteImage" input:checked').each(function () {
      selected.push($(this).attr('id')));
  });
  var selectedIds = selected.join(',');

现在点击按钮,对服务器端的某个功能进行ajax调用,该功能将接受这些ID,并将从DB中删除。

 $.ajax({
    url: '@Url.Action("DeleteRecord", "UserManage")',
    data: 'ids=' + selectedIds + '&time=' + new Date(), //Date makes each call unique
    success: function (data) {
        //You can reload page
    },
    error: function (data) { 
        //You can show error
    }
 });

希望这有帮助。