如何将部分剃刀页面加载到剃刀视图中答案

【问题标题】：How to load partial razor page into razor view如何将部分剃刀页面加载到剃刀视图中
【发布时间】：2018-04-24 23:22:28
【问题描述】：

我正在尝试用 razor 页面替换我的视图组件，但似乎无法加载部分 razor 页面，因为预计会传递模型，但我的理解是应该声明 razor 页面的模型在 OnGetAsync 方法中。这是我的代码...

剃刀页面

@page "{id:int}"
@model _BackgroundModel

<form method="POST">
    <div>Name: <input asp-for="Description" /></div>
    <input type="submit" />
</form>

Razor 页面代码隐藏

public class _BackgroundModel : PageModel
{
    private readonly IDataClient _dataClient;

    public _BackgroundModel(IDataClient dataClient)
    {
        _dataClient = dataClient;
    }

    [BindProperty]
    public BackgroundDataModel Background { get; set; }

    public async Task OnGetAsync(int id)
    {
        Background = await _dataClient.GetBackground(id);
    }

    public async Task OnPostAsync()
    {
        if (ModelState.IsValid)
        {
            await _dataClient.PostBackground(Background);
        }
    }

}

剃刀视图

<div class="tab-pane fade" id="client-background-tab">
    <div class="row">
        <div class="col-sm-12">
            @await Html.PartialAsync("/Pages/Client/_Background.cshtml", new { id = 1 })
        </div>
    </div>
</div>

页面加载错误

InvalidOperationException：传入的模型项 ViewDataDictionary 的类型为“f__AnonymousType0`1[System.Int32]”，但是这个 ViewDataDictionary 实例需要一个类型的模型项 'WebApp.Pages.Client._BackgroundModel'

在此示例中（根据 MS 在其文档中推荐的方法），模型设置在 OnGetAsync 方法中，该方法应在请求页面时运行。我也试过 @await Html.RenderPartialAsync("/Pages/Client/_Background.cshtml", new { id = 1 }) 但同样的错误结果。

如何将剃须刀页面加载到现有视图中？

【问题讨论】：

您的视图模型是_BackgroundModel ，但您正在使用int 值调用视图。试试@await Html.PartialAsync("/Pages/Client/_Background.cshtml", new _BackgroundModel ())之类的东西。
@Azim 模型应该在调用视图未传递的代码隐藏文件中的OnGetAsync 内创建。页面加载需要在剃须刀页面@page "{id:int}" 顶部定义的 int 值，当页面加载时，此 int 值将传递给 OnGetAsync(int id)，这就是我从调用视图而不是模型传递 int 值的原因.
如果您将模型传递给局部视图，那么为什么需要将“id”传递给它
@Saineshwar 这就是剃须刀页面的工作方式。它们本质上在代码隐藏文件中有自己的控制器，因此不需要或期望传递模型。这与使用@await Component.InvokeAsync("name") 调用的视图组件的概念相同。我正在寻找一种以类似方式加载剃须刀页面的方法，但根据 MS docs Razor Pages 的 cmets 中的回复，这似乎是不可能的

标签： asp.net-mvc razor asp.net-core-mvc asp.net-core-2.0 razor-pages

【解决方案1】：

Microsoft 确认这无法实现，因此不能使用 razor 页面替代视图组件。

查看他们文档的 cmets...

MS docs

@RickAndMSFT 版主15 小时前 @OjM您可以重定向到页面，或者您可以将核心视图>代码变成部分代码并从两者中调用它。

页面不能替代部分或视图组件。

【讨论】：