带有Bootstrap 3模态确认的ASP.Net中继器在删除时 [英] ASP.Net Repeater With Bootstrap 3 Modal Confirmation On Delete

问题描述

我花了一整天的时间来实现这一目标，但是失败了.

I have spent all day trying to achieve this but have failed spectacularly.

我的页面上有一个ASP.Net中继器，并添加了一个LinkBut​​ton，该按钮会弹出一个漂亮的Bootstrap 3确认模式窗口(用于删除记录).

I have an ASP.Net repeater on my page and have added a LinkButton which pops open a beautiful Bootstrap 3 confirmation modal window (for deletion of a record).

我曾尝试将各种解决方案拼凑在一起，但是我的Java知识使我失望了.

I have tried to cobble together solutions but my Java knowledge is failing me.

这是我的中继器:

<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脚本:

This is my Java Script at the top of the page:

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

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

This is the code of my 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项目命令从不触发.

When I click the delete button, the bootstrap modal appears. On the "Cancel" button, the modal closes. On the "Delete" button, the modal also closes but my gridview item command never fires.

我将永远感谢您的帮助.

I would be eternally grateful for any help.

非常感谢您！

推荐答案

首先，我看到了UpdatePanel的一些标记，我认为这不是必需的.一般来说，谈到UpdatePanels时，最好先使工作正常，然后在真正需要时再实施它们.

First, I see some markup for an UpdatePanel which I don't believe is necessary. Generally speaking, when it comes to UpdatePanels it's better to get things working first and then implement them later if truly needed.

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

So, in looking at this more closely I want to make sure you understand the difference between a synchronous call versus an asynchronous call.

如果您利用内置的js confirm()模态模式，一切将按预期进行:

If you took advantage of the built in js confirm() modal things would work as expected:

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

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

This works because the built-in confirm() function is synchronous, meaning it waits for a user response before returning.

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

However, Bootstrap modals are asynchronous which means this:

OnClientClick="return ConfirmDelete()"

称之为:

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

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

which, because the call to .modal() is asynchronous causes it to return immediately and so ConfirmDelete() exits and returns false, which is good because it prevents the postback and allows the modal to be displayed. Otherwise the page would postback and you'd never see the modal.

现在，由于ConfirmDelete()已经返回，因此您现在不在中继器的范围之内.因此，您要做的一件事就是将与激活该模式的转发器行关联的唯一键数据传递给模式，以便在确认后删除适当的记录.

Now, at this point, because ConfirmDelete() has already returned, you are now outside the world of the repeater. So the one thing you have to do is pass to the modal the unique key data associated with the repeater row that activated the modal such that on confirmation you delete the appropriate record.

一旦单击btnDeleteImage，它将在后面的代码中导致回发到btnDeleteImage_Click.在此处添加代码以删除相应的记录.

Once you click btnDeleteImage it's going to cause a postback to btnDeleteImage_Click in your code behind. This is where you add the code to delete the appropriate record.

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

How do you pass along that key data? One possibility is to fill one or more HiddenField that are referenced on postback. Hidden fields are a good way to pass data between Client side and Server side code.

因此，假设您将其添加到.aspx页面:

so let's say you add this to your .aspx page:

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

注意:ClientIDMode="Static"防止对id进行名称修改，以便可以在客户端js代码中按预期引用该ID.

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

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

So then in the ItemDataBound event you can build the OnClientClick function call programmatically where you pass key data as a parameter:

这是VB，如果您使用C#，则应该类似.

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确认删除时，将导致回发并调用按钮Click事件btnDeleteImage_Click，您可以在其中访问隐藏的字段:

Then when the user confirms delete by clicking btnDeleteImage this will cause a postback and calls the buttons Click event btnDeleteImage_Click where you can access the hidden field:

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()，但这并不是应该的.

For the record you could make a call to the repeaters DataSource Delete operation, but you would need to fill the parameters and then call DataSource.delete() but that's not really how this is suppose to work.

删除/更新/插入操作旨在供该控件使用，它会自动管理参数.调用这样的delete()操作(其中您必须重写那些托管参数)是一种不好的习惯.

Delete/Update/Insert operations defined in a server control datasource are intended for use by that control, it automatically manages the parameters. To call delete() operations like this, where you have to override those managed parameters, is a bad habit to get into.

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

So you need to write a custom delete function which acts on the correct key information.

这篇关于带有Bootstrap 3模态确认的ASP.Net中继器在删除时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！