MagicAjax：自定义“正在加载...”消息

引言

我需要做标题中所说的，并且在 Google 上搜索这个主题并没有得到很大的帮助，所以这就是我们在这里的原因... 我同意这可能很明显该怎么做，但有时... 在压力下... 这样的文章可能会有很大的帮助。

背景

基本上，我看到三种最方便的方法来自定义 MagicAjax 库的“正在加载...”消息

1. 挂钩到库代码... 但对于如此小的自定义来说，最好不要这样做。
2. 在你的页面中添加一个名为 __AjaxCall_Wait 的 HTML 元素，这是库所期望的。
3. 编写一个 ASP.NET 控制，它将渲染一个名为 __AjaxCall_Wait 的 HTML 元素（库所期望的）。

挂钩到库代码

我从这个开始，因为阅读库 JavaScript 是了解你需要做什么的方式。

• 我使用 Lutz Roeder 的 Reflector 来反编译 *.dll，而不是下载开源代码，因为 Reflector 可以一键为你生成所有你需要的东西，以便将库项目简单地包含到一个解决方案中并使用 Visual Studio 进行操作。

• 阅读库 JavaScript，我看到了这个函数

  function CreateWaitElement() {
      var elem = document.getElementById('__AjaxCall_Wait');
      if (!elem) {
          elem = document.createElement("div");
          elem.id = '__AjaxCall_Wait';
          elem.style.position = 'absolute';
          elem.style.height = 17;
          elem.style.paddingLeft = "3px";
          elem.style.paddingRight = "3px";
          elem.style.fontSize = "11px";
          elem.style.fontFamily = 'Arial, Verdana, Tahoma';
          elem.style.border = "#000000 1px solid";
          elem.style.backgroundColor = "DimGray";
          elem.style.color = "#ffffff";
          elem.innerHTML = 'Loading ...';
          elem.style.visibility = 'hidden';
          document.body.insertBefore(elem, document.body.firstChild);
      }
      waitElement = elem;
  }

  当然，你可以挂钩到 elem.innerHTML ，比如一个 img 标签，但这并不是一个好主意。

• 从现在开始，很明显库期望在宿主页面中找到一个名为 __AjaxCall_Wait 的 HTML 元素，否则该元素将自动创建。

在你的页面中添加一个名为 __AjaxCall_Wait 的 HTML 元素，这是库所期望的。

只需挂钩一个...

<asp:Image id="__AjaxCall_Wait" runat="server" ImageUrl="~/img/wait.gif"
style="position: absolute; visibility: hidden"></asp:Image> 

... 在 body 和 form 之间。

编写一个 ASP.NET 控制...

这将是一个非常简单的控制，仅用于渲染所需的名为 __AjaxCall_Wait 的 HTML 元素；再次将其放置在页面 body 和 form 标签之间。当你想在具有所有不同基类的页面中运行一些初始化代码时，这种方法很有用。请注意，控制渲染的 HTML 元素将具有一个 id，它是页面中 ASP.NET 控制的 id、一个“_”以及控制内 asp:Image 的 id 的连接。

所以，如果控制在页面上具有 id="__AjaxCall"，并且 <asp:Image... 在控制内具有 id="Wait"，那么你最终将获得库所期望的元素的正确 id="__AjaxCall_Wait" - 作为库所期望的。

希望这有所帮助。

历史

• 2008 年 7 月 5 日：初始版本