可以将 ViewComponents 与 Razor 页面一起使用吗？

Question

我发现在 ASP.NET Core 2.0 中使用 ViewComponent 的 似乎存在限制。

我们有一个 ViewComponent，当从布局页面调用时，它工作得绝对完美。当我们从 Razor 页面调用相同的 ViewComponent 时，我们会收到以下错误。

传入 ViewDataDictionary 的模型项是类型，但此 ViewDataDictionary 实例需要类型为

的模型项

ViewComponent 似乎期望传递父 Razor 页面的模型类型，而不是为视图组件。

我还没有遇到 ViewComponent 从 Razor 页面中使用的任何示例，它们似乎仅用于布局页面（没有模型）。

谁能给我一个明确的是或否的问题：你能在 Razor 页面中使用 ViewComponent's 吗？如果可以的话，怎么样？

Answer 1

是的，你可以，我用一个搞笑的命名做了一个简单的例子。

查看组件class - 示例ViewView组件:)

namespace NetCoreUI.ViewComponents
{
    using Microsoft.AspNetCore.Mvc;
    using System.Threading.Tasks;

    public class SampleViewViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(Models.TestVm testVm)
        {
            testVm.TestName = "Changing name from ViewComponent.";

            return View(testVm);
        }
    }
}

此视图组件的默认视图：

@model NetCoreUI.Models.TestVm

<h1>This is viewcomponent.</h1>

<p>@Model.TestId</p>
<p>@Model.TestName</p>

我的 Razor 页面代码没有太多进展：

namespace NetCoreUI.Pages.Motorcycle
{
    using Microsoft.AspNetCore.Mvc.RazorPages;

    public class SampleModel : PageModel
    {
        public void OnGet()
        {

        }
    }
}

最后是调用我的 ViewComponent 的 Razor 页面视图：

@page
@model NetCoreUI.Pages.Motorcycle.SampleModel
@{
    ViewData["Title"] = "Sample";
}

<h2>Sample</h2>

<div>
    @await Component.InvokeAsync("SampleView", new { testVm = new Models.TestVm() })
</div>

我选择使用简单的 new TestVm() class 来调用我的 ViewComponent，但是这个 class 可以是 SampleModel 中的子集，您可以使用正确 class - 正确的 class 是您的 ViewComponent 引用的那个。

这是一个非常简单的示例，我不确定您的应用的结构如何，或者可能存在其他问题。

Answer 2

此外，根据 Iztoksson 的回答，如果您精通使用标签助手，则可以在调用 ViewComponent 时使用它

<div>    
   <vc:SampleView testVm = "new { testVm = new Models.TestVm() }"></vc:SampleView>
</div>

尽管您必须在

中注册 viewcomponents 标签

ViewImports.cshtml

文件并将以下行添加到现有代码中：

@addTagHelper *, RazorPages

可以将 ViewComponents 与 Razor 页面一起使用吗？

Can you use ViewComponents with Razor pages?

razor

asp.net-core

razor-pages

asp.net-core-viewcomponent