No seu caso o problema é porque View Components é um recurso apresentado no MVC 6 e Asp.Net 5 e a sua aplicação é na verdade um MVC5 com Asp.Net 4
Abaixo segue um exemplo da implementação no DoteNetCore (referência).
Primeiro crie um diretório, na raiz da sua aplicação MVC, chamado ComponentsView e adicione uma nova classe chamada ComponenteViewComponent
que deve herdar da ViewComponent
public class ComponenteViewComponent : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
return View();
}
}
Se você não respeitar o sufixo ViewComponent o MVC não a reconhecerá como tal e talvez aí possa estar o seu primeiro problema. Se você criou a classe chamando apenas de Componente
, você precisa adicionar uma anotação para que o componente seja reconhecido por esse nome.
[ViewComponent(Name = "Componente")]
public class Componente : ViewComponent
{
public async Task<IViewComponentResult> InvokeAsync()
{
return View();
}
}
Observado os pontos acima e após a criação da classe, vá até o diretório /Views/Shared/, adicione o diretório Components e dentro dela mais uma pasta chamada Componente, que é o nome do seu componente.
Dentro da pasta Componente adicione a PartialView
chamada Default
, meu exemplo eu adicionei apenas o seguinte trecho de html:
<h1>Olá eu sou um componente</h1>
Por fim sua estrutura deverá estar assim:
Agora, em uma view qualquer do seu site você pode invocar o seu componente, no meu caso adicionei o trecho no topo da view Index da HomeController:
<div>
@await Component.InvokeAsync("Componente")
</div>
E o Resultado é esse: