ASP.NET Core MVC：Ajax传值后无法渲染WorkItemTable新视图

原因分析 #

你通过Ajax发起请求后，控制器已正确生成WorkItemTable视图的HTML内容，但当前JS代码仅执行了弹窗提示，未对返回的HTML内容做渲染处理，因此视图无法显示。

方案一：在当前页面指定区域加载视图 #

步骤1：添加视图容器 #

在当前视图中新增一个用于承载新视图的容器：

<div id="workItemTableContainer"></div>

步骤2：修改Ajax回调逻辑 #

更新JS代码，在success回调中将控制器返回的HTML插入到容器中：

function GetSelectedAreaPathChildren3() {
    var selectedAreaPathItems = '';
    $("#AreaPathMultiSelectDropdownList :selected").each(function () {
        selectedAreaPathItems += this.value + ";";
    });

    var selectedIterationPathItems = '';
    $("#IterationPathMultiSelectDropdownList :selected").each(function () {
        selectedIterationPathItems += this.value + ";";
    });

    console.log(selectedAreaPathItems);
    $.ajax({
        url: '@Url.Action("WorkItemTable", "PbcAzureDevOps")',
        type: "POST",
        data: { selectedAreaPathItems, selectedIterationPathItems },
        success: function (response) {
            // 将返回的视图HTML插入指定容器
            $("#workItemTableContainer").html(response);
        }
    });
}

方案二：直接跳转到新页面显示视图 #

如果需要单独打开新页面展示视图，可放弃Ajax，改用表单提交或URL跳转：

方法1：表单提交 #

步骤1：添加表单结构

在当前视图中插入表单：

<form id="workItemForm" action='@Url.Action("WorkItemTable", "PbcAzureDevOps")' method="POST">
    <input type="hidden" id="selectedAreaPath" name="selectedAreaPathItems" />
    <input type="hidden" id="selectedIterationPath" name="selectedIterationPathItems" />
</form>

步骤2：修改JS提交逻辑

更新JS代码，填充隐藏字段后提交表单：

function GetSelectedAreaPathChildren3() {
    var selectedAreaPathItems = '';
    $("#AreaPathMultiSelectDropdownList :selected").each(function () {
        selectedAreaPathItems += this.value + ";";
    });

    var selectedIterationPathItems = '';
    $("#IterationPathMultiSelectDropdownList :selected").each(function () {
        selectedIterationPathItems += this.value + ";";
    });

    // 填充隐藏字段值
    $("#selectedAreaPath").val(selectedAreaPathItems);
    $("#selectedIterationPath").val(selectedIterationPathItems);
    // 提交表单跳转至目标视图
    $("#workItemForm").submit();
}

方法2：构造URL跳转（GET方式） #

步骤1：修改控制器请求方式

为控制器方法添加[HttpGet]特性，支持GET请求：

[HttpGet]
public async Task<IActionResult> WorkItemTable(string selectedAreaPathItems, string selectedIterationPathItems)
{
    List<WorkItemInfo> retrievedWorkItems =
        await GetAllSelectedWorkItems(selectedAreaPathItems, selectedIterationPathItems);

    return View(retrievedWorkItems);
}

步骤2：修改JS跳转逻辑

更新JS代码，构造URL并跳转：

function GetSelectedAreaPathChildren3() {
    var selectedAreaPathItems = '';
    $("#AreaPathMultiSelectDropdownList :selected").each(function () {
        selectedAreaPathItems += this.value + ";";
    });

    var selectedIterationPathItems = '';
    $("#IterationPathMultiSelectDropdownList :selected").each(function () {
        selectedIterationPathItems += this.value + ";";
    });

    // 构造带参数的跳转URL
    var url = '@Url.Action("WorkItemTable", "PbcAzureDevOps")' + 
              '?selectedAreaPathItems=' + encodeURIComponent(selectedAreaPathItems) + 
              '&selectedIterationPathItems=' + encodeURIComponent(selectedIterationPathItems);
    // 跳转到目标视图页面
    window.location.href = url;
}

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