访问 JS 脚本的 gridview 内的 ASP 文本框答案

【问题标题】：Accessing ASP textbox inside gridview for JS script访问 JS 脚本的 gridview 内的 ASP 文本框
【发布时间】：2016-09-04 21:02:03
【问题描述】：

我有一个 asp:Gridview，我希望我的 JS 脚本在单元格获得焦点时触发模式。我的 aspx 文件中有以下内容：

<asp:GridView ID="gridviewSLds" runat="server" CellPadding="0" ForeColor="#333333" GridLines="Both" AutoGenerateColumns="False" OnRowCreated="gridviewSLds_RowCreated">
                            <AlternatingRowStyle BackColor="White" />
                            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
                            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                            <SortedAscendingCellStyle BackColor="#FDF5AC" />
                            <SortedAscendingHeaderStyle BackColor="#4D0000" />
                            <SortedDescendingCellStyle BackColor="#FCF6C0" />
                            <SortedDescendingHeaderStyle BackColor="#820000" />
                            <Columns>
                                <asp:TemplateField ItemStyle-BorderWidth="0">
                                    <ItemTemplate>
                                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Id") %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="item" HeaderText="Metric" SortExpression="item" ReadOnly="false" />
                                <asp:TemplateField HeaderText="Item">
                                    <ItemTemplate>
                                        <asp:TextBox onfocusin="select()" runat="server" Text='<%# Bind("item") %>'
                                            ID="txtfocus" AutoPostBack="true"></asp:TextBox>
                                    </ItemTemplate>
                                    <HeaderStyle HorizontalAlign="Center" />
                                    <ItemStyle HorizontalAlign="Center" />
                                </asp:TemplateField>

                            </Columns>
                        </asp:GridView>

我的脚本如下：

            var usrfocustxt = document.getElementById('<%txtfocus.item%>');

        itemtypetxt.onfocus = function () {
            modal.style.display = "block";
        }

但它告诉我名称“txtfocus”在当前上下文中不存在。我做错了什么？

【问题讨论】：

你能删除

标签： javascript asp.net gridview

【解决方案1】：

你做错了几件事。首先，如果你想要一个 javascript 中的 ID，你应该像这样使用它：

var usrfocustxt = document.getElementById('<%= txtfocus.ClientID %>');

但这仍然会给你错误'txtfocus'在当前上下文中不存在。

因为 GridView（和其他重复数据的控件）会给 TextBox 一个唯一的名称和 ID，因此它不会在页面上多次出现。如果您查看 HTML 源代码，您可能会看到 TextBox HTML 代码现在看起来像这样：

<input name="ctl00$mainContentPane$rptr$ctl05$txtfocus" id="mainContentPane_rptr_txtfocus_5" type="text">

名称和 ID 已使用索引号和其他数据进行了修改，以使其唯一。所以要找到正确的文本框，像这样调用模态弹出函数要容易得多。

<asp:TextBox ID="txtfocus" runat="server" onfocus="focusTextBox(this.id)" class="modalpopup"></asp:TextBox>

或者您可以使用 jQuery 和类名将函数绑定到 TextBox。

<script type="text/javascript">
    $(document).ready(function () {
        $('.modalpopup').focus(function () {
            alert(this.id);
        });
    });
</script>

【讨论】：