javascript - JQuery DIalog and ASP.NET Repeater

Question

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

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.

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.

Suggestions ?

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

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

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

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.

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

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