Question

我有一个网页，可通过后端的LoadControl将同一个用户控件（.ascx）的多个实例动态加载到并更新面板中。在用户控件中，我具有要在用户控件完成加载时运行的javascript。但是，每次页面回发并添加新的usercontrol时，javascript都不会运行。

我尝试添加$（this）.load（function（）{...}）;在用户控件的开头，但这似乎并没有受到欢迎。我尝试使用RegisterStartupScript在用户控件的Page_Load的末尾运行一些脚本，但这似乎也没有运行。我无法在Google Chrome浏览器中进行调试，所以我不知道。

这是用户控件（.ascx）中的我的JavaScript：

<script type="text/javascript">

    // using the clientIDs as names so they only partain to this instance of sectionDetails on the facultyRequest page
    var <%=spanDateRange.ClientID%>,
        <%=aDateRange.ClientID%>, <%=aSpecificDates.ClientID%>;

    function initSection<%=ClientID%>() {
        <%=spanDateRange.ClientID%> = $('#<%=spanDateRange.ClientID%>')[0];
        <%=aDateRange.ClientID%> = $('#<%=aDateRange.ClientID%>')[0];
        <%=aSpecificDates.ClientID%> = $('#<%=aSpecificDates.ClientID%>')[0];

        // have to bind the events here because you can't use asp inside tag attributes

        $(<%=aDateRange.ClientID%>).click(function () {
            <%=spanDateRange.ClientID%>.hidden = false;
        });

        $(<%=aSpecificDates.ClientID%>).click(function () {
            <%=spanDateRange.ClientID%>.hidden = true;
        });

        <%=aDateRange.ClientID%>.click();
    }

</script>

spanDateRange，aDateRange，aSpecificDates是我的用户控件中的所有div（runat =“ server”）

这是.ascx.cs文件中的我的Page_Load：

 protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "initSection", "initSection" + ClientID + "();", true);
        }

这是我动态加载用户控件的多个副本的地方：

protected void LoadSections()
        {
            var numSections = utils.Utils.Clamp(int.Parse(tbNumSections.Text), int.Parse(tbNumSections.Attributes["Min"]), int.Parse(tbNumSections.Attributes["Max"]));
            for (int i = 2; i <= numSections && numSections != tbodySections.Controls.Count - 2; i++) // start at 2 because there's always 1 section, don't load any more sections if they're already loaded
            {
                var newSection = (usercontrols.sectionDetails)LoadControl("usercontrols/sectionDetails.ascx"); // load a new sectionDetails control
                newSection.SectionNumber = i;

                tbodySections.Controls.AddAt(i + 1, newSection);
            }
        }

我希望在加载每个部分之后，将捕获加载事件，或者将运行启动脚本，但是我认为动态加载的用户控件中没有任何javascript正在运行。我尝试将用户控件直接放入页面中，因此我知道我的JavaScript在语法上是正确的。

Answer 1

asp.net eval script in ajax html reponse

就这样！ ^^^

首先，我不得不将代码背后的LoadSections（）从Page_Load移到Page_Init。

然后，在我的UpdatePanel中，我有：

            // this function runs after each postback
            function pageLoad() {
                evaluateScripts('#<%=tbodySections.ClientID%>'); //pass the table body (tbodySections) so we can run the js inside each user control
            }

然后在母版页中，我有：

        // this will run any javascript in the selected div
    function evaluateScripts(divSelector) {
        $(divSelector).find('script').each(function () {
            if (this.src) {
                $('body').append(this);
            }
            else {
                var content = $(this).html();
                eval(content);
            }
        });
    }

每次回发后，我都可以动态加载所需数量的节，然后通过pageLoad和valuateScripts函数将js中的所有事件连接起来

Answer 2

我不确定您使用的 JavaScript 的语法。但是，在 ASCX 文件完全加载之前，听起来您的代码正在引用 ASCX 文件中的某些内容。

要完成此操作，您必须添加要在 ASCX 文件本身中运行的脚本。在 ASCX 文件的末尾，添加以下代码：

  <script type="text/javascript">
        window.addEventListener("load", function() 
        {
              alert('ascx loaded!');

             // enter your code here you want to run when ASCX is ready.
    });
  



</script>

当放在 ASCX 文件的末尾时，上面的内容会触发“ascx loaded！”在警报框中。您应该能够修改此示例以避免调用尚不存在的元素。

如何在动态加载的用户控件（ascx）中运行javascript？

2 个答案: