2

Eu estou tentando criar um view component para reutilizar nas páginas, estou tentando seguir alguns tutoriais em video. Já instalei via nuget o Microsoft.AspNetCore.Mvc inteiro, mas quando eu tento chamá-lo a partir da viewpage, usando

@Component.InvokeAsync("Componente")

eu tenho o erro

O nome 'Component' não existe no contexto atual

inserir a descrição da imagem aqui

Estou usando VS2017, asp.net mvc 5. Alguem sabe oque pode estar faltando? Instalar alguma outra coisa que não sei? Ou no mvc 5 é de outra forma a chamada do component?

Quando eu começo a digitar Compon e pressiono ctrl+espaço deveria aparecer a lista de opções incluindo o Component conforme a imagem a seguir, nota-se que Component não está aparecendo:

inserir a descrição da imagem aqui

2
  • Qual a versão do asp.net? Se não me engano oViewComponent está disponível partindo do mvc core 1.1 6/06/2018 às 16:17
  • dotnet --version 2.1.4 6/06/2018 às 16:25

1 Resposta 1

3

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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

8
  • 1
    Muito interessante!
    – Barbetta
    6/06/2018 às 17:24
  • 1
    Ele acaba funcionando como um "MVC dentro do MVC", permite o reuso de muitos componentes com uma maleabilidade e desacoplamento maior do que com simples partials views 6/06/2018 às 17:30
  • @LeandroAngelo refiz exatamente seguindo os passos citados, mas o continuo com problema, o problema ainda esta na chamada do componente na view. agora com o await aparece o mesmo erro da imagem que foi anexada na pergunta, agora sendo: O nome 'await' não existe no contexto atual. será q eu não tenho q instalar algo pelo nuget que eu não estou sabendo? eu instalei esse: Microsoft.AspNetCore.Mvc 6/06/2018 às 17:48
  • Como está a sua _ViewImports.cshtml na raiz da pasta views 6/06/2018 às 17:57
  • Na raiz da pasta Views arquivos tem só _ViewStart.cshtml e Web.config, no _ViewStart.cshtml tem o seguinte conteúdo:@{ Layout = "~/Views/Shared/_Layout.cshtml"; } 6/06/2018 às 18:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .