更改转发器中的复选框 ID

本文关键字：复选框 ID 转发器 | 更新日期: 2023-09-27 18:33:17

>我有中继器从数据库中检索图像，我需要复选框才能选择和从数据库中删除任何图像，如何获取复选框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脚本删除我的图像？

更改转发器中的复选框 ID

您可以在checkbox中添加包含照片实际id的data-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注入。

编辑：至于梅森的建议，我添加一些可能有帮助的额外信息：

  1. 如何从 DOM 中删除项目：

    $(yourSelector).remove();

  2. 显示一条消息：

    alert("Checkboxes were removed");

  3. 使用 AJAX 将阵列发布到服务器：

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

<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。我还添加了一个 td 用于显示照片 ID，并使用 data- 属性洒入强类型照片 ID。由于它现在是强类型并且不依赖于DataBinder.Eval()，如果您更改任何属性名称，它们将自动更新。运行时出现问题的可能性更小。到目前为止，这一切都应该相当简单。我还添加了一个按钮，可以将其称为 Javascript ApplyChanges()。让我们看看...

<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库。如果你不熟悉它，它使JavaScript变得简单得多。我们可以做我用"普通"JavaScript所做的，但是我们需要更多的代码，而且更难阅读。还有其他框架也可以使它们变得容易，但jQuery是最受欢迎的框架之一。它也受到Microsoft的"祝福"，并包含在他们所有的默认模板中。如果您以前从未使用过它，则可以将此脚本标记放在需要它的 JavaScript 之前，将其添加到您的网站。 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现在唯一剩下的难题是如何在服务器上处理 AJAX 请求？需要将 Web API 库添加到应用程序。然后，您需要配置路由(我不会在这里详细介绍，但这在Microsoft的网站上有所介绍。然后，使用以下代码在应用程序中创建新的 Web API 控制器类：

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

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

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

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

因为你想要JavaScript的解决方案

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

使用以下 JavaScript 查找复选框 

document.querySelectorAll('.chkbox:checked')
然后

，您可以遍历复选框，在某处的隐藏字段中获取和设置值，然后可以在服务器端获取

相关文章：