使用 jQuery 向嵌套 GridView 中的 TextBox 添加值答案

【问题标题】：Add Value to TextBox in Nested GridView by using jQuery使用 jQuery 向嵌套 GridView 中的 TextBox 添加值
【发布时间】：2016-07-16 18:03:30
【问题描述】：

我有一个带有a link 的嵌套Gridview 用于在嵌套gridview 中显示和隐藏div 标签。
默认情况下，当我们单击a link 以显示（启用）Div 时，此Div Tag 被禁用在这个Div Tag 下标记它们是一个TextBox 和一个Button。
当用户单击a link div 将同时启用我想在此文本框中添加@username

例如

<asp:GridView ID="GridParent" runat="server">
 <Columns>
   <asp:TemplateField>
     <ItemTemplate>
      <table>
        <tr>
         <td>
           -----------
           -----------
         </td>
         <td>
         <asp:GridView ID="GridChild" runat="server">
          <Columns>
           <asp:TemplateField>
            <ItemTemplate>
               <a href='#' onclick='showDiv(); return false;'>ShowDiv</a>
               <div id='divShow'>
                 <asp:Textbox ID="TextBox1" runat="server"></asp:TextBox>
                 <asp:Button ID="Button1" runat="server" Text="Button" onclick=showText(); return false; />
               </div>
            </ItemTemplate>
           </asp:TemplateField>
         </Columns>
        </asp:GridView>
        </td>
       </tr>
      </table>
     </ItemTemplate>
   </asp:TemplateField>
 </Columns>
</asp:GridView>

我正在使用的 JQuery

function showDiv() {            
         $("#divShow").show();
         $("#TextBox1").text('@username');
         return false;
        }

上面的 jquery 代码可以启用 Div 标签，但不能将 @username 添加到 TextBox1

【问题讨论】：

标签： javascript jquery asp.net gridview

【解决方案1】：

我对 ASP 了解不多，但如果这会在网页中呈现类似于 <input type='text' /> 的文本框，那么您想使用 $("#TextBox1").val('@username') 而不是 .文本（）

【讨论】：

【解决方案2】：

该解决方案与我提供给您的previous question 的解决方案非常相似。您可以在调用showDiv（使用this 关键字）中传递对锚标记的引用并设置div 的类名（例如innerDiv）：

<a href='#' onclick='showDiv(this); return false;'>ShowDiv</a>
<div id='divShow' class='innerDiv'>

showDiv 可以找到表格单元格容器，然后找到具有innerDiv 类名的元素和文本框。

function showDiv(lnk) {
    var $div = $(lnk).closest('td').find('.innerDiv');
    $div.show();
    $div.find('input[type=text]').val('@username');
}

请注意，我在 jQuery 选择器中使用了类名和元素类型。元素的 ID 不可靠，因为 GridView 的每一行都显示这些控件，它们应该都有不同的 ID。

【讨论】：

它适用于 Div Hide and Show 但 @username 没有添加到文本框
我修改了showDiv函数来搜索div里面的文本框。
尝试在按钮上没有 onclick 事件的情况下进行测试（根据您问题中发布的代码示例，这是不正确的）。当我使用您的标记和我建议的更改测试此答案时，我看到了 div 并且文本设置为 @username。
@ConnorsFan asp.net 在呈现文本框控件时不添加type="text"。
@lorond - 从我检查页面的 HTML 时可以看到，它确实添加了 type="text"。我在 IE、Firefox 和 Chrome 上进行了测试，该解决方案适用于这三种浏览器。

【解决方案3】：

您的代码有两个问题。

首先，ASP.NET 为服务器控件生成复杂的 ID（类似于 blabla_gridparent_gridchild_textbox1_blabla，而不是简单的 textbox1），所以如果你想在客户端使用你的控件，你必须询问 ASP.NET该 ID 通过您的服务器控件的 ClientID 属性：

function showDiv() {            
     $("#divShow").show();
     $("#<%= TextBox1.ClientID %>").val('@username');
     return false;
}

注意，这是一个服务器代码。我假设此 JS 代码放置在您的 .aspx 页面（或 .ascx 控件）中，而不是静态 .js 文件中。如果是静态 .js 文件，您需要将该 ID 作为参数传递。

其次，您必须使用.val() jquery 方法来处理input 值。 TextBox 被渲染成input。

【讨论】：