C# 如何在不使用任何复选框的情况下在datalist中选择多个图像？

我有一个数据表

<asp:DataList ID="dlst1" runat="server" RepeatDirection="Horizontal" RepeatColumns="5"
                                CellSpacing="8">
     <ItemTemplate>
           <asp:ImageButton ID="Image" runat="server" ImageUrl='<%#"~/Controls/handler1.ashx?FileName=" +DataBinder.Eval(Container.DataItem, "FilePath") %>'
                                        OnCommand="Select_Command" CommandArgument='<%# Eval("Id").ToString() +";"+Eval("FilePath")+";"+Eval("Index")+";"+Eval("FileName") %>' />

      </ItemTemplate>
  </asp:DataList>

---

如何选择多个图像

我可能会使用jQuery在客户端选择图像，并在隐藏字段中维护选择。比如说,

<asp:DataList ID="dlstImage" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" CellSpacing="8">
     <ItemTemplate>
           <img class="selImg" alt='<%# Eval("Id") %>' src='<%# ResolveUrl("~/Controls/ShowImage.ashx?FileName=") + Eval("FilePath") %>' />

      ...   
      </ItemTemplate>
</asp:DataList>
<input runat="server" id="imageSelection" />

' />
...   

与下面的JS一起使用

$(document).ready(function() {
   var store = $('#<%= imageSelection.ClientID %>');
   var selection = store.val().length > 0 ? store.val().split(",") : [];
   var images = $('.selImg');
   // Set the selection
   images.each(function() {
     var id = $(this).attr('alt');
     if (jQuery.inArray(id, selection) >= 0) {
        $(this).addClass('selected'); // selected CSS class will decide UI for selected image
     }
   });

   // add click handler
   images.click(function() {
     $(this).toggleClass('selected'); // toggle selection UI
     // modify selection
     selection = [];
     images.find('.selected').each(function() {
       selection.push($(this).attr('alt'));
     });
     // update the store
     store.val(selection.join(","));
   });
});

$（文档）.ready（函数（）{
变量存储=$（“#”）；
var selection=store.val（）.length>0？store.val（）.split（“，”）：[]；
变量图像=$（'.selImg'）；
//设置选择
images.each（函数（）{
var id=$（this.attr（'alt'）；
if（jQuery.inArray（id，selection）>=0）{
$（this）.addClass（'selected'）；//选定的CSS类将决定选定图像的UI
}
});
//添加单击处理程序
图像。单击（函数（）{
$（this）.toggleClass（'selected'）；//切换选择UI
//修改选择
选择=[]；
images.find（'.selected'）.each（函数（）{
selection.push（$（this.attr（'alt'））；
});
//更新商店
store.val（selection.join（“，”）；
});
});

---

这是一个基本的（未经测试的）代码，应该让您开始。您可以尝试许多改进-例如，在图像配置单元上设置焦点矩形，添加键盘支持，使用html5数据属性来存储id而不是alt属性等。

对于选择一个图像，我使用受保护的void Select_命令（对象发送器，CommandEventArgs e）借助于此，我可以选择一个图像，但我想选择多个图像如何在同一个受保护的void select_命令（objectsender，CommandEventArgs e）上执行此操作command@Rocky，正如我在回答中所说的，在我看来，客户端选择是最好的解决方案（它避免了发回，也避免了重复）。上述解决方案不支持多选择。对于服务器端解决方案，您需要在视图状态中保留选择，在select命令代码中，您需要修改存储在视图状态中的选择，并在项数据绑定事件中，使用选择设置选定图像的样式。