ASP.NET GridView – Klicken Sie auf eine Zelle, bearbeiten und aktualisieren Sie die SQL server database

Ich arbeite an einer ASP.NET Webanwendung in Visual Studio 2017. Auf einer meiner .aspx Webseiten habe ich eine GridView, die eine Tabelle von SQL server anzeigt.

Ich versuche, Steuerelemente zu erstellen, wo ein Benutzer auf der Client-Seite auf eine Zelle in der GridView klicken kann, die Zelle verwandelt sich in ein Textfeld, der Benutzer kann einen neuen Wert insert und beim Verlassen der Zelle oder drücken Sie Enter, die GridView und SQL server-Tabellenaktualisierung, um den neuen Wert anzuzeigen.

Zusätzlich, wenn eine Zelle angeklickt wird, wird eine Löschzeilen-Schaltfläche generiert. Wenn die Schaltfläche "Zeile löschen" geklickt wird, wird die Zeile, die die ausgewählte Zelle enthält, aus der GridView- und der SQL server-Tabelle gelöscht.

Schließlich muss es eine Hinzufügen Zeile Schaltfläche am unteren Rand des GridView werden. Wenn Sie auf die Schaltfläche Hinzufügen klicken, wird eine neue Zeile in der GridView erstellt, die erste Zelle der Zeile wird zu einem Textfeld, der Benutzer kann einen Wert insert, und beim Verlassen der Zelle oder beim Drücken der Eingabetaste wird das Update von GridView und SQL server angezeigt die neue reihe

Ich generiere das GridView dynamisch mit AutoGenerateColumns="true" und binden die GridView in Code hinter. Wenn möglich, würde ich es gerne auf diese Weise behalten und die SQL server-Tabellenspalten nicht in die GridView kodieren.

Hier ist meine aktuelle Markup für meine GridView:

 <asp:GridView ID="GridViewJobList" runat="server" GridLines="None" ForeColor="#333333" Font-Names="Verdana" Font-Size="9pt" EmptyDataText=" " OnRowCommand="GridViewJobList_RowCommand" OnRowDataBound="GridViewJobList_RowDataBound"> <Columns> <asp:ButtonField CommandName="CellClick" Visible="False"></asp:ButtonField> </Columns> <AlternatingRowStyle BackColor="White" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="False" /> <EditRowStyle HorizontalAlign="Left" VerticalAlign="Middle" Wrap="False" /> <EmptyDataRowStyle Wrap="False" /> <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="True" /> <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="True" /> <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#E3EAEB" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="False" /> <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#F8FAFA" /> <SortedAscendingHeaderStyle BackColor="#246B61" /> <SortedDescendingCellStyle BackColor="#D4DFE1" /> <SortedDescendingHeaderStyle BackColor="#15524A" /> </asp:GridView> 

Hier ist meine aktuelle C # -Code hinter:

 private static string sQuery, sTable; protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { sQuery = null; sTable = "JobList"; sQuery = "SELECT * FROM [" + sTable + "]"; GridViewSQL(); } } private void GridViewSQL() { try { GridViewJobList.DataSource = SQLDB.DBData(sQuery); GridViewJobList.DataBind(); } catch (Exception openex) { MessageBox(openex.Message); } } protected void GridViewJobList_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0]; string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, ""); // Add events to each editable cell for (int columnIndex = 0; columnIndex < e.Row.Cells.Count; columnIndex++) { // Add the column index as the event argument parameter string js = _jsSingle.Insert(_jsSingle.Length - 2, columnIndex.ToString()); // Add this javascript to the onclick Attribute of the cell e.Row.Cells[columnIndex].Attributes["onclick"] = js; // Add a cursor style to the cells e.Row.Cells[columnIndex].Attributes["style"] += "cursor:pointer;cursor:hand;"; } } } protected void GridViewJobList_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName.ToString() == "CellClick") { int selectedRowIndex = Convert.ToInt32(e.CommandArgument.ToString()); int selectedColumnIndex = Convert.ToInt32(Request.Form["__EVENTARGUMENT"].ToString()); var vSelectedCell = GridViewJobList.Rows[selectedRowIndex].Cells[selectedColumnIndex]; } } protected override void Render(HtmlTextWriter writer) { foreach (GridViewRow r in GridViewJobList.Rows) { if (r.RowType == DataControlRowType.DataRow) { for (int columnIndex = 0; columnIndex < r.Cells.Count; columnIndex++) { Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl00", columnIndex.ToString()); } } } base.Render(writer); } private void MessageBox(string sError) //Pop up MessageBox for error messages in web browser { string sScript = "alert(\"" + sError + "\");"; ScriptManager.RegisterStartupScript(this, GetType(), "serverControlScript", sScript, true); } 

Ich bin ein Anfänger Programmierer und ich habe versucht, die herauszufinden, wie dies zu tun für über eine Woche ohne Glück. Ich nehme an, die Lösung ist eine Kombination aus ASP, C # und JavaScript / jQuery. Ich bin bequem bei der Herstellung einer SQL server-Verbindung in C # und mit einem SQL-Befehl, um eine Tabelle in SQL server zu aktualisieren. Ich kämpfe mit der JavaScript / jQuery Client-Seite Kontrollen und immer die richtigen Informationen aus dem GridView in den C # -Code hinter, um für meine SQL-Befehle zu verwenden.

Ich habe in der Lage, eine GridView-Zelle onclick mit diesem Beispiel zu wählen: http://www.dotnetlogix.com/Article/aspnet/80/How-to-make-GridView-Individual-Cells-Selectable.html

Danke für deine time.