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 ?

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 ?

• asp.net
• javascript
• jquery

6 Answers 6

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.

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

and

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

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

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

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.

The HTML in the repeater:

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

.delete-button 
{
    display: none;
}

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

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

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

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

<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

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.

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

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