JQuery对话框和ASP.NET Repeater

我有一个ASP.NET中继器，它显示带有删除链接按钮的项目列表

我想设置DeleteLinkButtons以显示JQuery对话框以进行确认。如果单击“确定”按钮，我想进行回发

显而易见的问题是，中继器中的每个LinkButton都有自己的ID，我不想复制对话框中的所有javascript

建议

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

---

这将允许您同时使用所有链接按钮。

您可以这样做：

<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（）{
返回确认（“删除此记录？”）；
}

或者我想你也可以这样做：

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

$（函数（）{
$（“.button”）。单击（函数（）{
返回确认（“删除此记录？”）；
});
});

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

Hy，
首先，您应该使用Jquery对话框或其他clienside对话框，这样更酷。

页面上应该有一个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>

您应该了解代码隐藏：

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

此函数在绑定元素时调用，并返回当前控件回发方法，该方法类似于_udopostback（source，param）

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

---

PS:如果有不清楚的地方，请在此处发布问题，我将更新答案

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

...



函数ConfirmDelete（）{
返回确认（“删除此记录？”）；
}

解决方案并不是那么简单。您必须能够在按下jQueryUI对话框的Ok按钮后调用原始回调函数

首先，您需要一个通用的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 id="divConfirm"></div>

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

---

我希望这会有所帮助。

这个问题肯定由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>

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");
});

//使虚拟按钮看起来像按钮
$（“a.dummy-delete-button”）。按钮({
图标：{
主：“ui图标垃圾”
}
});
//创建对话框
var deleteDialog=$（“确实要删除此策略吗？”）
.对话({
自动打开：错误，
莫代尔：是的，
标题：“删除策略”
});
//将单击事件处理为虚拟按钮
$（“a.dummy-delete-button”）。单击（函数（e）{
//不要跟随虚拟按钮的href
e、 预防默认值（）；
//获取对真实ASP删除按钮的引用
var-button=$（this.closest（'td'）.find（'.dummy-delete-button'）；
deleteDialog.dialog({
按钮：{
//处理删除。注意：必须将实际的按钮单击推迟到关闭后
//因为我们无法在模式对话框打开时单击按钮。
“Delete”：函数（）{deleteDialog.bind（“dialogclose”，函数（）{button.click（）}）；$（this.dialog（“close”）；}，
//把手关上
“取消”：函数（）{$（this）.dialog（“close”）；}
}
});
deleteDialog.dialog（“打开”）；
});

您好，先生，我尝试了一种逻辑，并以代码的形式编写。请尝试使用它。这不是问题所在。我想他不用帮忙就能演这个角色；）是的，但你也不使用它，不回答问题不，我不同意。。。这是一个比公认的更优雅的答案。。。如果需要对话框，请添加对话框。。。这个答案是一个更优雅的解决方案，比我的答案更容易理解，更清晰！谢谢你，我已经尽可能地概括了。我正在将解决方案放在自定义控件上，覆盖实际的asp:ButtonCreat代码和示例。我想确认一下，我用过这个，它工作得很好。谢谢大家!！谢谢你的反馈

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???");
    }
}

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

.delete-button 
{
    display: none;
}

// 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");
});