AJAX请求后MVC控制器返回视图页面无变化的解决方案咨询

场景1：继续用AJAX实现局部刷新（保留页面框架，替换问卷内容） #

你的AJAX请求已经成功调用控制器并获取到视图HTML，但页面无变化是因为你没有将返回内容渲染到页面中。按以下步骤修改：

1. 在视图中添加承载问卷内容的容器：

<div id="questionnaireContainer"></div>
<input type="button" value="Aph" id="Aph" />

2. 修改AJAX的success回调，将返回的视图HTML插入容器：

$.ajax({
    type: "POST",
    url: '/User/GoThroughQuestions',
    data: {pageNumber : 0 , partialResults: dict, questionnaireName :"APH"},
    success: function (response) {
        // 把控制器返回的视图内容替换到容器内
        $("#questionnaireContainer").html(response);
    },
    error: function () {
        alert("Error while getting data");
    }
});

如果遇到Dictionary绑定异常，可改用JSON格式传递数据（需给控制器参数添加[FromBody]特性）：

$.ajax({
    type: "POST",
    url: '/User/GoThroughQuestions',
    contentType: "application/json",
    data: JSON.stringify({pageNumber : 0 , partialResults: dict, questionnaireName :"APH"}),
    success: function (response) {
        $("#questionnaireContainer").html(response);
    },
    error: function () {
        alert("Error while getting data");
    }
});

控制器参数调整示例：

// 建议封装成模型类，参数绑定更清晰
public class QuestionnaireRequest
{
    public int PageNumber { get; set; }
    public Dictionary<string, int> PartialResults { get; set; }
    public string QuestionnaireName { get; set; }
}

public async Task<IActionResult> GoThroughQuestionsAsync([FromBody] QuestionnaireRequest request)
{
    // 业务逻辑不变，用request对象获取参数即可
}

场景2：用普通POST表单实现页面跳转（完全刷新页面） #

如果需要跳转页面，无需使用AJAX，可动态生成表单并提交，将Dictionary键值对转为隐藏输入框，让MVC自动绑定到控制器参数：

修改按钮点击事件：

$("#Aph").on("click", function () {
    let dict = {
        "Investigative" :0,
        "Social" : 0,
        "Realist" : 0,
        "Artistic" : 0,
        "Antreprenorial" : 0,
        "Conventional" : 0
    };

    // 创建表单元素
    const form = $("<form>", {
        method: "POST",
        action: "/User/GoThroughQuestions"
    });

    // 添加基础参数
    form.append($("<input>", { type: "hidden", name: "pageNumber", value: 0 }));
    form.append($("<input>", { type: "hidden", name: "questionnaireName", value: "APH" }));

    // 遍历Dictionary生成隐藏输入框，name格式为`partialResults[键名]`
    Object.keys(dict).forEach(key => {
        form.append($("<input>", {
            type: "hidden",
            name: `partialResults[${key}]`,
            value: dict[key]
        }));
    });

    // 提交表单
    form.appendTo("body").submit();
});

控制器无需修改，MVC会自动将表单输入框绑定到Dictionary<string, int> partialResults参数，返回View后页面会自动刷新。

额外提示 #

• 优先用自定义模型类封装所有请求参数，避免零散参数导致的绑定问题，代码可读性也更强。
• 如果需要传递finalResults这类复杂模型，可将其属性拆分为多个隐藏输入框（如name="finalResults.Social"），或用TempData/Session暂存数据，避免在表单中传递大量字段。

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