在Razor Pages中点击按钮显示不同局部视图并传递模型

你的代码核心问题在于：@Html.Partial是服务器端Razor语法，页面加载时就会直接执行并渲染对应的局部视图，不会等到按钮点击时才触发。所以点击按钮时只是把提前渲染好的内容重复插入，而且模型参数也根本没正确传递。

方案1：AJAX动态加载（推荐，适合需获取最新数据的场景） #

通过控制器Action返回带模型的局部视图，再用AJAX请求获取内容：

1. 添加控制器Action #

在对应控制器中编写返回局部视图的方法，负责获取并传递模型：

public ActionResult LoadArticles()
{
    var articles = // 这里编写获取articles模型的逻辑，比如从数据库查询
    return PartialView("Shared/_Articles", articles);
}

public ActionResult LoadVideos()
{
    var videos = // 获取videos模型数据
    return PartialView("Shared/_Videos", videos);
}

public ActionResult LoadNotebooks()
{
    var notebooks = // 获取notebooks模型数据
    return PartialView("Shared/_Notebooks", notebooks);
}

2. 修改前端JS代码 #

用AJAX请求上述Action，将返回的局部视图插入主内容区：

$(document).ready(function () {
    $("#title1").click(function () {
        $.ajax({
            url: '@Url.Action("LoadArticles")',
            type: 'GET',
            success: function (result) {
                $("#main-content").html(result);
            }
        });
    });

    $("#title2").click(function () {
        $.ajax({
            url: '@Url.Action("LoadVideos")',
            type: 'GET',
            success: function (result) {
                $("#main-content").html(result);
            }
        });
    });

    $("#title3").click(function () {
        $.ajax({
            url: '@Url.Action("LoadNotebooks")',
            type: 'GET',
            success: function (result) {
                $("#main-content").html(result);
            }
        });
    });
});

方案2：提前渲染切换显示（适合数据固定无需更新的场景） #

如果模型数据在页面加载时就已确定，可提前渲染所有局部视图到隐藏容器，点击按钮时切换显示：

1. 视图中添加隐藏容器 #

<!-- 提前渲染所有局部视图并隐藏 -->
<div style="display: none;" id="articles-container">
    @Html.Partial("Shared/_Articles", Model.Articles)
</div>
<div style="display: none;" id="videos-container">
    @Html.Partial("Shared/_Videos", Model.Videos)
</div>
<div style="display: none;" id="notebooks-container">
    @Html.Partial("Shared/_Notebooks", Model.Notebooks)
</div>

<!-- 主内容展示区 -->
<div id="main-content"></div>

2. 修改前端JS代码 #

点击按钮时将对应容器的内容复制到主区域：

$(document).ready(function () {
    $("#title1").click(function () {
        $("#main-content").html($("#articles-container").html());
    });

    $("#title2").click(function () {
        $("#main-content").html($("#videos-container").html());
    });

    $("#title3").click(function () {
        $("#main-content").html($("#notebooks-container").html());
    });
});

• 检查局部视图名称拼写：你代码中写的_Notebookss多了一个s，要和实际文件名称完全一致，否则会抛出视图找不到的错误。
• 方案2中，父视图的Model必须包含Articles、Videos、Notebooks属性，才能正确传递给对应的局部视图。

内容的提问来源于stack exchange，提问作者Mehmet Ali K.