ASPX页面点击其他DOM元素后API加载的无序列表数据丢失如何解决？

• 核心原因是ASP.NET Web Forms的回发（PostBack）机制：页面中使用的服务器端按钮（<asp:Button>等服务端控件）点击后默认会触发表单提交，触发整页回发，浏览器会重新加载服务端返回的初始HTML。你通过JS动态插入到<ul id="vendorMarketList">中的<li>元素仅存在于客户端DOM中，不属于服务端输出的初始页面内容，回发后自然会被清空。
• 次要可能性：其他按钮的点击事件逻辑中包含对#vendorMarketList元素的内容清空、父节点重绘操作，或是事件冒泡触发了未预期的DOM重置逻辑。

分场景适配即可解决：

场景1：按钮仅需执行客户端逻辑，无需和服务端交互 #

直接禁用按钮的回发行为即可：

• 如果是原生HTML按钮，明确指定type="button"，避免被识别为提交按钮：

<button type="button" id="yourBtn">点击操作</button>

• 如果是ASP.NET服务端按钮，添加UseSubmitBehavior="false"和OnClientClick="return false;"属性禁止回发：

<asp:Button runat="server" ID="yourBtn" Text="点击操作" UseSubmitBehavior="false" OnClientClick="return false;" />

场景2：按钮需要执行服务端逻辑，无法禁止回发 #

将接口返回的数据持久化存储，页面回发后自动重新渲染列表即可，步骤如下：

1. 首先优化原有列表渲染函数，避免重复追加数据，同时提升安全性：

function makeVendorMarketList(vendorMarket) {
    const listEl = document.getElementById("vendorMarketList");
    // 先清空原有内容，避免重复渲染
    listEl.innerHTML = '';
    if (!vendorMarket || vendorMarket.length <= 0) return;

    vendorMarket.sort(function (a, b) {
        return (a.marketName < b.marketName) ? -1 : (a.marketName > b.marketName) ? 1 : 0;
    }); 
    // 用for of遍历数组更稳妥，避免for in遍历到数组原型链上的额外属性
    for (const marketItem of vendorMarket) {
        if(marketItem.marketName){
            const z = document.createElement('li');
            // 用textContent代替innerHTML，避免XSS注入风险
            z.textContent = marketItem.marketName;
            listEl.appendChild(z);
        }
    }
}

2. 页面添加服务端隐藏域，用于存储序列化后的列表数据：

<asp:HiddenField ID="hfVendorMarket" runat="server" />

3. 接口请求拿到数据后，同时将数据存入隐藏域再执行渲染：

// 这里是你请求API拿到vendorMarket后的逻辑
const vendorMarket = 接口返回的数据;
// 序列化数据存入隐藏域，回发后数据不会丢失
document.getElementById('<%= hfVendorMarket.ClientID %>').value = JSON.stringify(vendorMarket);
makeVendorMarketList(vendorMarket);

4. 添加页面加载完成后的自动渲染逻辑，整页回发或局部异步回发后都会自动恢复列表：

// 整页加载完成后执行
window.onload = function() {
    const savedData = document.getElementById('<%= hfVendorMarket.ClientID %>').value;
    if (savedData) {
        makeVendorMarketList(JSON.parse(savedData));
    }
}
// 如果使用了UpdatePanel做局部异步回发，需要额外添加异步回发完成后的监听
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    const savedData = document.getElementById('<%= hfVendorMarket.ClientID %>').value;
    if (savedData) {
        makeVendorMarketList(JSON.parse(savedData));
    }
});

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