ASP UpdatePanel中Masonry布局在Dropdown变更后失效如何解决？

问题根因 #

UpdatePanel 执行异步局部回发后，会替换内部的DOM节点，原有Masonry实例绑定的旧DOM已经失效，且异步刷新完成的时机晚于你手动调用layout的时机，因此布局不生效，同时卡片内的图片未加载完成就计算布局也会导致高度计算错误、出现异常间距。

实现方案 #

方案1：监听ASP.NET Ajax异步回发完成事件（推荐） #

这是处理UpdatePanel刷新后执行客户端逻辑的标准方案，无需修改后台代码：

1. 首先在页面中引入依赖（如果还没引入）：jQuery、Masonry、imagesLoaded（用于等待图片加载完成，避免高度计算错误）
2. 页面添加以下客户端脚本：

// 全局存储Masonry实例，避免重复初始化
var masonryInstance = null;

// 页面首次加载完成初始化Masonry
$(document).ready(function () {
    initMasonry();
});

// 封装Masonry初始化/刷新逻辑
function initMasonry() {
    var $grid = $('.blog__masonery__wrap');
    // 销毁旧实例，清除残留绑定
    if (masonryInstance) {
        masonryInstance.masonry('destroy');
    }
    // 等待所有图片加载完成后再初始化布局
    $grid.imagesLoaded(function () {
        masonryInstance = $grid.masonry({
            itemSelector: '.bl__item',
            percentPosition: true
            // 其他你原本使用的Masonry配置项原样保留即可
        });
    });
}

// 监听UpdatePanel异步回发完成事件，每次刷新后重新初始化布局
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
    initMasonry();
});

方案2：后台主动注册客户端脚本 #

也可以在后台输出卡片完成后，主动注册脚本触发布局刷新：
在ddKat_SelectedIndexChanged方法最后，bestückeAusgabeCards();调用之后添加以下代码：

ScriptManager.RegisterStartupScript(this, this.GetType(), "reloadMasonry", "initMasonry();", true);

该方案和方案1效果一致，按需选择即可。

注意事项 #

• 必须引入imagesLoaded插件，否则卡片内的图片未加载完成时Masonry计算的高度不准，依然会出现异常间距
• 不建议直接调用masonry('layout')方法，因为UpdatePanel替换了整个卡片容器的子元素，原有实例的绑定已经失效，重新初始化实例比调用layout更稳定

内容的提问来源于stack exchange，提问作者comidos