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

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" 。我還假設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屬性，在這種情況下必須使用該屬性。