带有 Bootstrap 3 模式确认删除的 ASP.Net 中继器答案

【问题标题】：ASP.Net Repeater With Bootstrap 3 Modal Confirmation On Delete带有 Bootstrap 3 模式确认删除的 ASP.Net 中继器
【发布时间】：2018-06-01 16:58:42
【问题描述】：

我花了一整天的时间试图实现这一目标，但失败了。

我的页面上有一个 ASP.Net 中继器，并添加了一个 LinkButton，它会弹出一个漂亮的 Bootstrap 3 确认模式窗口（用于删除记录）。

我试图拼凑解决方案，但我的 Java 知识令我失望。

这是我的中继器：

<asp:Repeater OnItemCommand="rptImages_ItemCommand" ID="rptImages" OnItemCreated="rptImages_ItemCreated" OnItemDataBound="rptImages_ItemDataBound" runat="server">
                                    <HeaderTemplate>
                                    </HeaderTemplate>
                                    <ItemTemplate>

                                        <asp:Image ID="imgThumb" CssClass="product-image" runat="server" ImageUrl='<%# string.Format("~/{0}", Eval("ImageUrl")) %>' />

                                        <asp:LinkButton ID="lbDelete" runat="server" CommandArgument='<%#Eval("ProductImageId")%>' CommandName="delete" data-toggle="tooltip" data-placement="top" title="Delete this record" OnClientClick="return ConfirmDelete()"><i class="image-button fa fa-trash"></i></asp:LinkButton>

                                    </ItemTemplate>
                                    <FooterTemplate>
                                    </FooterTemplate>
                                </asp:Repeater>

这是我在页面顶部的 Java 脚本：

<script>
    function ConfirmDelete() {
        $('#DeleteModal').modal(); // initialized with defaults
        // $('#DeleteModal').modal({ keyboard: false })   // initialized with no keyboard
        // $('#DeleteModal').modal('show')
        return false;
    }
</script>

这是我的 Bootstrap 弹出窗口的代码：

<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="H3">Delete this record?</h4>
                    </div>
                    <asp:UpdatePanel ID="upDel" runat="server">

                <ContentTemplate>
                    <div class="modal-body">
                        Are you sure you want to delete this image?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <asp:Button ID="btnDeleteImage" runat="server" OnClick="btnDeleteImage_Click" CssClass="btn btn-danger" Text="Delete" />
                    </div>
                    </ContentTemplate>

                <Triggers>

                    <asp:AsyncPostBackTrigger  ControlID="btnDeleteImage" EventName="Click" />

                </Triggers>

            </asp:UpdatePanel>
                </div>
            </div>
        </div>

当我单击删除按钮时，会出现引导模式。在“取消”按钮上，模式关闭。在“删除”按钮上，模式也会关闭，但我的 gridview item 命令永远不会触发。

如果有任何帮助，我将永远感激不尽。

非常感谢您！

【问题讨论】：

btnDeleteImage_Click 事件应该触发，在后面的代码中处理删除。也可以考虑btnDeleteImage_Command
您好 fnostro，抱歉，您能详细说明一下吗？谢谢！
模态不是中继器的一部分，而是由中继器中的按钮触发的。当转发器被渲染时，它对模态一无所知。单击模态删除按钮应该触发按钮 Click 或 Command 事件，而不是中继器 ItemCommand 事件
您好 fnostro，非常感谢您的回复。不幸的是，我仍然有点困惑。我将如何获得模式中的按钮来触发中继器的行命令事件？甚至可能吗？谢谢！
我将把我的想法变成一个答案，我们超出了这个评论部分的范围:)

标签： .net twitter-bootstrap asprepeater

【解决方案1】：

首先，我看到UpdatePanel 的一些标记，我认为这是不必要的。一般来说，当涉及到UpdatePanels 时，最好先让事情工作，然后在真正需要时再实施。

因此，在更仔细地研究这一点时，我想确保您了解同步调用与异步调用之间的区别。

如果您利用内置的 js confirm() 模态，事情将按预期工作：

OnClientClick="return window.confirm('Are you sure you want to delete this image')"

这是因为内置的 confirm() 函数是同步的，这意味着它会在返回之前等待用户响应。

但是，Bootstrap 模式是异步的，这意味着：

OnClientClick="return ConfirmDelete()"

称之为：

function ConfirmDelete() 
{
  $('#DeleteModal').modal(); // initialized with defaults
  return false;
}

其中，因为对.modal() 的调用是异步的，所以它会立即返回，所以ConfirmDelete() 退出并返回false，这很好，因为它可以防止回发并允许显示模式。否则页面会回发，您将永远看不到模式。

现在，此时，因为ConfirmDelete() 已经返回，您现在处于中继器的世界之外。因此，您要做的一件事是将与激活模式的中继器行关联的唯一键数据传递给模式，以便在确认时删除相应的记录。

一旦您单击btnDeleteImage，它就会在您的代码中回发到btnDeleteImage_Click。这是您添加代码以删除相应记录的位置。

您如何传递这些关键数据？一种可能性是填写回发时引用的一个或多个HiddenField。隐藏字段是在客户端和服务器端代码之间传递数据的好方法。

假设您将其添加到您的 .aspx 页面：

<asp:HiddenField ID="hfDeleteParameter1" runat="server" ClientIDMode="Static" />

注意：ClientIDMode="Static" 可防止 id 名称混乱，因此可以在客户端 js 代码中按预期引用。

那么在 ItemDataBound 事件中，您可以通过编程方式构建OnClientClick 函数调用，您可以在其中将关键数据作为参数传递：

这是VB，如果你用C#应该是类似的。

Private Sub rptImages_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptImages.ItemDataBound
    If e.Item.ItemType = ListItemType.Item Or 
       e.Item.ItemType = ListItemType.AlternatingItem Then
         Dim lb As LinkButton = e.Item.FindControl("lbDelete")
         lb.OnClientClick = String.Format("return ConfirmDelete('{0}');",
                            row_specific_key_data)
    End If
End Sub

在js中：

function ConfirmDelete(rowData) {
    $('#hfDeleteParameter1').val( rowData );
    $('#DeleteModal').modal(); // initialized with defaults
    return false;
}

然后当用户通过单击btnDeleteImage 确认删除时，这将导致回发并调用按钮单击事件btnDeleteImage_Click，您可以在其中访问隐藏字段：

Private Sub btnDeleteImage_Click(sender As Object, e As EventArgs) Handles btnCustomLookback.Click
    dim keydata as string = hfDeleteParameter1.value

    // do delete 
End Sub

这是众多选择之一。

作为记录，您可以调用中继器的 DataSource Delete 操作，但您需要填写参数，然后调用 DataSource.delete()，但这并不是真正假设的工作方式。

在服务器控件数据源中定义的删除/更新/插入操作旨在供该控件使用，它会自动管理参数。像这样调用 delete() 操作，你必须覆盖那些托管参数，这是一个不好的习惯。

所以你需要编写一个自定义的删除函数，它作用于正确的关键信息。

【讨论】：

亲爱的 fnostro，感谢您抽出宝贵的时间回复。这确实是一个完美的工作解决方案，你非常清楚地解释了一切。我从这篇文章中学到了更多的知识。我要提到的一件事是，万一其他人看到这篇文章，Java 函数（rowData 与 rowdata）中有一个类型会引发错误。不过很容易上手。再次，非常感谢。
并不奇怪，因为我没有测试任何代码，只是试图解释概念。我会编辑错字:)

【解决方案2】：

与@fnostro 很好的答案和解释类似，我想分享一下我为使其正常工作所做的工作。

Repeater HTML 标记，其中包含 ASP:LinkButton（用于删除）

<asp:Repeater runat="server"> 
  <HeaderTemplate>
  </HeaderTemplate>
  <ItemTemplate>
  <asp:Image ID="imgThumb" CssClass="product-image" runat="server" ImageUrl='<%# string.Format("~/{0}", Eval("ImageUrl")) %>' />
  <asp:LinkButton ID="lbDelete" runat="server" data-imageid='<%# Eval("ProductImageId")%>' OnClientClick="return ConfirmDelete(this)"><i class="image-button fa fa-trash"></i></asp:LinkButton> 
  </ItemTemplate>
  <FooterTemplate>
  </FooterTemplate> 
</asp:Repeater>

JavaScript 代码，将 HTML5 参数传递给 ASP:HiddenField 并将值传递给模式。

 <script type="text/javascript">
        //Confirm Record Deletion
        function ConfirmDelete(cnt) {
            var doc = document.getElementById("<%= myHiddenField.ClientID%>");
            doc.value = cnt.getAttribute("data-imageid");
            var itemRef = document.getElementById("currentItem");
            itemRef.innerHTML = doc.value
            $('#DeleteModal').modal('show'); // initialized with defaults
            return false;
        }
</script>

ASP:HiddenField 应包含参考数据（放置在中继器之外）。

<asp:HiddenField ID="myHiddenField" runat="server" ClientIDMode="Static" />

Bootstrap Modal 标签，放置在中继器的正下方。

<div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="myModalTitle">Confirm Delete</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
               </button>
        </div>
        <div class="modal-body">Please confirm that you want to delete this Image with ID (<strong><span id="currentItem"></span></strong>) ?
        </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <asp:Button ID="btnDelete" runat="server" CssClass="btn btn-danger" Text="Delete" />
       </div>
    </div>

删除按钮的代码隐藏。

Private Sub btnDelete_Click(sender As Object, e As EventArgs) Handles btnDelete.Click
        //My delete procedure
        //To access your ImageID stored in the HiddenField, use.
        //myHiddenField.Value
End Sub

【讨论】：