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:

Click to copy

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

Click to copy

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

Click to copy

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:

Click to copy

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

and the code:

Click to copy

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.

Answer 2

Click to copy

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

and

Click to copy

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

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