ASP.Net Repeater With Bootstrap 3 模式确认删除

Question

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

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

我试图拼凑解决方案，但我的 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>

当我点击删除按钮时，出现 bootstrap 模式。在 "Cancel" 按钮上，模式关闭。在 "Delete" 按钮上，模式也会关闭，但我的 gridview 项目命令永远不会触发。

如有任何帮助，我将不胜感激。

非常感谢您！

Answer 1

首先，我看到一些 UpdatePanel 的标记，我认为没有必要。一般来说，当涉及到 UpdatePanels 时，最好先让事情正常运行，然后在确实需要时再实施它们。

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

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

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

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

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

OnClientClick="return ConfirmDelete()"

称之为：

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

，因为对 .modal() 的调用是异步的，导致它立即 return，所以 ConfirmDelete() 退出并且 returns false，这很好，因为它阻止了回发并允许显示模态。否则页面将回发，您将永远看不到模态。

现在，在这一点上，因为 ConfirmDelete() 已经 returned，你现在处于转发器的世界之外。因此，您要做的一件事就是将与激活模态的转发器行关联的唯一键数据传递给模态，以便在确认后删除相应的记录。

单击 btnDeleteImage 后，它会在您的代码后面导致回发到 btnDeleteImage_Click。这是您添加代码以删除相应记录的地方。

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

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

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

NB: ClientIDMode="Static" prevents the id from getting name mangled so it can be referenced as expected in client side js code.

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

This is VB, if you use C# it should be similar.

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() 但事实并非如此这是如何工作的。

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

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

Answer 2

与@fnostro 的出色回答和解释类似，我想分享一下我为使其正常工作所做的具体工作。

中继器 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 模态标签，位于中继器正下方。

<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

ASP.Net Repeater With Bootstrap 3 模式确认删除

ASP.Net Repeater With Bootstrap 3 Modal Confirmation On Delete

.net

asprepeater

twitter-bootstrap