ASP .NET Core - Criando uma aplicação ASP .NET Core MVC com o VS 2017 - II

 Neste artigo eu vou mostrar como criar uma aplicação ASP .NET Core MVC usando o VS 2017.

Continuando a primeira parte do artigo vamos alterar as views e as páginas de layout da nossa aplicação. As views geradas utilizam a sintaxe Razor devido a sua simplicidade.

Nota:  Se você não conheçe o Razor e sua sintaxe sugiro que leia este artigo : ASP .NET - Apresentando a sintaxe Razor - Macoratti

Alterando Views e layouts

Abra a solução MvcFilme criada no VS 2017 via Start Page usando a área Recent e selecionando o projeto criado ou a área Open clicando na opção Open Project/Solution e selecionando o projeto da aplicação:

Ao executar a aplicação e clicar nos links Home, About e Contact que foram criados, cada página vai mostrar o mesmo leiaut para o menu.

Nota:  Estamos usando o controlador padrão HomeController definido em Startup.cs.

A implementação desse layout é feita pelo arquivo _Layout.cshtml na pasta Views/Shared e vamos fazer algumas alterações neste arquivo.

Um template Layout permite que você especifique o layout do container HTML do seu site em um único local e então aplicar esse leiaute a múltiplas páginas do seu site.

Abra o arquivo _Layout.cshtml da pasta Views/Shared e localize a linha de código @RenderBody(),

RenderBody é um espaço reservado onde todas as páginas específicas da visualização que você cria são exibidas, envolvidas na página de layout. Quando selecionamos um link a respectiva view desse link será renderizada dentro do método RenderBody.

Vamos alterar algumas partes do código no arquivo _Layout.cshtml conforme destacadas abaixo:

@inject Microsoft.ApplicationInsights.AspNetCore.JavaScriptSnippet JavaScriptSnippet
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Aplicação Filmes</title>
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
    @Html.Raw(JavaScriptSnippet.FullScript)
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @*<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">MvcFilme</a>*@
                <a asp-area="" asp-controller="Filmes" asp-action="Index" class="navbar-brand">Filmes do Macoratti</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">Sobre</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contato</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; 2017 - Macoratti .net - MvcFilme</p>
        </footer>
    </div>
    <environment names="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    @RenderSection("Scripts", required: false)
</body>
</html>

 

Alterações feitas:

Salve as alterações e atualize a página para ver as alterações feitas :

As alterações feitas irão se refletir em todas as páginas que userem o leiaute definido no arquivo.

Mas como esse arquivo de leiaute é usado pelas views ?

Abrindo o arquivo _ViewStart.cshtml na pasta Views veremos o código abaixo:

@{
    Layout = "_Layout";
}

Esse arquivo é usado para definir a página padrão de leaiute para a aplicação. Ele inclui o arquivo _Layout.cshtml em cada view usando a propriedade Layout.

Você pode usar a propriedade Layout para definir um view de leiaute diferente ou definir a propriedade para null de forma a não usar nenhum leiaute.

Nota: Para saber mais sobre como funciona esse arquivo leia esse artigo: ASP .NET MVC - Diferentes maneiras de renderizar layouts - Macoratti

Alterando o conteúdo das Views

Vamos alterar o conteúdo da view Index.cshtml que esta na pasta Views/OlaMundo conforme mostrado abaixo:

@{
    ViewData["Title"] = "Lista de Filmes";
}
<h1>Minha lista de Filmes</h1>
<hr />
<p> Um alô da View OlaMundo\Index.cshtml !</p>

Salve as alterações e execute o projeto digitando na barra de navegação a url : http://localhost:XXXX/OlaMundo e  veja o resultado :

Observe como o conteúdo da view template Index.cshtml contida em Views/OlaMundo foi mesclado com o conteúdo da view de leiaute contida em Views/Shared/_Layout.cshtml, e uma única resposta HTML foi enviada para o navegador compondo o leiaute da página.

Assim os modelos de layout tornam muito fácil fazer alterações que se aplicam a todas as páginas em seu aplicativo.

Na próxima parte do artigo veremos como passar dados do controlador para view.

(Jesus) Veio para o que era seu, e os seus não o receberam.
Mas, a todos quantos o receberam, deu-lhes o poder de serem feitos filhos de Deus, aos que crêem no seu nome;
Os quais não nasceram do sangue, nem da vontade da carne, nem da vontade do homem, mas de Deus.
João 1:11-13

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:

José Carlos Macoratti