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

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

and

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

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

Answer 2

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

Answer 3

Hy,
First you should used Jquery Dialog,it's more cooler.
More info here:

http://www.jqueryui.com/demos/dialog/

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

<div class="Popup"></div>

<script>
    function ConfirmDelete(doPostback) {
        $(".Popup").dialog(){ /* threat the dialog result */ };
        if(confirm)
           doPostback;
        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 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 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(...)

This is a javascript method wich you could excute esally,and you have full control of the postbacks.

---

I not posted the full solution beacause in one hand only you know what you need to implement,and for the other hand i wanted to let you having as much fun as i have. :)
This solution is working, i tested it.

Have fun!

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

Answer 4

...

function ConfirmDelete() { return confirm("Delete this record?"); }

Answer 5

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.