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

Posted 2023-05-08

【中文标题】使用 jquery 或 javascript 在 GridView 的 TemplateField 中查找控件

【英文标题】：find Control in TemplateField of GridView with jquery or javascript

【发布时间】：2019-09-05 22:51:11

【问题描述】：

在客户端按钮单击事件中，我想获取放置在网格视图项目模板中的控件 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>

【问题讨论】：

如果你能给我们一个生成的 html 的摘要，我可以帮助你找到你正在寻找的元素所需的 javascript。

【参考方案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 来做这么简单的事情。

如果我能提供更多帮助，请告诉我。