使用JS添加复选框，并在服务器端代码(ASP.NET）中找到它

Adding checkbox with JS, and find it in server side code (ASP.NET)

本文关键字：NET ASP 代码 复选框 添加 JS 服务器端 使用      更新时间：2023-09-26

我正在制作一个页面，从服务器/数据库中检索所有图像，并在页面上显示。为此，我使用AJAX。下面的代码检索一个数组，其中包含对图像的引用和索引。根据这些信息，我排列了图像。我想做的是，给用户删除所选图像的可能性。这些图像应该通过复选框进行选择。我的问题是，我不知道如何添加一个复选框（在图像下面），使其对应于每个图像，并在C#代码中找到选中的值。我需要找到它，因为我必须在数据库中找到检查过的图像并删除它。有人知道怎么做吗？通常，为了在C#代码中找到ID，我们在aspx页面上应用runat="server"，但这次，ID是动态添加的，并使用JS代码。

function loadImage(array, index) { 
    for (i = 0; i < array.length; i++) {
        $("#parentDiv").append("<span style='padding-left: 10px; margin-top: 5px;' id='span_" + i + "'></span>");
        $("#span_" + i + "").append("<img style='width: 100px; height: 90px;' id='img_"+i+"' src='" + array[index] + "' />");
        index++;
    }
}

在这种情况下，我喜欢利用HTML5数据属性(http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-带有数据属性的自定义不可见数据）这允许您将复选框的目标嵌入其标记中。以下内容尚未经过测试，我对您的复选框标记进行了猜测，希望它能给您带来想法。

function loadImage(array, index) { 
    for (i = 0; i < array.length; i++) {
        var imageId = 'img_"+i+"';
        $("#parentDiv").append("<span style='padding-left: 10px; margin-top: 5px;' id='span_" + i + "'></span>");
        $("#span_" + i + "").append("<img style='width: 100px; height: 90px;' id='" + imgeId + "' src='" + array[index] + "' />");
        $("#parentDiv").append('<input type="checkbox" class="imgDelete" name="imgCheck" data-image-target="' + imageId + '">')
        index++;
    }
}

然后你将一个处理程序绑定到你的复选框上，如下所示：

$('imgDelete').click(function(e){
    var idOfImageToDelete = $(this).attr('data-image-target');
    ///Call to web service to delete image
});

您也可以使用jQuery的data（）函数嵌入数据，但我个人更喜欢看到数据被写入元素的标记中，这样我就可以更好地使用我的开发工具包来查看它。

相关文章：