ASP.NET GridView: Bestätigen Sie die Schaltfläche klicken Sie auf Postback mit jQueryUI Dialogfeld

Question

Ich hoffe, jemand kann mir helfen, dies herauszufinden. Ich habe mich rundherum um ein Beispiel bemüht, das mir helfen wird. Ich habe das Gefühl, dass ich sehr nah dran bin ...

Ich habe eine Asp: Gridview mit einem Linkbutton am Ende jeder Zeile. Ich muss einen Bestätigungsdialog ausführen, bevor ich den onrow-Befehl ausführe. Hier ist der Code, den ich machen muss ... Was vermisse ich?

function confirmProcessing(event) { 
    event.preventDefault(); 

    $("#dialog") 
     .dialog({ 
      title: "Confirm Transaction", 
      buttons: { 
       "Process": function() {           
        $("#dialog").dialog('close'); 

       }, 
       Cancel: function() { 
        $("#dialog").dialog('close'); 
        return false; 
       } 
      }, 
      close: function() {        
       return false; 
      }, 
      modal: true, 
      appendTo: "form" 

     }) 
     .parent() 
     .css('z-index', '1005'); 

} 

aspx Code

<div class="row"> 
    <asp:GridView runat="server" ID="ccList" CssClass="table table-striped table-responsive" ShowHeader="True" AutoGenerateColumns="False" OnRowDataBound="ccList_OnRowDataBound" OnRowCommand="ccList_OnRowCommand"> 
     <Columns> 
      <asp:BoundField DataField="Street" ItemStyle-CssClass="Street" HeaderText="Street"/> 
      <asp:BoundField DataField="ZipCode" ItemStyle-CssClass="ZipCode" HeaderText="Zip"/> 
      <asp:BoundField DataField="MB4P" ItemStyle-CssClass="MB4P" HeaderText="MB4P"/> 
      <asp:BoundField DataField="MB4S" ItemStyle-CssClass="MB4S" HeaderText="MB4S"/> 
      <asp:BoundField DataField="BAL" ItemStyle-CssClass="BAL" HeaderText="BAL"/> 
      <asp:TemplateField> 
       <ItemTemplate> 
        <asp:LinkButton runat="server" ID="btnProcess" OnClientClick="confirmProcessing(event);" Text="Process Payment" CommandName="Process" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"/>  
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
    </asp:GridView> 
</div> 

<div id="dialog" style="display:none">   
    <b>Are you sure you want to process this record?</b> 
</div> 

OnRowCommand Code

protected void ccList_OnRowCommand(object sender, GridViewCommandEventArgs e) 
{ 
    if (e.CommandName == "Process") 
    { 
     //Do the processing stuff here after confirm dialog. 
    }   
} 

Wenn ich die prevent entfernen es feuert bis zum OnRowCommand, die erwartet wird. Ich weiß nur nicht, wie ich die Schaltfläche "Bearbeiten" im modalen Dialog aufrufen kann, um den Befehl auszulösen ... Was fehlt mir hier?

Vielen Dank im Voraus.

Answer 1

Die OnClientClick Eigenschaft des Linkbutton in den RowDataBound-Ereignishandler des Gridview eingestellt wird, mit den UniqueID der Taste als Argument für confirmProcessing:

protected void ccList_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.DataRow) 
    { 
     LinkButton btnProcess = e.Row.FindControl("btnProcess") as LinkButton; 
     btnProcess.OnClientClick = string.Format("return confirmProcessing('{0}');", btnProcess.UniqueID); 
     ... 
    } 
} 

Die Event-Handler Javascript können dann als geändert werden folgt:

function confirmProcessing(btnUniqueID) { 
    $("#dialog").dialog({ 
     title: "Confirm Transaction", 
     buttons: { 
      "Process": function() { 
       $("#dialog").dialog('close'); 
       __doPostBack(btnUniqueID, ''); 
      }, 
      Cancel: function() { 
       $("#dialog").dialog('close'); 
       return false; 
      } 
     }, 
     close: function() { 
      return false; 
     }, 
     modal: true, 
     appendTo: "form" 

    }).parent().css('z-index', '1005'); 

    return false; 
} 

Wenn die Linkbutton geklickt wird, wird das Dialogfeld angezeigt und die Funktion gibt das anfängliche false Postback abzubrechen. Wenn der Dialog dann durch Klicken auf Process geschlossen wird, wird __doPostBack mit dem UniqueID des LinkButton aufgerufen, um das Postback zu verursachen.

Hinweis: Ich dachte, dass die UniqueID in Client-Code mit Hilfe des name Attributs abgerufen werden kann. Es funktioniert für das Button-Steuerelement, nicht jedoch für den LinkButton. Deshalb schlage ich vor, die Eigenschaft OnClientClick in code-behind zu setzen.