如何在javascript中获取放置在gridview的Edit item模板内的控件的clientid

Question

i 获取控件的 clientid，该控件位于 javascript 中 gridview 的 Edit item 模板内，而无需转到服务器端代码..

  <asp:TemplateField HeaderText="FromDate" SortExpression="FromDate">
                    <ItemTemplate>
                        <asp:Label ID="FromDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"FromDate")).ToShortDateString()%>'></asp:Label>
                        <asp:HiddenField ID="ID" runat="server" Value='<%#Eval("ID") %>' />
                        <asp:HiddenField ID="ApproveLeaveID" runat="server" Value='<%#Eval("ApproveLeaveID") %>' />
                        <asp:HiddenField ID="hidLevel3" runat="server" Value='<%#Eval("Level3ManagerACENumber") %>' />

                                     </ItemTemplate>
                    <EditItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="txtFDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"FromDate")).ToShortDateString()%>'>
                                    </asp:TextBox>
                                    <asp:HiddenField ID="ID" runat="server" Value='<%#Eval("ID") %>' />
                                    <asp:HiddenField ID="ApproveLeaveID" runat="server" Value='<%#Eval("ApproveLeaveID") %>' />
                                    <asp:HiddenField ID="hidLevel3" runat="server" Value='<%#Eval("Level3ManagerACENumber") %>' />
                                </td>
                                <td>
                                    <a onclick="showCalendarControl(3,<%# Container.ItemIndex %>)">
                                        <img id="img3" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none" /></a>
                                </td>
                            </tr>
                        </table>
                    </EditItemTemplate>
                    <ItemStyle HorizontalAlign="Left" />
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="ToDate" SortExpression="ToDate">
                    <ItemTemplate>
                        <asp:Label ID="ToDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>'></asp:Label>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <table>
                            <tr>
                                <td>
                                    <asp:TextBox ID="txtTDate" runat="server" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>
                                    </asp:TextBox>
                                </td>
                                <td>
                                    <a onclick="showCalendarControl(4,<%# Container.ItemIndex %>)">
                                        <img id="img4" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none" /></a>
                                </td>
                            </tr>
                        </table>
                    </EditItemTemplate>
                    <ItemStyle HorizontalAlign="Left" />
                    <HeaderStyle HorizontalAlign="Center" />
                </asp:TemplateField>

这是我的 java 脚本：

 function showCalendarControl(ControlNo,index) {
var textField;
if(ControlNo==1)
{
textField=document.getElementById('<%=txtFromDate.ClientID%>');
}
else
{
textField=document.getElementById('<%=txtToDate.ClientID%>');
}
if(ControlNo==3)
{
    textField=document.getElementsByClassName('txtFDate')[index];
}
if(ControlNo==4)
{
    textField=document.getElementsByClassName('txtTDate')[index];
}

  calendarControl.show(textField);
}

前两个文本框(txtFromDate,txtToDate) 用于不在网格控件中...

Answer 1

您可以在网格的ItemDataBound事件中获取元素（使用FindControl），然后将文本框的ClientID作为参数传递给showCalendarControl：

TextBox txtFDate = e.Item.FindControl("txtFDate") as TextBox;
TextBox txtTDate = e.Item.FindControl("txtTDate") as TextBox;
HtmlAnchor link = e.Item.FindControl("aLink") as HtmlAnchor;

if (txtTDate != null && txtFDate != null && link != null)
{
   link.Attributes.Add("onclick", String.Format("showCalendarControl({0}, '{1}', '{2}')", 4, txtFDate.ClientID, txtTDate.ClientID);
}

（您还需要在链接中添加 ID 和 runat="server"。我还假设 txtFDate 已在您的 EditTemplate 中声明，尽管它不存在。ControlNo 参数可以是数据键而不是常量和例子一样，不清楚它是什么）

然后，在您的函数中，使用 clientID 参数获取文本框：

function showCalendarControl(ControlNo, txtFDateClientID, txtTDateClientID) {
var textField;
if(ControlNo==3)
{
textField=document.getElementById(txtFDateClientID);
}
if(ControlNo==4)
{
textField=document.getElementById(txtTDateClientID);
}
  calendarControl.show(textField);
}

Answer 2

问题是每个控件都应该有唯一的服务器 ID。因此，放置在模板内的服务器端控件会根据您在模板中指定的 ID 使用不同的自动生成的 ID 多次呈现。如果您查看生成的 html，您可以很容易地看到它。因此，您的 js 代码仅访问具有硬编码 id 的 html 元素。我猜它放在第一行。

简单的解决方案是用以下方式描述你的文本框

<asp:TextBox ID="txtTDate" runat="server" CssClass="txtTDate" Text='<%#((DateTime)DataBinder.Eval(Container.DataItem,"ToDate")).ToShortDateString()%>'>
                                    </asp:TextBox>

然后按如下方式修改js函数：

function showCalendarControl(ControlNo, index) {
var textField;
if(ControlNo==3)
{
    textField=document.getElementsByClassName('txtFDate')[index];
}
if(ControlNo==4)
{
    textField=document.getElementsByClassName('txtTDate')[index];
}
  calendarControl.show(textField);
}

并修改您的链接如下：

<a onclick="showCalendarControl(4, <%# Container.DataItemIndex %>)">

更新了答案 DataItemContainer 有 DataItemIndex 属性，在这种情况下必须使用。