Wählen Sie Zeile in einem Popup für Bearbeiten und Aktualisieren

Question

Ich habe ein Anker-Tag für die Aktualisierung der Zeile in der Gridview. Ich habe das Kontrollkästchen in der Gridview gesetzt. Wenn der Benutzer die Checkbox anklickt und auf Update-Taste klickt, sollte die bestehende Zeile in einem Popup geöffnet werden.

Im Moment öffnet sich das Popup aber nicht mit den markierten Zeilen mit den vorhandenen Daten. Bitte beachten Sie den Code für Ihre Referenz: -

<a id="popup" onclick="div_show()" class="btn btn-success"><i class="fa fa-plus-circle"></i>Add new</a> 

<a href="javascript:;" class="btn btn-primary" runat="server" onclick="div_show()" ><i class="fa fa-refresh"></i>Update</a> 

Auch die gridview-Code für Ihre Referenz finden Sie unter: -

<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3" 
      AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found" 
      OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting" 
      PageSize="5" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating" 
      OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit"> 
      <AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" /> 
      <Columns> 
       <asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td"> 
        <ItemTemplate> 
         <asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" /> 
       <asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td"> 
        <ItemTemplate> 
         <asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
       <asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png"> 
        <ControlStyle Height="20px" Width="20px"></ControlStyle> 
       </asp:CommandField> 
      </Columns> 
     </asp:GridView> 

Bitte helfen, seine seit zwei Tage ich stucked bin, konnte es aber nicht geknackt .

-Code für das Binden des Gridview: -

private void BindGrid() 
    { 
     string strQuery = "select Id,page_title,page_description,meta_title,meta_keywords,meta_description,Active from tbl_Pages ORDER By Id DESC"; 
     SqlCommand cmd = new SqlCommand(strQuery); 
     DataTable dt = GetData(cmd); 
     grdCSRPageData.DataSource = dt; 
     grdCSRPageData.DataBind(); 
    } 

Siehe auch die Page_load Methode; -

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (!IsPostBack) 
     { 
      BindGrid(); 
     } 
    } 

Answer 1

Hier ist eine Lösung mit Ajax. Wenn Sie ein Kontrollkästchen aktivieren und auf die Schaltfläche "Aktualisieren" klicken, sucht jquery code in gridview nach dem ausgewählten Kontrollkästchen, und wenn es dies findet, werden den Textfeldern, die im Popup-Fenster angezeigt werden, Werte zugewiesen.

Auch müssen Sie ID in versteckten Feld auf der Grundlage, welche Update-Abfrage ausgeführt wird, oder Sie können jedes Feld, auf dem Update geschehen wird, speichern.

Jetzt, wenn Sie auf Update-Schaltfläche im Popup klicken, wird ein Ajax-Aufruf gesendet, der aktualisierte Werte aus Textfeldern übernimmt und an webmethod sendet.

In Webmethod werden Sie Ihre Update-Abfrage ausführen.Und wenn ajax erfolgreich ausgeführt wird, leeren Sie die Werte der Textfelder im Popup und laden die Seite neu, um Änderungen in der Gridview zu sehen.

Html Popup

<div id="Popup"> 
    <table> 
     <tr> 
      <td> 
       Category 
      </td> 
      <td> 
       <input type="text" id="Category" /> 
      </td> 

     </tr> 
     <tr> 
      <td> 
       Items 
      </td> 
      <td> 
       <input type="text" id="items" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" value="Update" onclick="Openselected()" /> 
      </td> 
      <td><input type="hidden" id="hdnID" /></td> 
     </tr> 

    </table> 
</div> 

Dies nicht als Popup angezeigt wird, aber Sie jedes Plugin, es zu zeigen in Pop-up wie BlockUI, fancybox jQueryUI Dialog oder einem verfügbaren verwenden können.

JQuery-Code

Diese Funktion Werte der ausgewählten Zeile in Textfelder und offene Popup zuweisen. WEBMETHOD und auf Erfolg leere Textfelder von Popup

function Openselected() 
    { 
     $('table[id$=grdTest] tr').each(function() { 

      if ($(this).find('input[type=checkbox]').is(':checked')) { 
       $('#Category').val($(this).children('td').eq('02').text()); 
       $('#items').val($(this).children('td').eq('03').text()); 
       $('#hdnID').val($(this).children('td').eq('01').text()); 
      } 


     }); 
    } 

Diese Funktion wird mit aktualisierten Werten Ajax-Aufruf senden und Seite neu laden Änderungen zu sehen

function UpdateGrid() 
    { 
     $.ajax({ 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "Default.aspx/UpdateDB", 
      data: JSON.stringify({ category:$('#Category').val() , items: $('#items').val(),id:$('#hdnID').val() }), 
      dataType: "json", 
      async: false, 
      success: function (data) { 
       $('#Category').val(""); 
       $('#items').val(""); 
       $('#hdnID').val(""); 
       window.location.reload(true); 

      }, 
      error: function (err) { 
       alert(err.responseText); 
      } 

     }); 
    } 

Hier ist Webmethod

[WebMethod] 
public static string UpdateDB(string category, string items,int id) 
{ 
    //Your logic of updating db.Here i am updating on basis of id you can use any feild of your choice   
    return "success"; 

} 

Dies ist nur für eine Zeile nach Ihrer Anforderung.

Answer 2

prüfen für die Zeilen wurde von gridview in RowDataBound Verfahren ausgewählt. Ausgewählte Zeilen oder in Ihrem Fall markierte Zeilen können in dieser Methode erfasst werden.

Ihr sind viele Referenzen finden Sie hier .. Sie ein How to check if any row is selected from GridView?

Answer 3

verwenden, können Sie einen Blick darauf werfen können dies auch sein mag Sie modelpopupextender zur Verfügung gestellt von ajaxcontroltoolkit

gehen durch die ASP.NET How to show AjaxControlToolkit Modal Popup from CheckBox

Answer 4

verwenden können

Sie können dies mit dem AjaxControlToolKit versuchen.

In Ihrem GridView Ort dieser Event-Handler:

OnRowCommand="grdCSRPageData_RowCommand" 

Dieses nach dem GridView:

<asp:UpdatePanel ID="upModal" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <asp:Panel ID="pnlModal" runat="server" BorderWidth="1" Style="display:none;"> 
      <table> 
       <tr> 
        <td>page_title</td> 
        <td><asp:TextBox ID="txtPageTitle" runat="server" /></td> 
       </tr> 
       <tr> 
        <td>page_description</td> 
        <td><asp:TextBox ID="txtPageDescription" runat="server" /></td> 
       </tr> 
      </table> 
      <asp:Button ID="btnOK" runat="server" Text="OK" /> 
      <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> 
     </asp:Panel> 
    </ContentTemplate> 
</asp:UpdatePanel> 
<asp:Button ID="btnModal" runat="server" Style="display:none;"/> 
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlModal" TargetControlID="btnModal" OkControlID="btnOK" CancelControlID="btnCancel" /> 

In Code hinter:

protected void grdCSRPageData_RowCommand(object sender, GridViewCommandEventArgs e) 
{ 
    if (e.CommandName == "Edit") 
    { 
     GridViewRow gvRow = grdCSRPageData.Rows[Convert.ToInt32(e.CommandArgument)]; 
     txtPageTitle.Text = gvRow.Cells[0].Text; 
     txtPageDescription.Text = gvRow.Cells[1].Text; 

     upModal.Update(); 
     mpe.Show(); 
    } 
} 

protected void grdCSRPageData_RowEditing(object sender, GridViewEditEventArgs e) 
{ 
    grdCSRPageData.EditIndex = -1; 
    BindGrid(); 
} 

Ich glaube, Sie brauchen nicht Um zu überprüfen, welche Zeile Sie bearbeiten möchten, haben Sie bereits eine CommandField in Ihre GridView. Sie klicken einfach auf das Bild bearbeiten und das modale Popup wird mit den Daten aus der GridView (aus der Zeile, die Sie gerade bearbeiten) gefüllt.

Answer 5

können Sie Telerik Grid verwenden, die automatisch das Einfügen und Bearbeiten in Form zulassen.

<MasterTableView EditMode="PopUp" CommandItemDisplay="Top"><CommandItemSettings ShowAddNewRecordButton="true" ShowRefreshButton="true" /> 

See Telerik Demo http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx