Question

我遇到了在 ASP.NET Core 2.0 中使用 ViewComponent的的限制。

我们有一个 ViewComponent ，从布局页面调用时非常完美。当我们从Razor页面调用相同的 ViewComponent 时，我们会收到以下错误。

传递给ViewDataDictionary的模型项的类型为＆lt; viewcomponenttype＆gt;但是此ViewDataDictionary实例需要类型为＆lt; parentpagetype＆gt; 的模型项

ViewComponent 似乎希望传递父 Razor 页面的模型类型，而不是为 ViewComponent 定义的模型类型。

我没有遇到过从 Razor 页面使用的 ViewComponent 的任何示例，它们似乎只在布局页面中使用（它们没有型号）。

有人可以给我一个明确的是或否：你能否在 Razor 页面中使用 ViewComponent的，若然，怎么做？

Answer 1

是的，你可以，我用一个热闹的命名做了一个快速的例子。

查看组件类 - 示例 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);
        }
    }
}

此View组件的默认视图：

@model NetCoreUI.Models.TestVm

<h1>This is viewcomponent.</h1>

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

我的剃刀页面代码没有多大用处：

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>

我选择使用一个简单的新TestVm（）类来调用我的ViewComponent，但是这个类可以是SampleModel中的子集，你可以使用正确类的实例调用View Component - 正确的类是你的ViewComponent是参考

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

Answer 2

另外，在Iztoksson的回答中，如果您精通使用标签帮助器，则可以在调用ViewComponent时使用它

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

尽管您必须将viewcomponents标记注册在

中

ViewImports.cshtml

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

@addTagHelper *, RazorPages

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

2 个答案: