更新面板内动态添加的用户控件内部的Javascript函数未定义

Posted 2023-05-08

【中文标题】更新面板内动态添加的用户控件内部的Javascript函数未定义

【英文标题】：Javascript Function Inside Dynamically Added User Control Inside Update Panel Is Not Defined

【发布时间】：2018-06-07 11:18:28

【问题描述】：

我有一个 ASP.NET Webforms 页面，该页面很大程度上是根据从数据库接收到的信息动态生成的。控件被注入到 UpdatePanel 中。在大多数情况下，一切正常，除了一个控件包含一个 javascript 函数，当用户单击控件内的按钮时执行该函数。该控件在测试页面上完美运行，但在此动态创建的页面中使用时，单击该按钮会返回一个 JS 控制台错误，指出该函数“未定义”，即使通过浏览器进行的页面源检查显示它存在。在将该控件注入页面后尝试通过 chrome 开发人员工具控制台执行该功能会产生相同的错误。如何使函数可以执行？

在高级别/伪代码如下所示：

<Page>
...
     <DynamicWizardControl>
          <UpdatePanel>
               <!--dyanamically injected stuff-->
               <WizardDocumentSubmissionControl>
                    <DocumentSubmissionControl ID="Attachments" runat="server">
                         <asp:Textbox ID='txtFile' runat='server'></asp:Textbox>
                         <asp:Button ID='btnAdd' runat='server' Text='Add File' />
                         <script>
                              function submitFile<%=btnAdd.ClientID%>() 
                                   alert($('#<%=txtFile.ClientID%>').val());
                              
                         </script>
                    </DocumentSubmissionControl>
               </WizardDocumentSubmissionControl>
               <!--End Dynamically Injected Stuff-->
          </UpdatePanel>
     </DynamicWizardControl>
</Page>

WizardDocumentSubmissionControl 的代码隐藏

Page_Load
Attachments.JSSubmitButton.OnClientClick = Attachments.SubmitFileJSFunctionName

DocumentSubmissionControl 的代码隐藏

Public ReadOnly Property SubmitFileJSFunctionName As String
    Get
        Return "submitFile" & btnAdd.ClientID
    End Get
End Property
Public ReadOnly Property JSSubmitButton As Button
    Get
        Return btnAddJS
    End Get
End Property

【参考方案1】：

所以动态注入的控件似乎没有将 javascript 注册到 DOM。我通过使用 ScriptManager.RegisterClientScriptBlock 注册整个 javascript 函数来让它工作，这是我希望避免的，因为我觉得 JS 应该存在于控件的 html 部分中，而不是后面的代码。如果有人知道更好的方法，请告诉我。