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

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

我的页面上有一个ASP.Net转发器，并添加了一个链接按钮，弹出一个漂亮的Bootstrap3确认模式窗口（用于删除记录）

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

函数ConfirmDelete（）{
$（'#DeleteModal'）.modal（）；//使用默认值初始化
//$（'#DeleteModal'）.modal（{keyboard:false}）//初始化时没有键盘
//$（'#deleteModel'）.model（'show'））
返回false；
}

这是我的引导弹出窗口的代码：

<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项命令从不激发

我将永远感激任何帮助

---

提前非常感谢

首先，我看到了

UpdatePanel

的一些标记，我认为这是不必要的。一般来说，当涉及到

UpdatePanels

时，最好先让它们工作起来，然后在真正需要时再实现它们

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

如果您利用了内置的js

confirm（）

modal功能，那么一切都会按预期进行：

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

这是因为内置的

confirm（）

函数是同步的，这意味着它在返回之前等待用户响应

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

OnClientClick="return ConfirmDelete()"

称之为：

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

这是因为对

.modal（）

的调用是异步的，导致它立即返回，因此

ConfirmDelete（）

退出并返回false，这是好的，因为它可以防止回发并允许显示模态。否则页面将回发，您将永远看不到模式

 <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>

现在，由于

ConfirmDelete（）

已经返回，您现在已经脱离了中继器的世界。因此，您必须做的一件事是将与激活模式的中继器行相关联的唯一键数据传递给模式，以便在确认后删除相应的记录

---

单击

btnDeleteImage

后，将导致回发到

btnDeleteImage\u单击代码隐藏中的

。这是添加代码以删除相应记录的地方

如何传递关键数据？ 一种可能是填写回发时引用的一个或多个

HiddenField

。隐藏字段是在客户端和服务器端代码之间传递数据的好方法

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

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

在js中：

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

---

然后，当用户通过单击

btnDeleteImage

确认删除时，这将导致回发并调用按钮Click event

btnDeleteImage\u Click

，您可以访问隐藏字段：

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

    // do delete 
End Sub

这是许多选择中的一个

对于记录，您可以调用repeaters DataSource Delete操作，但您需要填充参数，然后调用

DataSource.Delete（）

，但实际情况并非如此

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

---

因此，您需要编写一个自定义的删除函数，该函数根据正确的键信息进行操作。

与@fnostro类似，这是一个非常好的答案和解释，我想与大家分享我为使其正常工作所做的具体工作

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

---

btnDeleteImage\u单击

事件应触发，在代码隐藏中处理删除操作。也可以考虑<代码> BTNDeleTeIGeEX命令嗨FunStruo，对不起，你能详细说明一下吗？非常感谢。模式不是中继器的一部分，而是由中继器内的按钮触发的。渲染中继器时，它对模式一无所知。单击模式删除按钮应触发按钮单击或命令事件，而不是repeater ItemCommand eventHi fnostro，非常感谢您的回复。不幸的是，我还是有点困惑。如何使模式中的按钮触发中继器的row命令事件？有可能吗？非常感谢。我将把我的想法写进一个答案，我们不在这个评论部分的范围之内：）亲爱的fnostro，谢谢你抽出时间回复。这确实是一个完美的工作解决方案，你把一切都解释得非常清楚。我从这篇文章中学到了更多的知识。我想提一件事，以防其他人看到这篇文章，那就是

<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>

 <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 ID="myHiddenField" runat="server" ClientIDMode="Static" />

<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