Question

我花了一整天努力实现这一目标，但却失败了。

我的页面上有一个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 Pop-up的代码：

<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项目命令永远不会触发。

我会永远感激任何帮助。

非常感谢你！

Answer 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（）操作，你必须覆盖这些托管参数，这是一个不好习惯。

因此，您需要编写一个自定义删除功能，该功能会对正确的密钥信息起作用。

Answer 2

类似于@fnostro很好的答案和解释，我想分享我为使它起作用而所做的确切工作。

Repeater HTML Tag，其中包含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

ASP.Net中继器与Bootstrap 3模式确认删除

2 个答案: