javascript - 如何从 gridview C# 上的文本框中获取静态 id 的特定值

Question

我很难弄清楚如何从静态 ID 中获取值。我有一些 jquery，当我点击它时，它会将标签转换为文本框。它使用标签的(静态)id 并将其转换为 TextBox。例如:Label1 => TextBox1

我想知道如何仅从该特定单元格获取 TextBox1 的值，因为当我尝试更新它时，所有文本框的列(ID:Label1 (afspraken))中的值都比 TextBox1 中的值高。因此，当我更新时，整个列中的所有值都在单元格中。(如果不清楚，请查看代码下面的图像)

欢迎任何帮助，因为我明天需要提交这个项目，并且很高兴能完成这个项目!

代码:

C#

        protected void Button3_Click(object sender, EventArgs e)
    {
        _controller = new Controller();

        //Variablen
        string afspraak ="";
        string uitleg ="";
        string id="";
        string id1 = "";

        //Values uit uit gridview halen halen
        foreach (GridViewRow row in GridView1.Rows)
        {
            string tekst = Request.Form["TextBox1"];
            /afspraak = ((TextBox)row.FindControl("txtEditTabel")).Text;

            //Don't look at this
            uitleg = ((Label)row.FindControl("Label2")).Text;
            id = ((Label)row.FindControl("Label3")).Text;
            id1 = ((Label)row.FindControl("Label4")).Text; 
        }

        //Methode om record te bewerken
        _controller.RecordUpdatenTblAfspraken(afspraak, uitleg, Convert.ToInt32(id), Convert.ToInt32(id1));

        //Pagina refreshen
        Response.Redirect(Request.RawUrl);

    }

ASP.NET GRIDVIEW

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="1000px" HorizontalAlign="Center" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDeleting="GridView1_RowDeleting" DataKeyNames="IDAfspraken" ClientIDMode="Static">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:TemplateField HeaderText="IDAfspraken">
                <ItemTemplate>
                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("IDAfspraken") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Afspraak">
                <ItemTemplate>
                    <asp:Label ID="Label1" CssClass="editable" runat="server" Text='<%# Eval("Afspraak") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Uitleg">
                <ItemTemplate>
                    <asp:Label ID="Label2" CssClass="editable" runat="server" Text='<%# Eval("Uitleg") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Categorie">
                <ItemTemplate>
                    <asp:Label ID="Label3" CssClass="editable" runat="server" Text='<%# Eval("IDCategorieën") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Bewerken">
                <ItemTemplate>
                    <asp:Button ID="Button3" runat="server" Text="Bewerken" ForeColor="DeepSkyBlue" Font-Bold="true" OnClick="Button3_Click"/>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ButtonType="Button" ShowDeleteButton="True" />
        </Columns>
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>

JAVASCRIPT

$(function () {
//Loop through all Labels with class 'editable'.
$(".editable").each(function () {
    //Reference the Label.
    var label = $(this);

    //Add a TextBox next to the Label.
    label.after("<input type = 'text' style = 'display:none' />");

    //Reference the TextBox.
    var textbox = $(this).next();

    //Set the name attribute of the TextBox.
    var id = this.id.split('_')[this.id.split('_').length - 1];
    textbox[0].name = id.replace("Label","Textbox"); 

    //Assign the value of Label to TextBox.
    textbox.val(label.html());

    //When Label is clicked, hide Label and show TextBox.
    label.click(function () {
        $(this).hide();
        $(this).next().show();
    });

    //When focus is lost from TextBox, hide TextBox and show Label.
    textbox.focusout(function () {
        $(this).hide();
        $(this).prev().html($(this).val());
        $(this).prev().show();
    });
});

Answer 1

您应该使用 gridview 的内置编辑属性，而不是使用 Jquery。这是示例代码Aspx页面

<asp:GridView ID="gridmeta" runat="server" AutoGenerateColumns="False" OnRowEditing="gridmeta_RowEditing" OnRowCancelingEdit="gridmeta_RowCancelingEdit" OnRowUpdating="gridmeta_RowUpdating"  DataKeyNames="metaid">
      <asp:TemplateField HeaderText="Content">
           <ItemTemplate>
              <label><%#Eval("metacontent") %></label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox TextMode="MultiLine" Rows="3" Columns="60" runat="server" ID="txtcontent" Text='<%#Eval("metacontent") %>'></asp:TextBox>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:CommandField ShowEditButton="true" />
        </Columns>
    </asp:GridView>

CS文件

protected void gridmeta_RowEditing(object sender, GridViewEditEventArgs e)
{
    gridmeta.EditIndex = e.NewEditIndex;
    fillGrid();
}


protected void gridmeta_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    gridmeta.EditIndex = -1;
    fillGrid();
}


protected void gridmeta_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    int index;
    index = e.RowIndex;
    int metaid = Convert.ToInt32(gridmeta.DataKeys[index].Value.ToString());
    string content = ((TextBox)gridmeta.Rows[index].FindControl("txtcontent")).Text;
    //Your Code to update an entry based on id in this case metaid
}

此外，如果您想要更改多个列值，只需将 edititemtemplate 放入其中，然后在 gridmeta_RowUpdating 函数中访问它们。