当UserControl加载Ajax时Javascript代码无法工作

谢谢Stilgar解决了我的问题。我刚刚创建一个js文件，并在将该文件添加到UserControl后写入所有代码，并在获取此UserControl的html后，我使用$（“#DivID”）.html（UserControlHTML）; 现在工作。当UserControl加载Ajax时Javascript代码无法工作

大家好;

Im使用Ajax和Webservice加载UserControls。它确定我可以很容易地获得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>

的Javascript代码的用户控件的请求的HTML代码
（使用UserControlYukle（ “用户控件/ 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看起来应该如此。但是在usercontrol上写的javascript代码不起作用。它应该让我警觉，但它不是。

来源

2010-12-19 Ümit AKKAYA

您使用[DynamicPopulate（http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DynamicPopulate/DynamicPopulate.aspx）扩展器来做到这一点？发布更多的服务器端代码会有很大帮助。 – 2010-12-19 12:19:20

我添加了整个场景中所有情感的代码。 – 2010-12-19 12:26:48

似乎分配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，你可以改变你的成功的功能是这样的：

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

来源

2010-12-19 12:43:13 Stilgar

Itried所有的东西和之后，我添加了

当UserControl加载Ajax时Javascript代码无法工作

回答

相关问题