Question

我得到控件的clientid，它放在javascript中gridview的Edit项模板中，而不需要去服务器端代码..

  <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"。我也假设在你的EditTemplate中声明了txtFDate，尽管它不在那里.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属性，在这种情况下必须使用该属性。

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

2 个答案: