问题描述
InvalidOperationException：找不到名为“ ../../Shared/Component”的视图组件。视图组件必须是公共的非抽象类，不能包含任何通用参数，并且必须以“ ViewComponentAttribute”修饰，或者具有以“ ViewComponent”后缀结尾的类名。视图组件不得使用'NonViewComponentAttribute'装饰。
@model ShopApp.WEBUI.viewmodels.Productviewmodel
@{
var popularClass = Model.Products.Count > 2 ? "popular" : "";
var products = Model.Products;
var categories = Model.Categories;
}
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5paxtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
margin: 0;
padding: 0;
}
main {
display: inline;
}
.popular {
color: orangered;
}
</style>
</head>
<body>
@await Html.PartialAsync(@"../../shared/_navbar")
@await Html.PartialAsync(@"../../shared/_header");
<main>
<div class="container">
<div class="row">
<div class="col-md-4">
@await Component.InvokeAsync(@"../../Shared/Component",categories)
</div>
<div class="col-md-8">
@if (products.Count == 0)
{
@await Html.PartialAsync(@"../../shared/_noproduc");
}
else
{
<div class="row">
@foreach (var product in products)
{
<div class="col-md-2">
@await Html.PartialAsync(@"../../shared/_product",product)
</div>
}
</div>
}
</div>
</div>
</div>
</main>
</body>
</html>
解决方法
Change name of component folder to Components，然后在其中创建具有 Categories 名称的文件夹，然后在其中放入 Default.cshtml 。
像这样打电话
@await Component.InvokeAsync("Categories",new { place your parameters here })
必须从 ViewComponent
必须在CategoriesViewComponent类的InvokeAsynk方法中声明您的参数，并将其与要调用此组件的名称一起使用： new {parameter1 =“ value”}