Question

我有转发器从数据库中检索图像，我需要从数据库中选择和删除任何图像的复选框，如何获取复选框ID以告诉我的按钮事件从数据库中删除图像？

我需要复选框ID告诉我的查询删除哪个图像。

我的转发器：

<asp:Repeater ID="RepeaterPersonnel" runat="server">
    <ItemTemplate>
       <td>  <img src="../Handler/GalleryPhoto.ashx?id=<%# DataBinder.Eval(Container, "DataItem.PhotoId")%>&size=178" alt="" class="img-border" /> 
        <input type="checkbox" id= '<%# DataBinder.Eval(Container, "DataItem.PhotoId") %>'/>
      </td>
    </ItemTemplate>
</asp:Repeater>

或者有没有办法用java脚本删除我的图像？

Answer 1

您可以为data-id添加checkbox属性，其中包含照片的实际id：

<input type="checkbox" data-id= '<%# DataBinder.Eval(Container, "DataItem.PhotoId") %>'/>

并在您的javascript中：

function collectPhotos(context) {
    var photos = [];
    context.each(function() {
        photos[photos.length] = $(this).data("id");
    });
    return photos;
}

其中context是您的复选框的选择器，最后您将获得一个包含ID的数组。

你把这个数组发布到服务器上，你应该调用一个方法，该方法应该执行一个delete，它有一个像

这样的过滤器

where id in (<your comma separated list>)

当然，要注意sql注入。

编辑：至于梅森的建议，我添加了一些可能有用的其他信息：

如何从DOM中删除项目：

$(yourSelector).remove();
显示消息：

alert("Checkboxes were removed");

使用AJAX将数组发布到服务器：

$.ajax({
    type: "POST",
    url: yourPage,
    data: {photoIDs: collectPhotos($("#" + parentID + " checkbox"))},
    success: function(response) {
        $(yourSelector).remove();
        alert("Checkboxes were removed");
    }
});

Answer 2

<table>
<tr><th>Id</th><th>Image</th><th>Delete?</th></tr> 
<asp:Repeater ID="RepeaterPersonnel" runat="server">
    <ItemTemplate>
       <tr class="PersonnelRow" data-photoid='<%# (Container.DataItem as WebApplication1.PhotoInfo).PhotoId %>'>
           <td>
               <%# (Container.DataItem as WebApplication1.PhotoInfo).PhotoId %>
           </td>
           <td>
               <img src="../Handler/GalleryPhoto.ashx?id=<%# DataBinder.Eval(Container, "DataItem.PhotoId")%>&size=178" alt="" class="img-border" />
           </td>
           <td> 
               <input type="checkbox" data-photoid='<%# (Container.DataItem as WebApplication1.PhotoInfo).PhotoId %>' class="DeletionCheckbox" />
           </td>
       </tr>
    </ItemTemplate>
</asp:Repeater>
</table>
<button type="button" onclick="ApplyChanges()">Apply Changes</button>

注意我做了一些改动。我将所有元素移动到单独的td中，每个重复的项目现在都有自己的tr。我还添加了一个用于显示照片ID的td，并使用data-属性将其添加到强类型照片ID中。由于它现在是强类型而不依赖于DataBinder.Eval()，如果您更改任何属性名称，它们将自动更新。在运行时断开事件的可能性更小。到目前为止，这应该都是相当直接的。我还添加了一个调用此ApplyChanges() Javascript的按钮。我们来看看......

<script type="text/javascript">
    function ApplyChanges() {
        $(".DeletionCheckbox:Checked").each(function (index, element) {
            $.ajax({
                url: "api/Photos/Delete?photoid=" + $(element).data("photoid"),
                type: "DELETE"
            })
            .done(function () {
                $(".PersonnelRow[data-photoid='" + $(element).data("photoid") + "']").remove();
            })
            .fail(function () {
                alert("Failure deleting photo: " + $(element).data("photoid"));
            });
        });
    }
</script>

首先，脚本会获得一个DeletionCheckbox类的所有元素（但只有在选中它们时才会这样）。它使用jQuery .each()函数迭代这些元素。然后我们使用jQuery AJAX来调用Web API（稍后我会介绍），然后我们通过查询字符串传递photoid。当AJAX调用成功时，我们将获得PersonnelRow类的元素，其中data-photoid匹配已删除元素的photoid，并从中删除该行（及其所有子元素） DOM因此不再显示。我通过调用remove来做到这一点，但是一个时髦的方法就是淡出它，然后删除它。如果AJAX调用失败，我们会显示一条警告消息。

旁注，我在JavaScript中使用jQuery library。如果你不熟悉它，它会使JavaScript变得更加简单。我们可以用“普通”JavaScript完成我所做的事情，但是我们需要更多的代码并且它更难以阅读。还有其他框架也可以让它们变得简单，但jQuery是最受欢迎的框架之一。它也被微软“祝福”并包含在所有默认模板中。如果您之前从未使用过，可以通过在需要它的JavaScript之前放置此脚本标记，将其添加到您的网站。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现在唯一剩下的难题是我们如何处理服务器上的AJAX请求？您需要将Web API library添加到您的应用程序中。然后你需要配置路由（我不会在这里详细说明，但那是covered on Microsoft's site。）然后你将在应用程序中使用以下代码创建一个新的Web API控制器类：

[RoutePrefix("api/Photos")] public class PhotosController : ApiController { [Route("Delete")] public void Delete(string photoid) { //code to delete photo from database } }

我假设您知道如何执行SQL删除命令以从数据库中删除照片，因此我将该实现细节留给您。请注意，我使用了attribute routing，以便我们可以轻松地知道我们应该在JavaScript AJAX调用中指定的URL。

所以这看起来很多（但实际上，这是相当简单的概念），但它比其他解决方案有许多优点。大多数其他答案（Lajos除外）都需要回发到服务器。这会将整个表单发布到服务器，运行页面生命周期，然后要求服务器将页面的全部内容发送回客户端。这只是删除一两张照片的很多。这对客户来说非常慢，因为它需要从服务器发送和接收大量数据。这对服务器也有害，因为它必须做很多额外的处理来处理页面的构建。用户还将看到页面刷新，这可能会令人迷惑。

我的方法（和Lajos'）向服务器发出一个非常小的HTTP删除请求，基本上它唯一传入的是HTTP头（包含URL中的photoid）。这将是非常小的，只有几千字节。服务器不必执行页面生命周期。它只处理delete命令，并使用状态代码为200 OK的非常小的HTTP响应进行回复。使用的带宽非常少，消耗的服务器处理时间/内存非常少。并且用户不会刷新页面，他们只会看到已检查的行消失（如果你想让它看起来更好，jQuery有一个fadeOut()方法）。

Answer 3

因为你想要javascript中的解决方案

添加任何课程，例如单击复选框元素中的chkbox，然后单击保存按钮，单击

使用以下javascript找到复选框

document.querySelectorAll('.chkbox:checked')

然后你可以遍历复选框，在某个地方获取并设置隐藏字段中的值，然后可以在服务器端获取

在Repeater中更改Checkbox ID

3 个答案: