使用 jquery 或 javascript 在 GridView 的 TemplateField 中找到控件

Question

在客户端按钮单击事件中，我想获取位于网格视图的项目模板中的控件 ID。我试过这段代码，但它不起作用。谢谢

function buttonClicked(sender, args) {
    var gv = $find('<%= GridView1.ClientID %>');

    var textbox = $GridView1.findControl(gv.get_element().parentNode, "Textbox");
}

这是网格视图

<form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1"runat="server">
   </asp:ScriptManager>
   <div>
     <asp:UpdatePanel ID="upTest" runat="server">
      <ContentTemplate>
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="KurzDS" DataKeyNames="Id" OnRowCommand="GridView1_RowCommand">
          <Columns>
            <asp:TemplateField>
              <ItemTemplate>
                <asp:TextBox ID="Textbox" runat="server" Text="Textbox"></asp:TextBox>
              </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
              <ItemTemplate>
                <asp:TextBox ID="Textbox1" runat="server" Text="Textbox1"></asp:TextBox>
              </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
              <ItemTemplate>
                <asp:Button ID="btn" Text='btn' CommandArgument='<%# Eval("Id")%>'  CommandName="btn" runat="server" CausesValidation="false" />
              </ItemTemplate>
            </asp:TemplateField>
          </Columns>
        </asp:GridView>
      </ContentTemplate>
    </asp:UpdatePanel>
   </div>
</form>

Answer 1

感谢您提供 GridView 示例。既然我能看到你在尝试什么，我有一个更好的答案给你。

首先，对按钮模板稍作更改，将 CommandArgument 更改为 OnClientClick，并且由于您在客户端使用此按钮而不是回发到服务器，因此您可以简化它像这样：

<asp:Button ID="btn" Text='btn' OnClientClick='<%# Eval("ID", "YourJavascriptFunction({0} - 1); return false;") %>' runat="server" CausesValidation="false" />

我让点击事件调用您的 JavaScript 函数，它发送服务器端解析 ID 的参数。请注意，我先减去 1。这是因为服务器端 ASP.Net Eval 函数给出的 ID 从 1 开始。但是，为您的文本输入元素生成的每个 ID 都以零基数开头。

现在看下面的JavaScript函数。

// Clicking the first button sends in a 0, second sends in a 1, etc.
function YourJavascriptFunction(id) {
  // each of the TextBox1 elements has an ASP.Net server side
  // generated id that ends with GridView2_Textbox1_0,
  // GridView2_Textbox1_1, etc.
  let selectId = "input[id$='GridView2_Textbox1_" + id + "']";

  // The text we use in the querySelector function states
  // find the DOM element with a tag of "input" where the id
  // ends with . . . The $ in id$= is the part that says the
  // value must "end with"
  let textBox1 = document.querySelector(selectId);

  // Now that we have TextBox1 from the same row as the button, 
  // getting the value is easy.
  alert(textBox1.value);
}

我省略了一个 jQuery 示例，因为此 querySelector 命令几乎适用于所有浏览器，包括 IE8 及更高版本，因此您不需要 jQuery 来处理这么简单的事情。

如果我能提供进一步的帮助，请告诉我。

使用 jquery 或 javascript 在 GridView 的 TemplateField 中找到控件

find Control in TemplateField of GridView with jquery or javascript

c#

asp.net

jquery

gridview

itemtemplate