Adicionar uma exibição a um aplicativo ASP.NET Core MVCAdd a view to an ASP.NET Core MVC app

Por Rick AndersonBy Rick Anderson

Nesta seção, você modifica a classe HelloWorldController para que ela use os arquivos de exibição do Razor para encapsular corretamente o processo de geração de respostas HTML para um cliente.In this section you modify the HelloWorldController class to use Razor view files to cleanly encapsulate the process of generating HTML responses to a client.

Crie um arquivo de modelo de exibição usando o Razor.You create a view template file using Razor. Os modelos de exibição baseados no Razor têm uma extensão de arquivo .cshtml.Razor-based view templates have a .cshtml file extension. Eles fornecem uma maneira elegante de criar a saída HTML com o C#.They provide an elegant way to create HTML output with C#.

Atualmente, o método Index retorna uma cadeia de caracteres com uma mensagem que é embutida em código na classe do controlador.Currently the Index method returns a string with a message that's hard-coded in the controller class. Na classe HelloWorldController, substitua o método Index pelo seguinte código:In the HelloWorldController class, replace the Index method with the following code:

public IActionResult Index()
{
    return View();
}

O código anterior chama o método View do controlador.The preceding code calls the controller's View method. Ele usa um modelo de exibição para gerar uma resposta HTML.It uses a view template to generate an HTML response. Métodos do controlador (também conhecidos como métodos de ação), como o método Index acima, geralmente retornam um IActionResult (ou uma classe derivada de ActionResult), não um tipo como string.Controller methods (also known as action methods), such as the Index method above, generally return an IActionResult (or a class derived from ActionResult), not a type like string.

Adicionar uma exibiçãoAdd a view

  • Clique com o botão direito do mouse na pasta Exibições e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.Right click on the Views folder, and then Add > New Folder and name the folder HelloWorld.

  • Clique com o botão direito do mouse na pasta Views/HelloWorld e, em seguida, clique em Adicionar > Novo Item.Right click on the Views/HelloWorld folder, and then Add > New Item.

  • Na caixa de diálogo Adicionar Novo Item – MvcMovieIn the Add New Item - MvcMovie dialog

    • Na caixa de pesquisa no canto superior direito, insira exibiçãoIn the search box in the upper-right, enter view

    • Selecione Exibição RazorSelect Razor View

    • Mantenha o valor da caixa Nome, Index.cshtml.Keep the Name box value, Index.cshtml.

    • Selecione AdicionarSelect Add

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do arquivo de exibição Views/HelloWorld/Index.cshtml do Razor pelo seguinte:Replace the contents of the Views/HelloWorld/Index.cshtml Razor view file with the following:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Navegue para https://localhost:{PORT}/HelloWorld.Navigate to https://localhost:{PORT}/HelloWorld. O método Index no HelloWorldController não fez muita coisa: ele executou a instrução return View();, que especificou que o método deve usar um arquivo de modelo de exibição para renderizar uma resposta para o navegador.The Index method in the HelloWorldController didn't do much; it ran the statement return View();, which specified that the method should use a view template file to render a response to the browser. Como um nome de arquivo de modo de exibição não foi especificado, o MVC é padronizado para usar o arquivo de exibição padrão.Because a view template file name wasn't specified, MVC defaulted to using the default view file. O arquivo de exibição padrão tem o mesmo nome que o método (Index), portanto, é usado /Views/HelloWorld/Index.cshtml.The default view file has the same name as the method (Index), so in the /Views/HelloWorld/Index.cshtml is used. A imagem abaixo mostra a cadeia de caracteres “Olá de nosso modelo de exibição!”The image below shows the string "Hello from our View Template!" embutida em código na exibição.hard-coded in the view.

Janela do navegador

Alterar exibições e páginas de layoutChange views and layout pages

Selecione os links de menu (MvcMovie, Página Inicial e Privacidade).Select the menu links (MvcMovie, Home, and Privacy). Cada página mostra o mesmo layout de menu.Each page shows the same menu layout. O layout de menu é implementado no arquivo Views/Shared/_Layout.cshtml.The menu layout is implemented in the Views/Shared/_Layout.cshtml file. Abra o arquivo Views/Shared/_Layout.cshtml.Open the Views/Shared/_Layout.cshtml file.

Os modelos de layout permitem especificar o layout de contêiner HTML do site em um lugar e, em seguida, aplicá-lo a várias páginas do site.Layout templates allow you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site. Localize a linha @RenderBody().Find the @RenderBody() line. RenderBody é um espaço reservado em que todas as páginas específicas à exibição criadas são mostradas, encapsuladas na página de layout.RenderBody is a placeholder where all the view-specific pages you create show up, wrapped in the layout page. Por exemplo, se você selecionar o link Privacidade, a exibição Views/Home/Privacy.cshtml será renderizada dentro do método RenderBody.For example, if you select the Privacy link, the Views/Home/Privacy.cshtml view is rendered inside the RenderBody method.

Substitua o conteúdo do arquivo views/Shared/_ layout. cshtml pela marcação a seguir.Replace the content of the Views/Shared/_Layout.cshtml file with the following markup. As alterações são realçadas:The changes are highlighted:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

A marcação anterior fez as seguintes alterações:The preceding markup made the following changes:

  • 3 ocorrências de MvcMovie para Movie App.3 occurrences of MvcMovie to Movie App.
  • O elemento de âncora <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> para <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.The anchor element <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> to <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Na marcação anterior, o valor do atributo e o atributo do Auxiliar de Marca de Âncora asp-area="" foram omitidos porque este aplicativo não está usando Áreas.In the preceding markup, the asp-area="" anchor Tag Helper attribute and attribute value was omitted because this app is not using Areas.

Observação: O controlador Movies não foi implementado.Note: The Movies controller has not been implemented. Neste ponto, o link Movie App não está funcionando.At this point, the Movie App link is not functional.

Salve suas alterações e selecione o link Privacidade.Save your changes and select the Privacy link. Observe como o título na guia do navegador agora exibe Política de Privacidade – Aplicativo de filme, em vez de Política de Privacidade – Filme MVC:Notice how the title on the browser tab displays Privacy Policy - Movie App instead of Privacy Policy - Mvc Movie:

Guia Privacidade

Selecione o link Página Inicial e observe que o texto do título e de âncora também exibem Aplicativo de Filme.Select the Home link and notice that the title and anchor text also display Movie App. Conseguimos fazer a alteração uma vez no modelo de layout e fazer com que todas as páginas no site refletissem o novo texto do link e o novo título.We were able to make the change once in the layout template and have all pages on the site reflect the new link text and new title.

Examine o arquivo Views/_ViewStart.cshtml:Examine the Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

O arquivo Views/_ViewStart.cshtml mostra o arquivo Views/Shared/_Layout.cshtml em cada exibição.The Views/_ViewStart.cshtml file brings in the Views/Shared/_Layout.cshtml file to each view. A propriedade Layout pode ser usada para definir outra exibição de layout ou defina-a como null para que nenhum arquivo de layout seja usado.The Layout property can be used to set a different layout view, or set it to null so no layout file will be used.

Altere o título e o elemento <h2> do arquivo de exibição Views/HelloWorld/Index.cshtml:Change the title and <h2> element of the Views/HelloWorld/Index.cshtml view file:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

O título e o elemento <h2> são ligeiramente diferentes para que possa ver qual parte do código altera a exibição.The title and <h2> element are slightly different so you can see which bit of code changes the display.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como “Lista de Filmes”.ViewData["Title"] = "Movie List"; in the code above sets the Title property of the ViewData dictionary to "Movie List". A propriedade Title é usada no elemento HTML <title> na página de layout:The Title property is used in the <title> HTML element in the layout page:

<title>@ViewData["Title"] - Movie App</title>

Salve as alterações e navegue para https://localhost:{PORT}/HelloWorld.Save the change and navigate to https://localhost:{PORT}/HelloWorld. Observe que o título do navegador, o cabeçalho primário e os títulos secundários foram alterados.Notice that the browser title, the primary heading, and the secondary headings have changed. (Se as alterações não forem exibidas no navegador, talvez o conteúdo armazenado em cache esteja sendo exibido.(If you don't see changes in the browser, you might be viewing cached content. Pressione Ctrl+F5 no navegador para forçar a resposta do servidor a ser carregada.) O título do navegador é criado com ViewData["Title"] que definimos no modelo de exibição Index.cshtml e o “– Aplicativo de Filme” adicional adicionado no arquivo de layout.Press Ctrl+F5 in your browser to force the response from the server to be loaded.) The browser title is created with ViewData["Title"] we set in the Index.cshtml view template and the additional "- Movie App" added in the layout file.

O conteúdo do modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml.The content in the Index.cshtml view template is merged with the Views/Shared/_Layout.cshtml view template. Uma única resposta HTML é enviada ao navegador.A single HTML response is sent to the browser. Os modelos de layout facilitam a realização de alterações que se aplicam a todas as páginas de um aplicativo.Layout templates make it easy to make changes that apply across all of the pages in an app. Para saber mais, consulte Layout.To learn more, see Layout.

Exibição de Lista de Filmes

Apesar disso, nossos poucos “dados” (nesse caso, a mensagem “Olá de nosso modelo de exibição!”)Our little bit of "data" (in this case the "Hello from our View Template!" são embutidos em código.message) is hard-coded, though. O aplicativo MVC tem um “V” (exibição) e você tem um “C” (controlador), mas ainda nenhum “M” (modelo).The MVC application has a "V" (view) and you've got a "C" (controller), but no "M" (model) yet.

Passando dados do controlador para a exibiçãoPassing Data from the Controller to the View

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada.Controller actions are invoked in response to an incoming URL request. Uma classe de controlador é o local em que o código é escrito e que manipula as solicitações recebidas do navegador.A controller class is where the code is written that handles the incoming browser requests. O controlador recupera dados de uma fonte de dados e decide qual tipo de resposta será enviada novamente para o navegador.The controller retrieves data from a data source and decides what type of response to send back to the browser. Modelos de exibição podem ser usados em um controlador para gerar e formatar uma resposta HTML para o navegador.View templates can be used from a controller to generate and format an HTML response to the browser.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.Controllers are responsible for providing the data required in order for a view template to render a response. Uma melhor prática: modelos de exibição não devem executar a lógica de negócios nem interagir diretamente com um banco de dados.A best practice: View templates should not perform business logic or interact with a database directly. Em vez disso, um modelo de exibição deve funcionar somente com os dados fornecidos pelo controlador.Rather, a view template should work only with the data that's provided to it by the controller. Manter essa “separação de preocupações” ajuda a manter o código limpo, testável e com capacidade de manutenção.Maintaining this "separation of concerns" helps keep the code clean, testable, and maintainable.

Atualmente, o método Welcome na classe HelloWorldController usa um parâmetro name e um ID e, em seguida, gera os valores diretamente no navegador.Currently, the Welcome method in the HelloWorldController class takes a name and a ID parameter and then outputs the values directly to the browser. Em vez de fazer com que o controlador renderize a resposta como uma cadeia de caracteres, altere o controlador para que ele use um modelo de exibição.Rather than have the controller render this response as a string, change the controller to use a view template instead. O modelo de exibição gera uma resposta dinâmica, o que significa que é necessário passar bits de dados apropriados do controlador para a exibição para gerar a resposta.The view template generates a dynamic response, which means that appropriate bits of data must be passed from the controller to the view in order to generate the response. Faça 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 pode ser acessado em seguida pelo modelo de exibição.Do this by having the controller put the dynamic data (parameters) that the view template needs in a ViewData dictionary that the view template can then access.

Em HelloWorldController.cs, altere o método Welcome para adicionar um valor Message e NumTimes ao dicionário ViewData.In HelloWorldController.cs, change the Welcome method to add a Message and NumTimes value to the ViewData dictionary. O dicionário ViewData é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O objeto ViewData não tem nenhuma propriedade definida até que você insira algo nele.The ViewData dictionary is a dynamic object, which means any type can be used; the ViewData object has no defined properties until you put something inside it. O sistema de model binding MVC mapeia automaticamente os parâmetros nomeados (name e numTimes) da cadeia de consulta na barra de endereços para os parâmetros no método.The MVC model binding system automatically maps the named parameters (name and numTimes) from the query string in the address bar to parameters in your method. O arquivo HelloWorldController.cs completo tem esta aparência:The complete HelloWorldController.cs file looks like this:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

O objeto de dicionário ViewData contém dados que serão passados para a exibição.The ViewData dictionary object contains data that will be passed to the view.

Crie um modelo de exibição Boas-vindas chamado Views/HelloWorld/Welcome.cshtml.Create a Welcome view template named Views/HelloWorld/Welcome.cshtml.

Você criará um loop no modelo de exibição Welcome.cshtml que exibe “Olá” NumTimes.You'll create a loop in the Welcome.cshtml view template that displays "Hello" NumTimes. Substitua o conteúdo de Views/HelloWorld/Welcome.cshtml pelo seguinte:Replace the contents of Views/HelloWorld/Welcome.cshtml with the following:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Salve as alterações e navegue para a seguinte URL:Save your changes and browse to the following URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Os dados são obtidos da URL e passados para o controlador usando o associador de modelo MVC.Data is taken from the URL and passed to the controller using the MVC model binder . O controlador empacota os dados em um dicionário ViewData e passa esse objeto para a exibição.The controller packages the data into a ViewData dictionary and passes that object to the view. Em seguida, a exibição renderiza os dados como HTML para o navegador.The view then renders the data as HTML to the browser.

Exibição de privacidade que mostra um rótulo Boas-vindas e a frase Olá, Ricardo mostrada quatro vezes

No exemplo acima, o dicionário ViewData foi usado para passar dados do controlador para uma exibição.In the sample above, the ViewData dictionary was used to pass data from the controller to a view. Mais adiante no tutorial, um modelo de exibição será usado para passar dados de um controlador para uma exibição.Later in the tutorial, a view model is used to pass data from a controller to a view. A abordagem de modelo de exibição para passar dados é geralmente a preferida em relação à abordagem do dicionário ViewData.The view model approach to passing data is generally much preferred over the ViewData dictionary approach. Confira mais informações em Quando usar ViewBag, ViewData ou TempData .See When to use ViewBag, ViewData, or TempData for more information.

No próximo tutorial, será criado um banco de dados de filmes.In the next tutorial, a database of movies is created.

Nesta seção, você modifica a classe HelloWorldController para que ela use os arquivos de exibição do Razor para encapsular corretamente o processo de geração de respostas HTML para um cliente.In this section you modify the HelloWorldController class to use Razor view files to cleanly encapsulate the process of generating HTML responses to a client.

Crie um arquivo de modelo de exibição usando o Razor.You create a view template file using Razor. Os modelos de exibição baseados no Razor têm uma extensão de arquivo .cshtml.Razor-based view templates have a .cshtml file extension. Eles fornecem uma maneira elegante de criar a saída HTML com o C#.They provide an elegant way to create HTML output with C#.

Atualmente, o método Index retorna uma cadeia de caracteres com uma mensagem que é embutida em código na classe do controlador.Currently the Index method returns a string with a message that's hard-coded in the controller class. Na classe HelloWorldController, substitua o método Index pelo seguinte código:In the HelloWorldController class, replace the Index method with the following code:

public IActionResult Index()
{
    return View();
}

O código anterior chama o método View do controlador.The preceding code calls the controller's View method. Ele usa um modelo de exibição para gerar uma resposta HTML.It uses a view template to generate an HTML response. Métodos do controlador (também conhecidos como métodos de ação), como o método Index acima, geralmente retornam um IActionResult (ou uma classe derivada de ActionResult), não um tipo como string.Controller methods (also known as action methods), such as the Index method above, generally return an IActionResult (or a class derived from ActionResult), not a type like string.

Adicionar uma exibiçãoAdd a view

  • Clique com o botão direito do mouse na pasta Exibições e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.Right click on the Views folder, and then Add > New Folder and name the folder HelloWorld.

  • Clique com o botão direito do mouse na pasta Views/HelloWorld e, em seguida, clique em Adicionar > Novo Item.Right click on the Views/HelloWorld folder, and then Add > New Item.

  • Na caixa de diálogo Adicionar Novo Item – MvcMovieIn the Add New Item - MvcMovie dialog

    • Na caixa de pesquisa no canto superior direito, insira exibiçãoIn the search box in the upper-right, enter view

    • Selecione Exibição RazorSelect Razor View

    • Mantenha o valor da caixa Nome, Index.cshtml.Keep the Name box value, Index.cshtml.

    • Selecione AdicionarSelect Add

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do arquivo de exibição Views/HelloWorld/Index.cshtml do Razor pelo seguinte:Replace the contents of the Views/HelloWorld/Index.cshtml Razor view file with the following:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Navegue para https://localhost:{PORT}/HelloWorld.Navigate to https://localhost:{PORT}/HelloWorld. O método Index no HelloWorldController não fez muita coisa: ele executou a instrução return View();, que especificou que o método deve usar um arquivo de modelo de exibição para renderizar uma resposta para o navegador.The Index method in the HelloWorldController didn't do much; it ran the statement return View();, which specified that the method should use a view template file to render a response to the browser. Como um nome de arquivo de modo de exibição não foi especificado, o MVC é padronizado para usar o arquivo de exibição padrão.Because a view template file name wasn't specified, MVC defaulted to using the default view file. O arquivo de exibição padrão tem o mesmo nome que o método (Index), portanto, é usado /Views/HelloWorld/Index.cshtml.The default view file has the same name as the method (Index), so in the /Views/HelloWorld/Index.cshtml is used. A imagem abaixo mostra a cadeia de caracteres “Olá de nosso modelo de exibição!”The image below shows the string "Hello from our View Template!" embutida em código na exibição.hard-coded in the view.

Janela do navegador

Alterar exibições e páginas de layoutChange views and layout pages

Selecione os links de menu (MvcMovie, Página Inicial e Privacidade).Select the menu links (MvcMovie, Home, and Privacy). Cada página mostra o mesmo layout de menu.Each page shows the same menu layout. O layout de menu é implementado no arquivo Views/Shared/_Layout.cshtml.The menu layout is implemented in the Views/Shared/_Layout.cshtml file. Abra o arquivo Views/Shared/_Layout.cshtml.Open the Views/Shared/_Layout.cshtml file.

Os modelos de layout permitem especificar o layout de contêiner HTML do site em um lugar e, em seguida, aplicá-lo a várias páginas do site.Layout templates allow you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site. Localize a linha @RenderBody().Find the @RenderBody() line. RenderBody é um espaço reservado em que todas as páginas específicas à exibição criadas são mostradas, encapsuladas na página de layout.RenderBody is a placeholder where all the view-specific pages you create show up, wrapped in the layout page. Por exemplo, se você selecionar o link Privacidade, a exibição Views/Home/Privacy.cshtml será renderizada dentro do método RenderBody.For example, if you select the Privacy link, the Views/Home/Privacy.cshtml view is rendered inside the RenderBody method.

  • Nos elementos de título e de rodapé, altere MvcMovie para Movie App.In the title and footer elements, change MvcMovie to Movie App.
  • Altere o elemento de âncora <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> para <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.Change the anchor element <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> to <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

A seguinte marcação mostra as alterações realçadas:The following markup shows the highlighted changes:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/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"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

Na marcação anterior, o asp-area atributo do Auxiliar de Marca de Âncora foi omitido porque este aplicativo não está usando Áreas.In the preceding markup, the asp-area anchor Tag Helper attribute was omitted because this app is not using Areas.

Observação: O controlador Movies não foi implementado.Note: The Movies controller has not been implemented. Neste ponto, o link Movie App não está funcionando.At this point, the Movie App link is not functional.

Salve suas alterações e selecione o link Privacidade.Save your changes and select the Privacy link. Observe como o título na guia do navegador agora exibe Política de Privacidade – Aplicativo de filme, em vez de Política de Privacidade – Filme MVC:Notice how the title on the browser tab displays Privacy Policy - Movie App instead of Privacy Policy - Mvc Movie:

Guia Privacidade

Selecione o link Página Inicial e observe que o texto do título e de âncora também exibem Aplicativo de Filme.Select the Home link and notice that the title and anchor text also display Movie App. Conseguimos fazer a alteração uma vez no modelo de layout e fazer com que todas as páginas no site refletissem o novo texto do link e o novo título.We were able to make the change once in the layout template and have all pages on the site reflect the new link text and new title.

Examine o arquivo Views/_ViewStart.cshtml:Examine the Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

O arquivo Views/_ViewStart.cshtml mostra o arquivo Views/Shared/_Layout.cshtml em cada exibição.The Views/_ViewStart.cshtml file brings in the Views/Shared/_Layout.cshtml file to each view. A propriedade Layout pode ser usada para definir outra exibição de layout ou defina-a como null para que nenhum arquivo de layout seja usado.The Layout property can be used to set a different layout view, or set it to null so no layout file will be used.

Altere o título e o elemento <h2> do arquivo de exibição Views/HelloWorld/Index.cshtml:Change the title and <h2> element of the Views/HelloWorld/Index.cshtml view file:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

O título e o elemento <h2> são ligeiramente diferentes para que possa ver qual parte do código altera a exibição.The title and <h2> element are slightly different so you can see which bit of code changes the display.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como “Lista de Filmes”.ViewData["Title"] = "Movie List"; in the code above sets the Title property of the ViewData dictionary to "Movie List". A propriedade Title é usada no elemento HTML <title> na página de layout:The Title property is used in the <title> HTML element in the layout page:

<title>@ViewData["Title"] - Movie App</title>

Salve as alterações e navegue para https://localhost:{PORT}/HelloWorld.Save the change and navigate to https://localhost:{PORT}/HelloWorld. Observe que o título do navegador, o cabeçalho primário e os títulos secundários foram alterados.Notice that the browser title, the primary heading, and the secondary headings have changed. (Se as alterações não forem exibidas no navegador, talvez o conteúdo armazenado em cache esteja sendo exibido.(If you don't see changes in the browser, you might be viewing cached content. Pressione Ctrl+F5 no navegador para forçar a resposta do servidor a ser carregada.) O título do navegador é criado com ViewData["Title"] que definimos no modelo de exibição Index.cshtml e o “– Aplicativo de Filme” adicional adicionado no arquivo de layout.Press Ctrl+F5 in your browser to force the response from the server to be loaded.) The browser title is created with ViewData["Title"] we set in the Index.cshtml view template and the additional "- Movie App" added in the layout file.

Observe também como o conteúdo no modelo de exibição Index.cshtml foi mesclado com o modelo de exibição Views/Shared/_Layout.cshtml e uma única resposta HTML foi enviada para o navegador.Also notice how the content in the Index.cshtml view template was merged with the Views/Shared/_Layout.cshtml view template and a single HTML response was sent to the browser. Os modelos de layout facilitam realmente a realização de alterações que se aplicam a todas as páginas do aplicativo.Layout templates make it really easy to make changes that apply across all of the pages in your application. Para saber mais, consulte Layout.To learn more see Layout.

Exibição de Lista de Filmes

Apesar disso, nossos poucos “dados” (nesse caso, a mensagem “Olá de nosso modelo de exibição!”)Our little bit of "data" (in this case the "Hello from our View Template!" são embutidos em código.message) is hard-coded, though. O aplicativo MVC tem um “V” (exibição) e você tem um “C” (controlador), mas ainda nenhum “M” (modelo).The MVC application has a "V" (view) and you've got a "C" (controller), but no "M" (model) yet.

Passando dados do controlador para a exibiçãoPassing Data from the Controller to the View

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada.Controller actions are invoked in response to an incoming URL request. Uma classe de controlador é o local em que o código é escrito e que manipula as solicitações recebidas do navegador.A controller class is where the code is written that handles the incoming browser requests. O controlador recupera dados de uma fonte de dados e decide qual tipo de resposta será enviada novamente para o navegador.The controller retrieves data from a data source and decides what type of response to send back to the browser. Modelos de exibição podem ser usados em um controlador para gerar e formatar uma resposta HTML para o navegador.View templates can be used from a controller to generate and format an HTML response to the browser.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.Controllers are responsible for providing the data required in order for a view template to render a response. Uma melhor prática: modelos de exibição não devem executar a lógica de negócios nem interagir diretamente com um banco de dados.A best practice: View templates should not perform business logic or interact with a database directly. Em vez disso, um modelo de exibição deve funcionar somente com os dados fornecidos pelo controlador.Rather, a view template should work only with the data that's provided to it by the controller. Manter essa “separação de preocupações” ajuda a manter o código limpo, testável e com capacidade de manutenção.Maintaining this "separation of concerns" helps keep the code clean, testable, and maintainable.

Atualmente, o método Welcome na classe HelloWorldController usa um parâmetro name e um ID e, em seguida, gera os valores diretamente no navegador.Currently, the Welcome method in the HelloWorldController class takes a name and a ID parameter and then outputs the values directly to the browser. Em vez de fazer com que o controlador renderize a resposta como uma cadeia de caracteres, altere o controlador para que ele use um modelo de exibição.Rather than have the controller render this response as a string, change the controller to use a view template instead. O modelo de exibição gera uma resposta dinâmica, o que significa que é necessário passar bits de dados apropriados do controlador para a exibição para gerar a resposta.The view template generates a dynamic response, which means that appropriate bits of data must be passed from the controller to the view in order to generate the response. Faça 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 pode ser acessado em seguida pelo modelo de exibição.Do this by having the controller put the dynamic data (parameters) that the view template needs in a ViewData dictionary that the view template can then access.

Em HelloWorldController.cs, altere o método Welcome para adicionar um valor Message e NumTimes ao dicionário ViewData.In HelloWorldController.cs, change the Welcome method to add a Message and NumTimes value to the ViewData dictionary. O dicionário ViewData é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O objeto ViewData não tem nenhuma propriedade definida até que você insira algo nele.The ViewData dictionary is a dynamic object, which means any type can be used; the ViewData object has no defined properties until you put something inside it. O sistema de model binding MVC mapeia automaticamente os parâmetros nomeados (name e numTimes) da cadeia de consulta na barra de endereços para os parâmetros no método.The MVC model binding system automatically maps the named parameters (name and numTimes) from the query string in the address bar to parameters in your method. O arquivo HelloWorldController.cs completo tem esta aparência:The complete HelloWorldController.cs file looks like this:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

O objeto de dicionário ViewData contém dados que serão passados para a exibição.The ViewData dictionary object contains data that will be passed to the view.

Crie um modelo de exibição Boas-vindas chamado Views/HelloWorld/Welcome.cshtml.Create a Welcome view template named Views/HelloWorld/Welcome.cshtml.

Você criará um loop no modelo de exibição Welcome.cshtml que exibe “Olá” NumTimes.You'll create a loop in the Welcome.cshtml view template that displays "Hello" NumTimes. Substitua o conteúdo de Views/HelloWorld/Welcome.cshtml pelo seguinte:Replace the contents of Views/HelloWorld/Welcome.cshtml with the following:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Salve as alterações e navegue para a seguinte URL:Save your changes and browse to the following URL:

https://localhost:{PORT}/HelloWorld/Welcome?name=Rick&numtimes=4

Os dados são obtidos da URL e passados para o controlador usando o associador de modelo MVC.Data is taken from the URL and passed to the controller using the MVC model binder . O controlador empacota os dados em um dicionário ViewData e passa esse objeto para a exibição.The controller packages the data into a ViewData dictionary and passes that object to the view. Em seguida, a exibição renderiza os dados como HTML para o navegador.The view then renders the data as HTML to the browser.

Exibição de privacidade que mostra um rótulo Boas-vindas e a frase Olá, Ricardo mostrada quatro vezes

No exemplo acima, o dicionário ViewData foi usado para passar dados do controlador para uma exibição.In the sample above, the ViewData dictionary was used to pass data from the controller to a view. Mais adiante no tutorial, um modelo de exibição será usado para passar dados de um controlador para uma exibição.Later in the tutorial, a view model is used to pass data from a controller to a view. A abordagem de modelo de exibição para passar dados é geralmente a preferida em relação à abordagem do dicionário ViewData.The view model approach to passing data is generally much preferred over the ViewData dictionary approach. Confira mais informações em Quando usar ViewBag, ViewData ou TempData .See When to use ViewBag, ViewData, or TempData for more information.

No próximo tutorial, será criado um banco de dados de filmes.In the next tutorial, a database of movies is created.