Escolha uma Página
(Last Updated On: 27/06/2018)

Adicionando um visualizador (view) a um aplicativo ASP.NET Core MVC com o Visual Studio 2017

por | ago 21, 2017 | Desenvolvimento de Aplicações, Tutorial, Views | 1 Comentário

Aqui veremos conceitos básicos para montar arquivos de visualização. Os aquivos de visualização usam o chamado Razor, que permite colocar informações dinâmicas nas páginas HTML. Esse recurso é fascinante,  pois torna todas as páginas HTML dinâmicas – e não estáticas.

Criando uma View (visualização)

Seguido nosso tutorial, veremos como modificar a classe HelloWorldController para usar os arquivos de modelo de uma View, utilizando Razor.

O que queremos? Queremos gerar respostas HTML a um cliente.

Para isso é preciso criar um arquivo que seja um modelo de exibição. O Razor serve para isso.

Os modelos de exibição baseados em Razor sempre possuem uma extensão de arquivo .cshtml. E, em geral, estão localizados no diretório Views.

Os arquivos .cshtml  fornecem uma maneira elegante de criar saídas HTML usando C #.

Atualmente, no nosso exemplo, o método Index retorna uma seqüência de caracteres com uma mensagem que está codificada na classe do controlador.

Na classe HelloWorldController, substitua o método Index pelo seguinte código:

 

O código anterior retorna um objeto View (visualizador). Ele usa um modelo de exibição para gerar uma resposta HTML para o navegador. Os métodos do controlador (também conhecidos como métodos de ação, ou Actions), como o método de índice acima, geralmente retornam um IActionResult (ou uma classe derivada de ActionResult). Não tipos primitivos, como strings simples.

  • Clique no diretório Views e, em seguida, Add > New Folder e nome do folder (pasta) HelloWorld.
  • Com o botão direito do mouse, clique em Views/HelloWorld Add>new Item;
  • No diálogo Add New – MvcMovie:
    • No box de pesquisa , no topo do lado direito, entre com View;
    • Clique MVC View Page;
    • No nome do box, troque o nome se for necessário. Neste caso, utilize (se precisar) Index.cshtml
    • Clique em Add

adiciona view MVC

Substitua o conteúdo do arquivo de exibição Views/HelloWorld/Index.cshtml (Razor) pelo seguinte código:

Navegue até http://localhost: xxxx/HelloWorld.

O método Index no HelloWorldController não trabalhou muito.Ele apenas executou a declaração return View () .

Isso quer dizer, em outras palavras: escuta, mostra, no arquivo de exibição (View), dados que estão no modelo (model); E ponto final.

Por outro lado, no arquivo de exibição, tem uma diretiva @model, que diz qual é o modelo que será exibido.

Definido isso, o arquivo de exibição pode mostrar qualquer dado do modelo, uma vez que o controlador já disse que ele pode fazer isso.

Quando o controlador (controller) simplesmente disser View(), sem dar um nome específic de uma página visualizadora, o Core MVC assumirá que se trata de uma página tipo Index.cshtml. E, no caso do nosso exemplo, irá procurar em /Views/HelloWorld essa página index. A imagem abaixo mostra o que ocorre quando o MVC encontra essa página Index.cshtml:

página index core mvc

Se a janela do seu navegador for pequena (por exemplo, em um dispositivo móvel), você precisará alternar (toqar) no botão de navegação do Bootstrap, no canto superior direito, para ver os links Home, About e Contac:

vizualidor core mvc

Alterando Visualizadores  (views) e páginas de layout

Clique nos links do menu (MvcMovie, Home, About).

Note que cada página mostra o mesmo layout de menu.

O layout  padrão do menu é implementado no arquivo Views/Shared /Layout.cshtml.

Abra o arquivo Views/Shared/ Layout.cshtml para entender o que acontece. Este arquivo funciona como um template básico de um “container”. Tudo o que suas páginas HTML vierem a apresentar estará contido CONTIDO por este arquivo. É um recurso fascinante, pois você, nas suas outras visualizações, não precisa definir nada. Se preocupa somente com o conteúdo da página, A parte HTML que fica entre <body> e </body>.

Você pode ter diferentes layouts na sua aplicação se isso for necessário . Todas as inclusões de CSSs ficam a cargo da página de layout. Por exemplo, você pode ter um layout para uso antes do usuário fazer login e outro layout para uso depois que o usuário fizer login.

Note que nesse arquivo de layout temos @RenderBody(). RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, contidas pela página de layout. Por exemplo, se você selecionar o link About, a exibição de Views/Home/About.cshtml será incluída dentro do renderizador @RenderBody().

Altere o título e o link do menu no arquivo de layout

Altere o conteúdo do elemento título. Mude o texto de âncora no modelo de layout para “Movie APP” e o controlador de Home para Movies, como é mostrado abaixo:

Nota: A versão do ASP.NET Core 2.0 é ligeiramente diferente das anteriores. Não contém @inject ApplicationInsights e @ Html.Raw (JavaScriptSnippet.FullScript).

Atenção: Nós ainda não implementamos o controlador de Movies (filmes), então, se você clicar nesse link, você receberá um erro 404 (página não encontrada).

Salve suas alterações e clique no link About . Observe como o título na guia do navegador agora exibe About – Movie App em vez de About – Mvc Movie. Clique no link Contat e observe que ele também exibe Movie App. Fizemos a alteração uma única  vez no modelo de layout e passamos a ter todas as páginas no site refletindo o novo texto do link e o novo título. Examine o arquivo Views/_ViewStart.cshtml:

O arquivo Views/_ViewStart.cshtml traz o arquivo Views/Shared _Layout.cshtml para cada visualizador (View). Você pode usar a propriedade Layout para definir uma exibição de layout diferente ou configurá-la como nula para que nenhum arquivo de layout seja usado.

Altere o título da do visualizador (View) Index.

Abra Views/HelloWorld/Index.cshtml. Há dois lugares para fazer uma alteração:

  • O texto que aparece no título do navegador;
  • O cabeçalho (header) secundário (elemento <h2>).

Você os tornará um pouco diferentes para que você possa entender qual trecho de código muda o que no aplicativo.

ViewData [“Títtle”] = “Movie List”; no código acima, define a propriedade Title do dicionário ViewData como “Movie List“. A propriedade Title é usada no elemento HTML <title> na página de layout:

Salve suas alterações e navegue para http://localhost: xxxx/HelloWorld.

Observe que o título do navegador, o título principal e os títulos secundários mudaram (se você não visualizar mudanças no navegador, você pode estar visualizando conteúdo em cache. Pressione Ctrl + F5 no seu navegador para forçar a resposta do servidor a ser recarregada).

O título do navegador é criado com ViewData [“Title”] que definimos no visualizador (View) Index.cshtml e o “– Movie App” foi acrescentado seguindo a mudança que fizemos no no arquivo de layout.

Observe também como o conteúdo do modelo de Index.cshtml foi mesclado com o template de visualização Views/Shared/_Layout.cshtml, gerando uma única resposta HTML que foi enviada para o navegador. Os template (modelos) de layout tornam muito fácil fazer alterações que se aplicam  a todas as páginas do seu aplicativo.

alterando views

 

Nosso pequeno número de “dados” (neste caso, a mensagem “Hello from our View Template!!”) está até demasiadamente codificado. O aplicativo MVC tem um “V” (visualização) e agora tem um “C” (controlador), mas ainda não temos um “M” (modelo).

Passando dados do Controlador (controller) para as ações do Visualizador (View)

As ações (Actions) do controlador (Controller) são chamadas em resposta a uma solicitação de URL recebida.

Uma classe de controlador é o espaço onde você escreve o código que lida com os pedidos de navegador são recebidos.

O controlador recupera dados de uma base de dados, decide qual o tipo de resposta deve dar – e a envia de volta para o navegador, através do visualizador (View).

altera view

 

Os templates (modelos de exibição) podem ser usados ​​a partir de um controlador para gerar e formatar uma resposta em HTML para o navegador.

Os controladores (Controllers) são responsáveis ​​por fornecer os dados necessários para que um modelo de exibição dê uma resposta.

Uma boa prática recomendada: os templates (modelos de exibição) não devem executar a lógica comercial ou interagir diretamente com um banco de dados. O ideal é que um modelo de visualização sempre funcione apenas com os dados fornecidos pelo controlador (Controller).

Manter essa “separação de preocupações” ajuda a manter seu código limpo, testável e sustentável.

No nosso exemplo simples, o método de boas-vindas na classe HelloWorldController leva um nome e um parâmetro ID e, em seguida, exibe os valores diretamente para o navegador. Em vez de fazer o controlador renderizar essa resposta como uma string (texto), vamos mudar o controlador para usar um modelo de exibição (View).

O modelo de exibição irá gerar uma resposta dinâmica, o que significa que você precisa passar bits de dados apropriados do controlador (Controller) para a exibição (View) para gerar a resposta no navegador.

Você pode fazer isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um dicionário ViewData, que poderá ser acessado pelo modelo de exibição (View).

Retorne ao arquivo HelloWorldController.cs e altere o método Welcome (boas-vindas) para adicionar um valor de Message (Mensagem) e NumTimes  (número de vezes) ao dicionário ViewData. O dicionário ViewData é um objeto dinâmico, o que significa que você pode colocar nele o que quiser; O objeto ViewData não possui propriedades definidas até você colocar algo dentro dele. Ele “”assume” as propriedades do objeto que for guardado nele. O sistema de ligação (binding) do modelo MVC mapeia automaticamente os parâmetros nomeados (como name e numTimes, no nosso caso) usando dados da própria barra de endereços, que “carrega” os parâmetros o método da Ação (Action) do controlador (Controller). O arquivo completo do HelloWorldController.cs ficará assim:

O objeto do dicionário ViewData contém dados que serão passados para a exibição (View).

Crie um modelo de exibição de boas-vindas chamado Views/HelloWorld/Welcome.cshtml.

Você criará um “loop” no modelo de exibição Welcome.cshtml que irá exibir “Hello” NumTimes. Substitua o conteúdo de Views/HelloWorld/Welcome.cshtml com o seguinte código:

Salve suas alterações e navegue para o seguinte URL:

http://localhost:xxxx/HelloWorld/Welcome?Name = Rick&numtimes = 4

Os dados dos parâmetros são retirados do URL e passados para o controlador usando o encadernador (Binder) do modelo MVC. O controlador (Controller) embala os dados em um dicionário ViewData e passa esse objeto para o visualizador (View). O visualizador (View) renderiza os dados como HTML para o navegador.alteração de view

Na amostra acima, usamos o dicionário ViewData para passar dados do controlador (Controller) para uma exibição no visualizador (View).

Mais tarde, no tutorial, usaremos um modelo (Model)  para passar dados de um controlador (controller) o visualizador (View). A abordagem do “modelo de visão” (Model) para passar dados geralmente é muito preferida sobre a abordagem do dicionário ViewData (e mais poderosa).

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários ao final da página.

Você quer ter uma franquia de hospedagem com tudo para marketing digital e faturamento recorrente?

franquia builderall business