JQuery对话框和ASP。网络中继器

I have an ASP.NET repeater that shows a list of items with a delete LinkButton.

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

I want to setup the Delete LinkButtons to show a JQuery Dialog for a confirmation. If the "OK" button is clicked, I want to do the postback.

我想设置Delete LinkButtons，以显示一个JQuery对话框进行确认。如果点击“OK”按钮，我想做回发。

The obvious problem is that each LinkButton in the repeater will have it's own ID and I don't want to have to duplicate all the javascript for the dialog.

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

Suggestions ?

建议吗?

6 个解决方案

#1

The solution is not so simple. You must have the ability to call the original callback function after pressing the Ok button of jQuery UI Dialog.

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

First you need a generalized js function for showing the dialog:

首先需要一个通用的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" 
        } 
    });
}

I supposed the presence of a div like

我想是有一个div

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

On c# code-behind you have to register the previous client function, passing the original asp.net callbackFunction of your control as parameter (I generalized):

在c#代码后面，您必须注册之前的客户端函数，将您的控件的原始asp.net callbackFunction作为参数(我推广):

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

Through the method GetPostBackEventReference you have the ability to retrieve the postback function that asp.net assign to the control.

通过GetPostBackEventReference方法，您可以检索asp.net分配给控件的postback函数。

Now, on Repeater ItemDataBound, retrieve the control that execute the delete and pass it to this function:

现在，在Repeater ItemDataBound上，检索执行delete的控件并将其传递给这个函数:

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

and the code:

和代码:

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

I hope this helps.

我希望这可以帮助。

#2

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

and

和

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

That will allow you to work with all the link buttons simultaneously.

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

#3

You can make it like this:

你可以这样做:

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

or i think you could also make it like this:

或者我认为你也可以这样写:

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

in the ConfirmDelete Method, you can define your jQuery Confirm dialog

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

#4

The question is definitely answered by tanathos, but I have another option working that avoids scripting in the code-behind if you are so inclined. I just hid the asp delete button using display:none and added a delete button that invokes the confirmation dialog and clicks the hidden asp delete button if the delete is confirmed.

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

The HTML in the repeater:

中继器中的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>

The CSS:

CSS:

.delete-button 
{
    display: none;
}

The javascript:

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

#5

Hy,
First you should use Jquery Dialog or other clienside dialogs, it's more cooler.

Hy，首先你应该使用Jquery对话框或其他的clienside对话框，它更酷。

You should have an html element on the page to invoke the Jquery dialog popup.

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

On the part where i put the comented sentence you can put code to handle the dialog result. You could find info from the link above.

在我写这句话的部分，你可以用代码来处理对话结果。你可以从上面的链接中找到信息。

The function is returning false and because of that it blocks the execution of the server side code (the async postback).
The Button should look like:

该函数返回false，因为它阻塞了服务器端代码(async postback)的执行。按钮应如下所示:

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

On the CommandArgument property i set the id of the item wich are binded to the repeater.
In this way on the btnConfirm_Click event you have acces to this paramater

在征用财产上，我将条目的id设置为与中继器绑定。这样，在btnConfirm_Click事件上，您就有了这个参数

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

You should have on the code behind:

你应该把密码写在后面:

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

This function is invoked on the binding of the element and returning the current controls postback method wich will look like __doPostback(source, param)

This is a javascript method wich you could excute easilly,and you have full control of the postbacks. On clientside you can decide whether or not to call this postback event.

这个函数在元素的绑定上调用，返回当前控件的回发方法，它看起来像__doPostback(source, param)这是一个javascript方法，您可以很容易地执行它，并且您可以完全控制回发。在客户端，您可以决定是否调用此回发事件。

---

PS: If something is unclear post here a question and i will update the answer.

PS:如果有什么不清楚的问题，我将更新答案。

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