Javascript 在数据网格中查找隐藏字段值

Question

我有一个 asp:DataGrid，它有列，还有另一个 asp:DataGrid 嵌套在其中。这正确地显示了我的数据。我被要求进行更改，以便嵌套数据网格中的数据显示为链接，以便在选择时显示关联的文件内容。下面显示的是标记的一部分。它显示嵌套的数据网格、隐藏字段和显示为链接的文件名。我有一个名为“viewFile”的 JavaScript 函数(未显示)，用于显示希望传递 fileId 的文件。当选择链接时，我的 viewField 函数被调用，但 fileId 没有传递给它。我假设 javascript “javascript:viewFile($('#hdFileId').val()” 没有找到隐藏字段。任何人都可以建议我是否做错了，或者他们可以帮助提供正确的 javascript 吗？

<asp:TemplateColumn HeaderText="Files" >
   <ItemTemplate>
        <asp:DataGrid ID="dgFileList" runat="server" AutoGenerateColumns="false" ShowHeader="False" GridLines="None">
           <Columns>

               <asp:TemplateColumn>
                   <ItemTemplate>
                       <asp:HiddenField runat="server" ID="hdFileId" Value='<%# DataBinder.Eval(Container.DataItem, "FileId") %>'/>

                       <a href="javascript:viewFile($('#hdFileId').val())"><%# DataBinder.Eval(Container.DataItem, "FileName") %></a>

                   </ItemTemplate>
               </asp:TemplateColumn>
           </Columns>
       </asp:DataGrid>
   </ItemTemplate>

====编辑======================

这是数据网格标记的整个部分:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
     <div style="float: left; width: 100%; padding-top: 20px;">

        <asp:DataGrid AllowPaging="true" AllowSorting="true" AutoGenerateColumns="false" AllowCustomPaging="True" Width="90%"
            CellPadding="2" CellSpacing="2" DataKeyField="AccountNumber" UseAccessibleHeader="true"
            GridLines="None" HeaderStyle-CssClass="grid_header" ID="dgFileView" OnItemCommand="dgFileView_OnItemCommand" OnItemDataBound="dgFileList_ItemDataBound"
            OnPageIndexChanged="MyDataGrid_Page"
            runat="server" ShowHeaderWhenEmpty="True" 
            PageSize="18"
            PagerStyle-Mode="NumericPages"
            PagerStyle-PageButtonCount="20"
            PagerStyle-ForeColor="Navy"
            PagerStyle-HorizontalAlign="right"
            ItemStyle-VerticalAlign="top">

           <Columns>

              <asp:TemplateColumn HeaderText="Company" SortExpression="SortByCompany">
                 <HeaderStyle CssClass="grid_header_cell" />
                 <ItemStyle CssClass="grid_item_no_edit" />
                 <ItemTemplate>
                    <asp:Label ID="lblCompany" runat="server" Text='<%#Eval("Company")%>'></asp:Label>
                 </ItemTemplate>
              </asp:TemplateColumn>

              <asp:TemplateColumn HeaderText="Distribution Group" SortExpression="SortByDistributionGroup">
                 <HeaderStyle CssClass="grid_header_cell" />
                 <ItemStyle CssClass="grid_item_no_edit" />
                 <ItemTemplate>
                    <asp:Label ID="lblEnrolmentDevice" runat="server" Text='<%#Eval("DistributionGroup")%>'></asp:Label>
                 </ItemTemplate>
              </asp:TemplateColumn>

              <asp:TemplateColumn HeaderText="Account ID" >
                 <HeaderStyle CssClass="grid_header_cell" />
                 <ItemStyle CssClass="grid_item_no_edit" />
                 <ItemTemplate>
                    <asp:Label ID="lblAccountId" runat="server" Text='<%#Eval("AccountNumber")%>'></asp:Label>
                 </ItemTemplate>
              </asp:TemplateColumn>



              <asp:TemplateColumn HeaderText="Files" >
                 <HeaderStyle CssClass="grid_header_cell" />
                 <ItemStyle CssClass="grid_item_no_edit" />
                 <ItemTemplate>
                      <asp:DataGrid ID="dgFileList" runat="server" AutoGenerateColumns="false" ShowHeader="False" GridLines="None">
                         <Columns>


                             <asp:TemplateColumn>
                                 <ItemTemplate>
                                     <asp:HiddenField runat="server" ID="hdFileId" Value='kkk'/>


                                     <a href="javascript:viewFile($('#<%= hdFileId.ClientID %>').val())" style="color: blue; text-decoration: none"><%# DataBinder.Eval(Container.DataItem, "FileName") %></a>


                                 </ItemTemplate>
                             </asp:TemplateColumn>
                         </Columns>
                     </asp:DataGrid>
                 </ItemTemplate>
              </asp:TemplateColumn>


           </Columns>
        </asp:DataGrid>             
     </div>
  </ContentTemplate>

Answer 1

ASP 元素的 ID 与创建的 html 元素的 ID 不同。您可以通过 yourElement.ClientID

获取它

在 jQuery 中，获取元素:

$('#<%= hdFileId.ClientID %>').val()

或者在经典的 JavaScript 中:

document.getElementById('<%= hdFileId.ClientID %>').value 

======编辑========

好的，我明白了。您的 HiddenField 位于 GridView 中，因此您有(行数)隐藏字段。因此您无法访问唯一的 HiddenField。 要访问每个 HiddenField，您必须在 RowDataBound 方法中执行此操作:

protected void dgFileList_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
     {
        (HiddenField) hdFileId = (HiddenField) e.Row.FindControl("hdFileId");

     }
}

就您而言，您应该添加 <asp:LinkButton>而不是 html 链接元素 <a> ，然后您可以在代码隐藏中访问为每个 HiddenField 设置 LinkBut​​ton 的 HREF。

另一个解决方案是不使用 HiddenField(这是一个 ASP 元素)，因为您必须通过代码隐藏。但您可以使用 <span>您将其设置为 style="display:none"不可见，您可以直接在 JavaScript 代码中访问。

希望有帮助。