JQuery DIalog e ASP.NET Repeater

Question

Ho un ripetitore ASP.NET che mostra un elenco di elementi con un collegamento Elimina.

Desidero impostare Elimina collegamenti per mostrare una finestra di dialogo JQuery per una conferma. Se si fa clic sul pulsante "OK", voglio fare il postback.

Il problema evidente è che ogni LinkButton nel ripetitore avrà il proprio ID e non voglio dover duplicare tutto il javascript per la finestra di dialogo.

Suggerimenti?

Answer 1

La soluzione non è così semplice. È necessario avere la possibilità di richiamare la funzione di richiamata originale dopo aver premuto il pulsante OK della finestra di dialogo dell'interfaccia utente jQuery.

prima cosa è necessario una funzione js generalizzato per mostrare la finestra di dialogo:

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

ho supposto la presenza di un div come

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

su C# code-behind è necessario registrare il client precedente funzione, passando l'originale asp.net callbackFunction del tuo controllo come parametro (I generalizzato):

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

Tramite il metodo GetPostBackEventReference è possibile recuperare la funzione di postback che asp.net assegna al controllo.

Ora, il ripetitore ItemDataBound, recuperare il controllo che esegue l'eliminazione e passarlo a questa funzione:

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

e il codice:

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

Spero che questo aiuta.

Answer 2

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

e

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

che vi permetterà di lavorare con tutti i pulsanti di collegamento contemporaneamente.

Answer 3

Si può fare in questo modo:

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

o Penso che si potrebbe anche fare in questo modo:

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

nel metodo ConfirmDelete, è possibile definire il jQuery Conferma dialogo

Answer 4

Hy,
Per prima cosa dovresti usare la finestra di dialogo di Jquery o altre finestre di dialogo del clienside, è più interessante.

Si dovrebbe avere un elemento html nella pagina per richiamare il popup della finestra di dialogo di 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> 

Nella parte in cui ho messo la frase commentato si può mettere il codice per gestire il risultato finestra di dialogo. Puoi trovare informazioni dal link sopra.

La funzione restituisce false e per questo blocca l'esecuzione del codice lato server (il postback asincrono).
Il pulsante dovrebbe essere simile:

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

Sulla proprietà CommandArgument ho impostato l'id del wich voce sono binded al ripetitore.
In questo modo sul btnConfirm_Click caso in cui avete accesso a questo paramater

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

si dovrebbe avere sul codice dietro:

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

Questa funzione viene richiamata sul legame dell'elemento e restituendo il metodo di postback dei controlli correnti che assomiglierà a __doPostback (source, param)

Questo è un metodo javascript che puoi usare con facilità, e hai il pieno controllo dei postback. Sul lato client è possibile decidere se chiamare o meno questo evento postback.

---

PS: Se qualcosa è post chiaro qui una domanda e vi aggiornerò la risposta.

Answer 5

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

Answer 6

La domanda è sicuramente risposta da tanathos, ma ho un'altra possibilità di funzionamento che evita lo scripting nel code-behind se si è così inclini. Ho appena nascosto il pulsante di cancellazione asp usando display: none e aggiunto un pulsante di eliminazione che richiama la finestra di dialogo di conferma e fa clic sul pulsante di cancellazione asp nascosto se la cancellazione è confermata.

Il codice HTML nel ripetitore:

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

Il CSS:

.delete-button 
{ 
    display: none; 
} 

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