使用 ajax 动态加载用户控件并具有 jquery 文档就绪功能答案

【问题标题】：load user control dynamically with ajax AND have jquery document ready functionality使用 ajax 动态加载用户控件并具有 jquery 文档就绪功能
【发布时间】：2013-04-25 15:21:26
【问题描述】：

我有一个将通过

加载的用户控件

public static string RenderControl(Control control)
{
    var controlWriter = new StringWriter();
    var htmlWriter = new Html32TextWriter(tw);
    control.RenderControl(writer);
    htmlWriter.Close();            
    return controlWriter.ToString();
}

用AJAX写的html

$('#testDiv').html(result.d);

这是通过 ajax Post 调用的。它可以很好地加载用户控件，但由于 javascript 文档加载已经触发，我无法使用 jquery 的 document.Ready。

我的情况是 我需要动态加载一个用户控件并让 jquery document.ready 触发 或类似的东西。我宁愿不使用更新面板，但如果这是完成此操作的唯一方法，那么我将使用它。

什么是我的问题的优雅解决方案？

【问题讨论】：

标签： c# jquery ajax webforms

【解决方案1】：

您可以使用内置的 jQuery ajaxStop 事件在 ajax 调用完成时触发。

http://api.jquery.com/ajaxStop/

【讨论】：

酷，我还不知道那个事件。
如果我有一个 html 页面渲染，然后使用 ajax 帖子在其中渲染更多 html，主 html 内的 html 渲染是否可以访问 ajaxStop？
@gh9：我不确定你在问什么。一旦注册了 ajaxStop 回调，它将由页面上的任何 ajax 请求触发 - 甚至是由动态加载的内容触发的 ajax 请求。
好点，但这带来了另一个问题，这将在每个 ajax 停止时触发。因此，如果我有 3 个控件和 3 个 ajax 停止每个 ajax 请求将触发 3 个不同的 ajax 停止正确吗？
应该从 $(document) 调用 ajaxStop，因此它的行为类似于 .ready()。如果您将多个回调函数绑定到它，那么是的，它们将在每个 ajax 请求之后被调用。

【解决方案2】：

我通过在加载和显示 ajax 内容后触发的自定义事件解决了类似问题。

在ajax函数内部触发事件，加载显示后：

$(document).trigger('ajaxLoadCallback');

并在您的 document.ready 脚本中捕获它：

$(document).on('ajaxLoadCallback', function() {
    // Your ready functions
}

如果您为应该在 document.ready 之后执行的所有内容创建一个函数，那么您可以在 document.ready 和触发自定义事件之后调用此函数（例如 readyFunctions()）。

【讨论】：

【解决方案3】：

public partial class Default : Page 
{
  [WebMethod]
  public static string GetDate()
  {
    return DateTime.Now.ToString();
  }
}

$(function(){
$.ajax({
  type: "POST",
  url: "Default.aspx/GetDate",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(msg) {
    // Do something interesting here.
  }
});
});

【讨论】：

这就是我调用 webMethod 的方式，但这存在在页面加载后插入 Document.Ready javascript 的问题，因此 javascript 无法运行。
我不喜欢这样，因为它会将用户控件与调用页面联系起来。如果不更改调用页面代码，我无法即时切换用户控件。