使用 Ajax 加载 UserControl 时 Javascript 代码不起作用答案

【问题标题】：Javascript codes not working when UserControl loaded with Ajax使用 Ajax 加载 UserControl 时 Javascript 代码不起作用
【发布时间】：2011-05-27 20:07:36
【问题描述】：

感谢 Stilgar 解决了我的问题。在我将此文件添加到 UserControl 之后，我只是创建一个 js 文件并将我的所有代码写入其中，并且在我得到这个 UserControl 的 html 之后，我使用 $("#DivID").html(UserControlHTML); 它现在可以工作了。

大家好；

我正在使用 Ajax 和 Webservice 来加载用户控件。没关系，我可以轻松获取 UserControl 的 html 代码，但是有一个问题。

比如UserControl的html代码就是这样的。

<h3>Header</h3>
<div id="content">
    <p>lorem ipsum dolor sit amet...</p>
</div>
<script type="text/javascript">
        alert("This is a message");
</script>
<h3>Footer</h3>

请求用户控件的html代码的Javascript代码
(使用 UserControlYukle("UserControls/Article.ascx"); )

//This is a function that i request UserControl's html code from WebService
function UserControlYukle(ControlPath) {
    PersonalWebPage.Services.LoadUserControl.GetControlHtml(ControlPath, Success, Failed);
}
function Success(result) {
    var RsltElem= $get("Icerik");
    RsltElem.innerHTML = result;
}
function Failed(error) {
    alert(error.get_message());
}

Web 服务代码 (LoadUserControl.asmx)

//This is the code block which is in WebService 
//and returning back UserControl's html code.
public string GetControlHtml(string controlLocation)
{
    Page page = new Page();
    UserControl userControl = (UserControl)page.LoadControl("~/UserControls/" + controlLocation);
    userControl.EnableViewState = false;
    HtmlForm form = new HtmlForm();
    form.Controls.Add(userControl);
    page.Controls.Add(form);
    StringWriter textWriter = new StringWriter();
    HttpContext.Current.Server.Execute(page, textWriter, false);
    return textWriter.ToString();
}

当我得到这个 html 代码并将其插入到 div 的 innerHTML 时。 html 看起来应该。但是写在用户控件上的javascript代码不起作用。它应该提醒我，但事实并非如此。

【问题讨论】：

您是否使用DynamicPopulate 扩展器来执行此操作？发布更多的服务器端代码会有很大帮助。
我添加了所有在整个场景中有效的代码。

标签： javascript asp.net html ajax

【解决方案1】：

似乎分配 innerHtml 属性不会触发 JS 执行。如果这是您经常使用的模式，您可以按照约定定义一些函数，例如 ajaxCallbackControlName 其中 ControlName 是当前控件的名称。然后将警报包装在该函数中，并在调用警报的地方调用该函数。这样，控件在正常加载（而不是通过服务）时将正常工作。另一方面，在服务的成功函数中，您应该能够像这样调用该函数：

window["ajaxCallback" + controlName]();

（详情请参阅How to execute a JavaScript function when I have its name as a string）

但是，如果使用这种方法，如果页面上有同一个控件的多个实例，则会出现问题，因为所有这些实例都会被触发。您可以通过将随机字符串作为参数添加到服务并将其添加到函数名称来解决此问题。

所有这些都是一个超级通用的解决方案，应该适用于任何控件并包含任何 js 代码，但实际上您可能需要更具体的解决方案，例如在 JS 文件中加载回调函数并制作用于加载特定控件的特定函数通过服务。设置好 innerHtml 属性后，就可以调用需要的回调函数了。

编辑：似乎设置 innerHTML 不会定义函数。所以你应该自己评估代码。这是一个简单的客户端示例。

<html>
    <body>
    test
    <br />
    <div id="testDiv"></div>
    <br />
    <input type="button" onclick="insert()" value="Insert" />
       <script type="text/javascript">
       function insert(){
        var element = document.getElementById("testDiv");
        element.innerHTML = "test innerHTML  <script id='loadScript' type='text/javascript'> function foo() {alert('test'); } <\/script> ";
        eval(document.getElementById("loadScript").innerHTML);
        foo();
        }
        </script>
    </body>
</html>

另一种方法是选择所有脚本元素，例如通过 JQuery 并评估它们的内容。还值得检查 JQuery API 是否具有某种功能来设置 HTML 和执行脚本。

编辑 2：JQuery html() 函数似乎正是这种行为。如果您使用的是 JQuery，您可以像这样更改您的 Success 函数：

function Success(result) {
    $("Icerik").html(result);
}

【讨论】：

Itried 了所有的东西，之后，我将