AspNetCore MVC中使用JavaScript加载Partial View不生效问题排查

核心问题原因 #

你混淆了服务端Razor代码和客户端JavaScript代码的执行时机：
@ViewBag.PartialView="_StatePartial"是Razor语法，仅会在页面首次从服务端返回浏览器之前的渲染阶段执行，页面下发到浏览器后，服务端的ViewBag已经销毁，你在JS里写的这行Razor代码在渲染后就会消失，完全不会在JS运行时生效，自然没法切换Partial View。

解决方案 #

方案1：前端预渲染所有Partial，JS控制显示隐藏

适合Partial数量少、体积小的场景，性能最好：

1. 在cshtml中先预渲染所有可能用到的Partial，默认隐藏，给公共类名方便统一控制：

<div id="defaultPartial" class="partial-box">
    @await Html.PartialAsync("_DefaultDataMgmt")
</div>
<div id="statePartial" class="partial-box" style="display:none">
    @await Html.PartialAsync("_StatePartial")
</div>

2. 改写你的JS逻辑，直接控制DOM显隐即可：

function CheckAction()
{
    var cat = document.getElementById('CType').value;
    var op = document.getElementById('OType').value;
    // 先隐藏所有Partial容器
    document.querySelectorAll('.partial-box').forEach(el => el.style.display = 'none');

    if (op == "Add" && cat == "State")
    {
        document.getElementById('statePartial').style.display = 'block';
    }
    else
    {
        document.getElementById('defaultPartial').style.display = 'block';
    }
}

方案2：AJAX动态请求服务端加载Partial

适合Partial数量多、有动态数据依赖的场景：

1. 新增控制器接口，用于返回指定Partial内容：

[HttpGet]
public IActionResult GetPartialView(string viewName)
{
    // 加白名单校验，避免恶意请求其他视图文件
    var allowedViews = new[] {"_DefaultDataMgmt", "_StatePartial"};
    if (!allowedViews.Contains(viewName)) return BadRequest();
    return PartialView(viewName);
}

2. 在cshtml中预留Partial挂载容器：

<div id="partialContainer">
    @await Html.PartialAsync(ViewBag.PartialView)
</div>

3. 改写JS逻辑，请求接口后替换容器内容：

function CheckAction()
{
    var cat = document.getElementById('CType').value;
    var op = document.getElementById('OType').value;
    var targetView = op == "Add" && cat == "State" ? "_StatePartial" : "_DefaultDataMgmt";

    fetch(`/你的控制器名称/GetPartialView?viewName=${targetView}`)
        .then(res => res.text())
        .then(html => {
            document.getElementById('partialContainer').innerHTML = html;
        })
}

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