抠丁客 抠丁客
项目
编辑 (2025/12/27)

ASP.NET Core MVC / Razor Pages UI：JavaScript DOM API

abp.dom（文档对象模型）提供了一组事件，您可以通过订阅这些事件来获知页面（DOM）中动态添加或移除元素的情况。

当您在页面初始化后动态向 DOM 中添加元素（例如通过 AJAX 获取某些 HTML 元素）时，若需要初始化这些新加载的元素，该功能尤其有用。

ABP 使用 MutationObserver 来监听 DOM 中的变化。

节点事件

onNodeAdded

此事件在元素被添加到 DOM 时触发。示例：

abp.dom.onNodeAdded(function(args){
    console.log(args.$el);
});

args 对象包含以下字段：

  • $el：用于获取插入 DOM 的新元素的 jQuery 选择器。

onNodeRemoved

此事件在元素从 DOM 中移除时触发。示例：

abp.dom.onNodeRemoved(function(args){
    console.log(args.$el);
});

args 对象包含以下字段：

  • $el：用于获取从 DOM 中移除的元素的 jQuery 选择器。

预构建初始化器

ABP 使用 DOM 事件来初始化某些类型的 HTML 元素，这些元素在页面初始化完成后才被添加到 DOM 中。

注意：如果这些元素已包含在初始 DOM 中，同样的初始化器也会生效。因此，无论它们是初始加载还是延迟加载，都能按预期工作。

表单初始化器

表单初始化器（定义为 abp.dom.initializers.initializeForms）用于初始化延迟加载的表单：

  • 自动启用表单的 unobtrusive 验证。
  • 在提交表单时自动显示确认消息。要启用此功能，只需在 form 元素上添加 data-confirm 属性并设置消息（例如 data-confirm="确定吗？"）。
  • 如果 form 元素具有 data-ajaxForm="true" 属性，则自动对该元素调用 .abpAjaxForm()，使表单通过 AJAX 提交。

更多内容请参阅表单与验证文档。

脚本初始化器

脚本初始化器（abp.dom.initializers.initializeScript）可以为 DOM 元素执行 JavaScript 代码。

示例：延迟加载组件并在元素加载完成后执行某些代码

假设您有一个用于加载元素的容器：

<div id="LazyComponent"></div>

以下是通过 AJAX 从服务器加载并插入到容器中的组件：

<div data-script-class="MyCustomClass">
    <p>示例消息</p>
</div>

data-script-class="MyCustomClass" 指定了用于对该元素执行某些逻辑的 JavaScript 类：

MyCustomClass 是一个全局对象，定义如下：

MyCustomClass = function(){

    function initDom($el){
        $el.css('color', 'red');
    }

    return {
        initDom: initDom
    }
};

initDom 是由 ABP 调用的函数。$el 参数是加载的 HTML 元素，作为 jQuery 选择器。

最后，您可以通过 AJAX 调用将组件加载到容器中：

$(function () {
    setTimeout(function(){
        $.get('/get-my-element').then(function(response){
           $('#LazyComponent').html(response);
        });
    }, 2000);
});

如果您不知道组件将如何以及何时加载到 DOM 中，脚本初始化系统尤其有用。例如，当您在库中开发了可重用的 UI 组件，并且希望应用程序开发人员无需关心如何在不同使用场景下初始化组件时。

如果组件在初始 DOM 中已加载，脚本初始化将不会生效。在这种情况下，您需要负责初始化它。

其他初始化器

以下 Bootstrap 组件和库在添加到 DOM 时会自动初始化：

  • Tooltip（工具提示）
  • Popover（弹出框）
  • Timeago（时间显示）
在本文档中