JQuery对话框和ASP.NET Repeater

Question

我有一个显示项目列表并带有删除LinkButton的ASP.NET Repeater。

我想设置Delete LinkButtons以显示JQuery对话框进行确认。如果单击“确定”按钮，我想要进行重新提交。

明显的问题是，重复器中的每个LinkButton都将具有其自己的ID，而我不想复制对话框的所有Javascript代码。

建议？

- ctorx

Answer 1

解决方案并不简单。在按下jQuery UI对话框的“确定”按钮后，您必须具有调用原始回调函数的能力。

首先，您需要一个通用的js函数来显示对话框：

function showConfirmRequest(callBackFunction, title, content) 
{
    $("#divConfirm").html(content).dialog({
        autoOpen: true,
        modal: true, 
        title: title,
        draggable: true,
        resizable: false,
        close: function(event, ui) { $(this).dialog("destroy"); },
        buttons: { 
            'Ok': function() { callBackFunction(); },
            'Cancel': function() {
                $(this).dialog("destroy");
            }
        },
        overlay: { 
            opacity: 0.45, 
            background: "black" 
        } 
    });
}

我假设有一个类似于以下的 div 元素：

<div id="divConfirm"></div>

在C#的代码后台，您需要注册以前的客户端函数，并将原始的asp.net回调函数作为参数传递给控件（我进行了概括）：

protected void AddConfirmRequest(WebControl control, string title, string message) 
{
    string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);
    string function = String.Format("javascript:showConfirmRequest(function() {{ {0} }}, '{1}', '{2}'); return false;", 
                                     postBackReference,
                                     title,
                                     message);
    control.Attributes.Add("onclick", function);
}

通过使用GetPostBackEventReference方法，您可以检索由ASP.NET分配给控件的回发函数。

现在，在Repeater ItemDataBound事件中，检索执行删除操作的控件并将其传递给此函数：

<asp:Repeater ID="repeater" runat="server" OnItemDataBound="repeater_OnItemDataBound">
    ...
    <ItemTemplate>
        ...
        <asp:Button ID="btnDelete" runat="server" Text="Delete" />
        ...
    </ItemTemplate>
</asp:Repeater>

代码如下：

protected void repeater_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        WebControl btnDelete = ((WebControl)e.Item.FindControl("btnDelete"));
        AddConfirmRequest(btnDelete, "Confirm delete", "Are you sure? Really???");
    }
}

我希望这能有所帮助。

- tanathos

---

优秀的回答，比我的回答更易懂和更清晰！ - Zoltan Veres

谢谢，我已经尽可能地进行了概括。我正在努力将解决方案放在自定义控件上，覆盖实际的asp:Button。 - tanathos

很棒的代码和示例。我想确认我使用了它，而且它运行良好。谢谢！ - Mausimo

感谢您的反馈。 - tanathos

Answer 2

<asp:GridView ... CssClass="mygridview"></asp:GridView>

并且

$('table.mygridview td a').whatever()

这将使您能够同时处理所有链接按钮。

- recursive

Answer 3

你可以这样做：

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        ...
        <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
    </ItemTemplate>
</asp:Repeater>

<script>
    function ConfirmDelete() {
        return confirm("Delete this record?");
    }
</script>

或者我认为你也可以这样做：

<script>
    $(function() {
        $(".button").click(function() {
            return confirm("Delete this record?");
        });
    });
</script>

在ConfirmDelete方法中，你可以定义你的jQuery确认对话框。

- k0ni

---

这不是问题的关键。 我认为他可以独立完成这部分。;) - k0ni

是啊，但你也没有使用它，也没有回答问题。 - Zoltan Veres

不，我不同意... 这个答案比被接受的那个更加优雅... 如果你想要一个对话框，就添加一个对话框... 这个答案是一个更加优雅的解决方案。 - Rikon

Answer 4

问题肯定已经被tanathos回答了，但如果您愿意避免在代码后台中编写脚本，我有另一个可行的选项。我只是使用display:none隐藏了asp删除按钮，并添加了一个删除按钮，调用确认对话框并在确认删除后单击隐藏的asp删除按钮。

重复器中的HTML：

<ItemTemplate>
...
<td>
    <a href="#" class="dummy-delete-button">Delete</a>
    <asp:Button ID="DeletePolicyButton" runat="server" OnCommand="OnDeleteCommand" CommandArgument="Argument" Text="Delete" CssClass="delete-button" />
</td>
...
</ItemTemplate>

CSS：

.delete-button 
{
    display: none;
}

JavaScript：

// make the dummy button look like a button
$("a.dummy-delete-button").button({
    icons: {
        primary: "ui-icon-trash"
    }
});

// create the dialog
var deleteDialog = $('<div>Are you sure you want to remove this policy?</div>')
    .dialog({
        autoOpen: false,
        modal: true,
        title: 'Delete Policy'
    });

// handle click event to dummy button
$("a.dummy-delete-button").click(function (e) {
    // don't follow the href of the dummy button
    e.preventDefault();
    // get a reference to the real ASP delete button
    var button = $(this).closest('td').find('.dummy-delete-button');
    deleteDialog.dialog({
        buttons: {
            // handle delete. Note: have to defer actual button click until after close
            // because we can't click the button while the modal dialog is open.
            "Delete": function () { deleteDialog.bind("dialogclose", function () { button.click() }); $(this).dialog("close"); },
            // handle close
            "Cancel": function () { $(this).dialog("close"); }
        }
    });

    deleteDialog.dialog("open");
});

- MichaC

Answer 5

嗨，
首先，您应该使用Jquery Dialog或其他客户端对话框，这更酷。

您应该在页面上有一个HTML元素来调用Jquery对话框弹出窗口。

<div class="Popup"></div>

<script>
    var confirm = false;
    function ConfirmDelete(doPostback) {
        $(".Popup").dialog(){ /* threat the dialog result , set confirm variable */ };
        if(confirm) {
           __doPostback(); }
        else return false;
    }
</script>

在我放置注释句子的部分，您可以放置处理对话框结果的代码。 您可以从上面的链接中找到信息。

该函数返回false，因此阻止了服务器端代码（异步回发）的执行。
按钮应该看起来像：

<asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
    <asp:LinkButton OnClientClick="ConirmDelete(<#%GetPostbackReference()%>)" CommandArgument = "<%# DataBinder.Eval(Container.DataItem, "Id") %>" OnClick="btnConfirm_Click" ID="btnConfirm" runat="server"></asp:LinkButton>
    </ItemTemplate>
</asp:Repeater>

在CommandArgument属性中，我设置了绑定到重复器的项目的ID。
这样，在btnConfirm_Click事件中，您就可以访问此参数。

void btnConfirm_Click(object sender, CommandEventArgs e)
{
   e.CommandArgument -> you will find the id an you can execute the delete
}

在代码后台应该有：

protected string GetPostbackReference()
{    
return Page.ClientScript.GetPostBackEventReference(btnConfirm, null);
}

该函数在元素绑定时被调用，并返回当前控件的回传方法，其形式类似于__doPostback(source, param)

这是一个JavaScript方法，您可以轻松执行它，并完全控制回传。 在客户端，您可以决定是否调用此回传事件。

---

提示：如果有任何不清楚的地方，请在此发表问题，我会更新答案。

- Zoltan Veres

Answer 6

<asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
...
                <asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
            </ItemTemplate>
        </asp:Repeater>
<script>
        function ConfirmDelete() {
            return confirm("Delete this record?");
        }
</script>

- user191019

---

您好，我尝试了一种逻辑并编写了代码。请尝试使用它。 - user191019