ASP.NET MVC：如何从控制器通过AJAX返回列表至视图并在页面使用

问题根源 #

• 异步执行特性：AJAX请求是异步的，你在HTML页面直接调用listNames时，AJAX的success回调还未执行，变量还没被赋值。
• 作用域隔离：如果listNames未声明为全局变量，或者JS文件的作用域限制，HTML页面的代码无法访问到这个变量。

具体解决方案 #

方案1：将数据处理逻辑放在success回调内（推荐） #

既然AJAX是异步的，所有依赖返回数据的操作都应该放在success回调里，确保数据已获取完成再执行：

function getNames(_id, _name) {
    $.ajax({
        type: 'Post',
        url: '/ControllerName/GetNames', // 替换为你的控制器全名+Action路径，比如/Home/GetNames
        data: { id: _id, name: _name},
        success: function (listName) {
            const listNames = JSON.parse(listName);
            // 在这里直接处理列表，示例：渲染到页面元素
            const nameListElement = document.getElementById('nameList');
            for(let i = 0; i < listNames.length; i++){
                const li = document.createElement('li');
                li.textContent = listNames[i];
                nameListElement.appendChild(li);
            }
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
}

方案2：用Promise封装请求，支持外部调用 #

如果需要在HTML页面的其他逻辑中处理数据，可以把AJAX请求封装成Promise，外部通过async/await或.then()获取数据：

// 独立JS文件中的代码
function getNames(_id, _name) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'Post',
            url: '/ControllerName/GetNames',
            data: { id: _id, name: _name},
            success: function (listName) {
                const listNames = JSON.parse(listName);
                resolve(listNames);
            },
            error: function (response) {
                reject(response.responseText);
            }
        });
    });
}

在HTML页面的脚本中调用：

<script>
async function handleNameList() {
    try {
        const names = await getNames(1, "test");
        // 此处遍历处理数据
        for(let name of names){
            console.log(name);
        }
    } catch(err) {
        alert(err);
    }
}

// 触发请求与处理
handleNameList();
</script>

方案3：声明全局变量+事件通知（不推荐，易引发作用域污染） #

如果必须使用全局变量，先在全局作用域声明，再通过自定义事件通知HTML页面数据就绪：

// 独立JS文件开头声明全局变量
window.listNames = [];

function getNames(_id, _name) {
    $.ajax({
        type: 'Post',
        url: '/ControllerName/GetNames',
        data: { id: _id, name: _name},
        success: function (listName) {
            window.listNames = JSON.parse(listName);
            // 触发自定义事件，通知数据已加载
            $(document).trigger('namesLoaded');
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
}

在HTML页面中监听事件，确保数据就绪后再处理：

<script>
$(document).on('namesLoaded', function(){
    // 现在可安全使用全局变量listNames
    for(let item of window.listNames){
        console.log(item);
    }
});
</script>

额外优化建议 #

控制器返回数据时，直接返回JsonResult，前端无需手动JSON.parse：

public JsonResult GetNames(int id, string name)
{
    var nameList = // 你的列表获取逻辑
    return Json(nameList, JsonRequestBehavior.AllowGet);
}

此时前端success回调可直接使用const listNames = listName。

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