未找到 javascript 元素

Question

我的应用中有一个“导出到 excel”选项。当我单击该按钮时，我正在向用户显示一条确认消息。当用户单击确定时，我正在使用 JavaScript 调用单击事件。

<asp:Content ID="Content3" ContentPlaceHolderID="PagePlaceholder" runat="Server">
<asp:ScriptManager ID="smMainpage" runat="server">
</asp:ScriptManager>
<table style="width: 100%">
    <tr>
        <td colspan="2">
            <asp:UpdatePanel runat="server" ID="up">
                <ContentTemplate>
                    <div style="text-align: left; font-size: 8pt" id="div5" runat="server">
                        <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td align="right" style="width: 50%">
                                    <table>
                                        <tr>
                                            <td style="display: none">
                                                <asp:Button ID="btnblkupdate" runat="server" Text="None" OnClick="btnblkupdate_click" />
                                                <div>
                                                    <asp:Button ID="btnhdnExport" runat="server" OnClick="btnhdnExport_click" /></div>
                                            </td>
                                            <td>
                                                &nbsp;
                                                <asp:LinkButton ID="lnkExport" OnClick="lnkExport_Click" CssClass="customFont" runat="server"
                                                    Text="Export to Excel"></asp:LinkButton>
                                                &nbsp;
                                            </td>
                                            <td>
                                                &nbsp;
                                                <asp:LinkButton ID="lnkbtnFilter" OnClick="lnkbtnFilter_Click" CssClass="customFont"
                                                    runat="server" Text="Filter Data"></asp:LinkButton>
                                                &nbsp;
                                            </td>
                                            <td>
                                                <asp:LinkButton ID="lnkReset" OnClick="lnkReset_Click" Visible="false" CssClass="customFont"
                                                    runat="server" Text="Reset Filter"></asp:LinkButton>
                                                &nbsp;
                                            </td>
                                            <td>
                                                <asp:LinkButton ID="lnkbtnViewAll" OnClick="lnkbtnViewAll_Click" runat="server" Text="View All"></asp:LinkButton>
                                                &nbsp; Selected Records:<asp:Label ID="lblselTsks" Width="20px" Font-Size="10pt"
                                                    Font-Bold="true" runat="server" Text="0"></asp:Label>
                                                &nbsp;
                                            </td>
                                            <td>
                                                Total Records found:&nbsp;<asp:Label ID="lblTotRecCount" Font-Bold="true" runat="server"
                                                    ForeColor="Black" Font-Size="10pt" Text="0"></asp:Label>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </ContentTemplate>
                <Triggers>
                    <asp:PostBackTrigger ControlID="lnkExport" />
                    <asp:PostBackTrigger ControlID="btnhdnExport" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress5" EnableViewState="false" AssociatedUpdatePanelID="up"
                DisplayAfter="10" runat="server">
                <ProgressTemplate>
                </ProgressTemplate>
            </asp:UpdateProgress>
        </td>
    </tr>
</table>

protected void lnkExport_Click(object sender, EventArgs e)
{
    DataSet dsResult = new DataSet();
    try
    {
        string strName = string.Empty;
        clsSearch_BL clsObj = new clsSearch_BL();
        //dsResult = (DataSet)Session["SearchRes"];

        if (Session["detObj"] != null)
        {
            DetState detObj = (DetState)Session["detObj"];
            dsResult = clsObj.getSearchResults_BL(detObj);
            HashSet<string> orderIdclmtest = new HashSet<string>();
            int j = dsResult.Tables[0].Rows.Count;
            for (int k = 0; k < j; k++)
            {
               orderIdclmtest.Add( dsResult.Tables[0].Rows[k][1].ToString());
            }
             Session["orderIdclmtest"] = orderIdclmtest.ToString();

            HashSet<string> strtest = new HashSet<string>();
            strtest =(HashSet<string>)Session["orderIdclm"];

            var testttt=strtest.Except(orderIdclmtest).ToList();
            int cnt = testttt.Count;
            StringBuilder str = new StringBuilder();
            for (int i = 0; i < cnt; i++)
            {
                if (str.Length == 0)
                    str.Append(testttt[i]);
                else
                    str.Append(", " + testttt[i]);
            }
            ScriptManager.RegisterClientScriptBlock(this.up, this.GetType(), "export", "hdnExportExcel()", true);
            //if (testttt != null && testttt.Any())
            //{
            //    ScriptManager.RegisterClientScriptBlock(this.up, this.GetType(), "export", "hdnExportExcel('"+str+"')", true);
            //}
        }
    }
    catch (Exception ex)
    {
        log4net.Config.XmlConfigurator.Configure();
        log.Warn("Logging:" + ex);

    }
    finally {
        if(dsResult != null)
        dsResult.Dispose();
    }
}

function hdnExportExcel() {
if (confirm('You are about to miss the tasks do you want to continue?')) {
    document.getElementById('ctl00_PagePlaceholder_btnhdnExport').click();
}
else {
    return false;
}}

我的问题是document.getElementById('ctl00_PagePlaceholder_btnhdnExport') 为空。但在页面的源代码中，我可以看到元素 ID 为 ctl00_PagePlaceholder_btnhdnExport

我不知道为什么它不起作用。我猜这是因为更新面板中的回发触发器。我尝试将btnhdnExport 放在更新面板之外并将其从触发器选项中删除。但它没有用。有什么建议吗？

提前致谢

Answer 1

正如 Ankur 所说，在加载 JavaScript 时（页面正在动态创建），您的元素 ID 无法访问。

我会建议改变

document.getElementById('ctl00_PagePlaceholder_btnhdnExport')

到

document.getElementById('btnhdnExport')

Answer 2

当 UpdatePanel 更新时，它会替换其容器 <div> 中的所有内容。在调用您的 JS 代码时，该按钮实际上并不存在。解决此问题的一种方法是在 UpdatePanel 完成后使用 .NET 的 PageRequestManager 调用您的 JS 代码。试试这样的：

function hdnExportExcel() {

  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_pageLoaded(function() {

      if (confirm('You are about to miss the tasks do you want to continue?')) {
          document.getElementById('<%= btnhdnExport.ClientID %>').click();
      }
      else {
          return false;
      }
  }

}

您会注意到我也没有对按钮的 ID 值进行硬编码。您需要避免对 .NET 动态生成的任何 id 值进行硬编码，因为它们会在您的页面结构将来发生变化时发生变化。在页面的其他地方进行不相关的更改并在测试或以后发现以前可靠的功能现在被破坏了，这可不是一件有趣的事。