在 Razor 页面上单击按钮时显示不同的部分视图

Question

我有一个视图，该视图包含三个按钮。我想在按钮单击时显示不同的部分视图。我还想将模型转移到这些部分视图。我尝试了下面的代码，但它不起作用。

 <script>

            $(document).ready(function () {

                $("#title1").click(function () {
                    $("#main-content").html('@Html.Partial("Shared/_Articles"), articles');
                });

                 $("#title2").click(function () {
                    $("#main-content").html('@Html.Partial("Shared/_Videos"), videos');
                });

                 $("#title3").click(function () {
                    $("#main-content").html('@Html.Partial("Shared/_Notebookss"), notebooks');
                });
            });
            
 </script>

Answer 1

下面是Index中的工作demo，大家可以参考一下。

load()

方法指向Index.cshtml razor页面，并将处理程序查询字符串参数设置为Title1/Title2/Title3。通过这种方式，我们指示框架在单击按钮时调用驻留在索引页面模型内的

OnGetTitle1()

处理程序。

索引.cshtml：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}


<button type="button" id="title1">title1</button>
<button type="button" id="title2">title2</button>
<button type="button" id="title3">title3</button>

<div id="main-content"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<script>
    $(document).ready(function () {

        $("#title1").click(function () {
            $("#main-content").load("/Index?handler=Title1");
        });
        $("#title2").click(function () {          
            $("#main-content").load("/Index?handler=Title2");
        });
        $("#title3").click(function () {
            $("#main-content").load("/Index?handler=Title3");
        });
    });
</script>

Index.cshtml.cs 中的 OnGetTitle1、OnGetTitle2、OnGetTitle3 处理程序如下所示：

public IActionResult OnGetTitle1()
{           
    var model = new Users() { Id = 1, Name ="aa"};
    return Partial("_Articles",model);
}
public IActionResult OnGetTitle2()
{
    var model = new Users() { Id = 2, Name = "bb" };
    return Partial("_Videos", model);
}
public IActionResult OnGetTitle3()
{
    var model = new Users() { Id = 3, Name = "cc" };
    return Partial("_Notebookss", model);
}

我创建一个用户模型：

 public class Users
 {
     public int Id { get; set; }
     public string Name { get; set; }
 }

_Articles、_Videos、_Notebookss 部分视图然后渲染模型如下：

@model razorpartial.Models.Users

Name:  @Model.Name
Id:   @Model.Id

结果：