Partilhar via

Parte 3, adicionar uma exibição a um aplicativo ASP.NET Core MVC

Observação

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Advertência

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e do .NET Core. Para a versão atual, consulte a versão .NET 9 deste artigo.

Por Rick Anderson

Nesta secção, modifica a classe HelloWorldController para usar ficheiros de visualização Razor. Isso encapsula de forma clara o processo de geração de respostas HTML para um cliente.

Os modelos de exibição são criados usando Razor. Razor-modelos de visualização baseados em

  • Tem uma .cshtml extensão de arquivo.
  • Forneça uma maneira elegante de criar saída HTML com C#.

Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem na classe controller. Na classe HelloWorldController, substitua o método Index pelo seguinte código:

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

O código anterior:

  • Chama o View método do controlador.
  • Usa um modelo de exibição para gerar uma resposta HTML.

Métodos do controlador:

  • São referidos como métodos de ação. Por exemplo, o Index método de ação no código anterior.
  • Geralmente retornam uma IActionResult ou uma classe derivada de ActionResult, não um tipo como string.

Adicionar vista

Clique com o botão direito do rato na pasta Vistas e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.

Clique com o botão direito do rato na pasta Views/HelloWorld e, em seguida, Add > New Item.

Na caixa de diálogo Adicionar Novo Item , se a opção Mostrar Todos os Modelos estiver disponível, selecione-a.

Na caixa de diálogo Adicionar Novo Item - MvcMovie :

  • Na caixa de pesquisa no canto superior direito, escreva 'view'
  • Selecione Razor Visualizar - Vazio
  • Mantenha o valor da caixa Nome , Index.cshtml.
  • Selecione Adicionar

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do Views/HelloWorld/Index.cshtmlRazor arquivo de exibição pelo seguinte:

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

<h2>Index</h2>

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

Navegue até https://localhost:{PORT}/HelloWorld:

  • O método Index em HelloWorldController executou a instrução return View();, que especificou que o método deve usar um ficheiro de modelo de visualização para renderizar uma resposta ao navegador.

  • Um nome de arquivo de modelo de exibição não foi especificado, então o MVC usou como padrão o arquivo de exibição padrão. Quando o nome do arquivo de exibição não é especificado, o modo de exibição padrão é retornado. O modo de exibição padrão tem o mesmo nome que o método action, Index neste exemplo. O modelo /Views/HelloWorld/Index.cshtml de exibição é usado.

  • A imagem a seguir mostra a cadeia de caracteres "Olá do nosso modelo de exibição!" codificada na exibição:

    Janela do navegador

Alterar modos de exibição e páginas de layout

Selecione os links de menu MvcMovie, Homee Privacy. Cada página mostra o mesmo layout de menu. O layout do menu Views/Shared/_Layout.cshtml é implementado no ficheiro.

Abra o ficheiro Views/Shared/_Layout.cshtml.

Os modelos de layout permitem:

  • Especificando o layout de contêiner HTML de um site em um só lugar.
  • Aplicação do layout de contêiner HTML em várias páginas do site.

Encontre a @RenderBody() linha. RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, encapsuladas na página de layout. Por exemplo, se você selecionar o Privacy link, a Views/Home/Privacy.cshtml exibição será renderizada dentro do RenderBody método.

Substitua o conteúdo do ficheiro Views/Shared/_Layout.cshtml pela seguinte marcação. As alterações são destacadas:

<!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" asp-append-version="true" />
    <link rel="stylesheet" href="~/MvcMovie.styles.css" asp-append-version="true" />
</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-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 justify-content-between">
                    <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; 2025 - 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.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

A marcação anterior realizou as seguintes alterações:

  • Três ocorrências de MvcMovie a Movie App.
  • O elemento âncora de <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>.

Na marcação anterior, o asp-area=""atributo Auxiliar de Tag âncora e o valor do atributo foram omitidos porque este aplicativo não está usando Áreas.

Nota: O Movies controlador não foi implementado. Neste ponto, o Movie App link não está funcional.

Salve as alterações e selecione o Privacy link. Observe como o título na guia do navegador é exibido Privacy Política - Movie App em vez de Privacy Política - MvcMovie

Privacy separador

Selecione o link Home.

Note que o título e o texto âncora exibem Movie App. As alterações foram feitas uma vez no modelo de layout e todas as páginas do site refletem o novo texto do link e o novo título.

Examine o Views/_ViewStart.cshtml arquivo:

@{
    Layout = "_Layout";
}

O Views/_ViewStart.cshtml arquivo traz o Views/Shared/_Layout.cshtml arquivo para cada exibição. A Layout propriedade pode ser usada para definir uma exibição de layout diferente ou defini-la para null que nenhum arquivo de layout seja usado.

Abra o ficheiro de visualização Views/HelloWorld/Index.cshtml.

Altere o título e o elemento <h2> conforme realçado a seguir:

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

<h2>My Movie List</h2>

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

O título e <h2> o elemento são ligeiramente diferentes, por isso fica claro qual parte do código altera a exibição.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como "Lista de filmes". A propriedade Title é usada no elemento HTML <title> na página de layout.

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

Salve a alteração e navegue até https://localhost:{PORT}/HelloWorld.

Observe que o seguinte foi alterado:

  • Título do navegador.
  • Título principal.
  • Rubricas secundárias.

Se não houver alterações no navegador, pode haver conteúdo armazenado em cache que está sendo visualizado. Pressione Ctrl+F5 no navegador para forçar o carregamento da resposta do servidor. O título do navegador é criado com ViewData["Title"] que definimos no modelo de visualização Index.cshtml e o adicional "- Movie App" adicionado no arquivo de layout.

O conteúdo no modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml. Uma única resposta HTML é enviada para o navegador. Os modelos de layout facilitam as alterações que se aplicam a todas as páginas de um aplicativo. Para saber mais, consulte Layout.

Visualização da Lista de Filmes

No entanto, o pequeno pedaço de "dados", a mensagem "Olá do nosso template de exibição!", é codificado de forma fixa. O aplicativo MVC tem um "V" (visualização), um "C" (controlador), mas nenhum "M" (modelo) ainda.

Passando dados do controlador para a exibição

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde o código é escrito que lida com as solicitações de entrada do navegador. O controlador recupera dados de uma fonte de dados e decide que tipo de resposta enviar de volta para o navegador. Os modelos de visualização podem ser usados a partir de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.

Os modelos de visualização não devem:

  • Faça lógica de negócios
  • Interaja diretamente com um banco de dados.

Um modelo de exibição deve funcionar apenas com os dados fornecidos a ele pelo controlador. Manter essa "separação de preocupações" ajuda a manter o código:

  • Limpar.
  • Testável.
  • Sustentável.

Atualmente, o método Welcome na classe HelloWorldController usa os parâmetros name e ID e, em seguida, envia os valores diretamente para o navegador.

Em vez de fazer com que o controlador renderize essa resposta como uma cadeia de caracteres, altere o controlador para usar um modelo de exibição. O modelo de exibição gera uma resposta dinâmica, o que significa que os dados apropriados devem ser passados do controlador para a exibição para gerar a resposta. Faça isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewData dicionário. O modelo de exibição pode acessar os dados dinâmicos.

No HelloWorldController.cs, altere o método Welcome para adicionar um valor de Message e NumTimes ao dicionário ViewData.

O ViewData dicionário é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O ViewData objeto não tem propriedades definidas até que algo seja adicionado. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros name nomeados e numTimes da cadeia de caracteres de consulta para parâmetros no método. O completo HelloWorldController:

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 ViewData objeto de dicionário contém dados que serão passados para a exibição.

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

Você criará um loop no Welcome.cshtml modelo de exibição que exibe "Olá". NumTimes Substitua o conteúdo do Views/HelloWorld/Welcome.cshtml pelo seguinte:

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

<h2>Welcome</h2>

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

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

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

Os dados são retirados da URL e passados para o controlador usando o fichário de modelo MVC. O controlador empacota os dados em um ViewData dicionário e passa esse objeto para a exibição. Em seguida, a exibição renderiza os dados como HTML para o navegador.

Privacy mostrando um rótulo de boas-vindas e a frase Hello Rick mostrada quatro vezes

No exemplo anterior, o ViewData dicionário foi usado para passar dados do controlador para uma exibição. Mais adiante no tutorial, um modelo de exibição é usado para passar dados de um controlador para um modo de exibição. A abordagem do modelo de visualização para passar dados é preferida à abordagem de dicionário.

No próximo tutorial, um banco de dados de filmes é criado.

Anterior: Adicionar um controladorPróximo: Adicionar um modelo

Nesta secção, modifica a classe HelloWorldController para usar ficheiros de visualização Razor. Isso encapsula de forma clara o processo de geração de respostas HTML para um cliente.

Os modelos de exibição são criados usando Razor. Razor-modelos de visualização baseados em

  • Tem uma .cshtml extensão de arquivo.
  • Forneça uma maneira elegante de criar saída HTML com C#.

Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem na classe controller. Na classe HelloWorldController, substitua o método Index pelo seguinte código:

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

O código anterior:

  • Chama o View método do controlador.
  • Usa um modelo de exibição para gerar uma resposta HTML.

Métodos do controlador:

  • São referidos como métodos de ação. Por exemplo, o Index método de ação no código anterior.
  • Geralmente retornam uma IActionResult ou uma classe derivada de ActionResult, não um tipo como string.

Adicionar vista

Clique com o botão direito do rato na pasta Vistas e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.

Clique com o botão direito do rato na pasta Views/HelloWorld e, em seguida, Add > New Item.

Na caixa de diálogo Adicionar Novo Item , selecione Mostrar Todos os Modelos.

Na caixa de diálogo Adicionar Novo Item - MvcMovie :

  • Na caixa de pesquisa no canto superior direito, escreva 'view'
  • Selecione Razor Visualizar - Vazio
  • Mantenha o valor da caixa Nome , Index.cshtml.
  • Selecione Adicionar

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do Views/HelloWorld/Index.cshtmlRazor arquivo de exibição pelo seguinte:

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

<h2>Index</h2>

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

Navegue até https://localhost:{PORT}/HelloWorld:

  • O método Index em HelloWorldController executou a instrução return View();, que especificou que o método deve usar um ficheiro de modelo de visualização para renderizar uma resposta ao navegador.

  • Um nome de arquivo de modelo de exibição não foi especificado, então o MVC usou como padrão o arquivo de exibição padrão. Quando o nome do arquivo de exibição não é especificado, o modo de exibição padrão é retornado. O modo de exibição padrão tem o mesmo nome que o método action, Index neste exemplo. O modelo /Views/HelloWorld/Index.cshtml de exibição é usado.

  • A imagem a seguir mostra a cadeia de caracteres "Olá do nosso modelo de exibição!" codificada na exibição:

    Janela do navegador

Alterar modos de exibição e páginas de layout

Selecione os links de menu MvcMovie, Homee Privacy. Cada página mostra o mesmo layout de menu. O layout do menu Views/Shared/_Layout.cshtml é implementado no ficheiro.

Abra o ficheiro Views/Shared/_Layout.cshtml.

Os modelos de layout permitem:

  • Especificando o layout de contêiner HTML de um site em um só lugar.
  • Aplicação do layout de contêiner HTML em várias páginas do site.

Encontre a @RenderBody() linha. RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, encapsuladas na página de layout. Por exemplo, se você selecionar o Privacy link, a Views/Home/Privacy.cshtml exibição será renderizada dentro do RenderBody método.

Substitua o conteúdo do ficheiro Views/Shared/_Layout.cshtml pela seguinte marcação. As alterações são destacadas:

<!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" asp-append-version="true" />
</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-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 justify-content-between">
                    <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; 2023 - 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.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

A marcação anterior realizou as seguintes alterações:

  • Três ocorrências de MvcMovie a Movie App.
  • O elemento âncora de <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>.

Na marcação anterior, o asp-area=""atributo Auxiliar de Tag âncora e o valor do atributo foram omitidos porque este aplicativo não está usando Áreas.

Nota: O Movies controlador não foi implementado. Neste ponto, o Movie App link não está funcional.

Salve as alterações e selecione o Privacy link. Observe como o título na guia do navegador é exibido Privacy Política - Movie App em vez de Privacy Política - MvcMovie

Privacy separador

Selecione o link Home.

Note que o título e o texto âncora exibem Movie App. As alterações foram feitas uma vez no modelo de layout e todas as páginas do site refletem o novo texto do link e o novo título.

Examine o Views/_ViewStart.cshtml arquivo:

@{
    Layout = "_Layout";
}

O Views/_ViewStart.cshtml arquivo traz o Views/Shared/_Layout.cshtml arquivo para cada exibição. A Layout propriedade pode ser usada para definir uma exibição de layout diferente ou defini-la para null que nenhum arquivo de layout seja usado.

Abra o ficheiro de visualização Views/HelloWorld/Index.cshtml.

Altere o título e o elemento <h2> conforme realçado a seguir:

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

<h2>My Movie List</h2>

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

O título e <h2> o elemento são ligeiramente diferentes, por isso fica claro qual parte do código altera a exibição.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como "Lista de filmes". A propriedade Title é usada no elemento HTML <title> na página de layout.

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

Salve a alteração e navegue até https://localhost:{PORT}/HelloWorld.

Observe que o seguinte foi alterado:

  • Título do navegador.
  • Título principal.
  • Rubricas secundárias.

Se não houver alterações no navegador, pode haver conteúdo armazenado em cache que está sendo visualizado. Pressione Ctrl+F5 no navegador para forçar o carregamento da resposta do servidor. O título do navegador é criado com ViewData["Title"] que definimos no modelo de visualização Index.cshtml e o adicional "- Movie App" adicionado no arquivo de layout.

O conteúdo no modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml. Uma única resposta HTML é enviada para o navegador. Os modelos de layout facilitam as alterações que se aplicam a todas as páginas de um aplicativo. Para saber mais, consulte Layout.

Visualização da Lista de Filmes

No entanto, o pequeno pedaço de "dados", a mensagem "Olá do nosso template de exibição!", é codificado de forma fixa. O aplicativo MVC tem um "V" (visualização), um "C" (controlador), mas nenhum "M" (modelo) ainda.

Passando dados do controlador para a exibição

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde o código é escrito que lida com as solicitações de entrada do navegador. O controlador recupera dados de uma fonte de dados e decide que tipo de resposta enviar de volta para o navegador. Os modelos de visualização podem ser usados a partir de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.

Os modelos de visualização não devem:

  • Faça lógica de negócios
  • Interaja diretamente com um banco de dados.

Um modelo de exibição deve funcionar apenas com os dados fornecidos a ele pelo controlador. Manter essa "separação de preocupações" ajuda a manter o código:

  • Limpar.
  • Testável.
  • Sustentável.

Atualmente, o método Welcome na classe HelloWorldController usa os parâmetros name e ID e, em seguida, envia os valores diretamente para o navegador.

Em vez de fazer com que o controlador renderize essa resposta como uma cadeia de caracteres, altere o controlador para usar um modelo de exibição. O modelo de exibição gera uma resposta dinâmica, o que significa que os dados apropriados devem ser passados do controlador para a exibição para gerar a resposta. Faça isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewData dicionário. O modelo de exibição pode acessar os dados dinâmicos.

No HelloWorldController.cs, altere o método Welcome para adicionar um valor de Message e NumTimes ao dicionário ViewData.

O ViewData dicionário é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O ViewData objeto não tem propriedades definidas até que algo seja adicionado. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros name nomeados e numTimes da cadeia de caracteres de consulta para parâmetros no método. O completo HelloWorldController:

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 ViewData objeto de dicionário contém dados que serão passados para a exibição.

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

Você criará um loop no Welcome.cshtml modelo de exibição que exibe "Olá". NumTimes Substitua o conteúdo do Views/HelloWorld/Welcome.cshtml pelo seguinte:

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

<h2>Welcome</h2>

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

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

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

Os dados são retirados da URL e passados para o controlador usando o fichário de modelo MVC. O controlador empacota os dados em um ViewData dicionário e passa esse objeto para a exibição. Em seguida, a exibição renderiza os dados como HTML para o navegador.

Privacy mostrando um rótulo de boas-vindas e a frase Hello Rick mostrada quatro vezes

No exemplo anterior, o ViewData dicionário foi usado para passar dados do controlador para uma exibição. Mais adiante no tutorial, um modelo de exibição é usado para passar dados de um controlador para um modo de exibição. A abordagem do modelo de visualização para passar dados é preferida à abordagem de dicionário.

No próximo tutorial, um banco de dados de filmes é criado.

Anterior: Adicionar um controladorPróximo: Adicionar um modelo

Nesta secção, modifica a classe HelloWorldController para usar ficheiros de visualização Razor. Isso encapsula de forma clara o processo de geração de respostas HTML para um cliente.

Os modelos de exibição são criados usando Razor. Razor-modelos de visualização baseados em

  • Tem uma .cshtml extensão de arquivo.
  • Forneça uma maneira elegante de criar saída HTML com C#.

Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem na classe controller. Na classe HelloWorldController, substitua o método Index pelo seguinte código:

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

O código anterior:

  • Chama o View método do controlador.
  • Usa um modelo de exibição para gerar uma resposta HTML.

Métodos do controlador:

  • São referidos como métodos de ação. Por exemplo, o Index método de ação no código anterior.
  • Geralmente retornam uma IActionResult ou uma classe derivada de ActionResult, não um tipo como string.

Adicionar vista

Clique com o botão direito do rato na pasta Vistas e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.

Clique com o botão direito do rato na pasta Views/HelloWorld e, em seguida, Add > New Item.

Na caixa de diálogo Adicionar Novo Item - MvcMovie :

  • Na caixa de pesquisa no canto superior direito, escreva 'view'
  • Selecione Razor Visualizar - Vazio
  • Mantenha o valor da caixa Nome , Index.cshtml.
  • Selecione Adicionar

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do Views/HelloWorld/Index.cshtmlRazor arquivo de exibição pelo seguinte:

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

<h2>Index</h2>

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

Navegue até https://localhost:{PORT}/HelloWorld:

  • O método Index em HelloWorldController executou a instrução return View();, que especificou que o método deve usar um ficheiro de modelo de visualização para renderizar uma resposta ao navegador.

  • Um nome de arquivo de modelo de exibição não foi especificado, então o MVC usou como padrão o arquivo de exibição padrão. Quando o nome do arquivo de exibição não é especificado, o modo de exibição padrão é retornado. O modo de exibição padrão tem o mesmo nome que o método action, Index neste exemplo. O modelo /Views/HelloWorld/Index.cshtml de exibição é usado.

  • A imagem a seguir mostra a cadeia de caracteres "Olá do nosso modelo de exibição!" codificada na exibição:

    Janela do navegador

Alterar modos de exibição e páginas de layout

Selecione os links de menu MvcMovie, Homee Privacy. Cada página mostra o mesmo layout de menu. O layout do menu Views/Shared/_Layout.cshtml é implementado no ficheiro.

Abra o ficheiro Views/Shared/_Layout.cshtml.

Os modelos de layout permitem:

  • Especificando o layout de contêiner HTML de um site em um só lugar.
  • Aplicação do layout de contêiner HTML em várias páginas do site.

Encontre a @RenderBody() linha. RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, encapsuladas na página de layout. Por exemplo, se você selecionar o Privacy link, a Views/Home/Privacy.cshtml exibição será renderizada dentro do RenderBody método.

Substitua o conteúdo do ficheiro Views/Shared/_Layout.cshtml pela seguinte marcação. As alterações são destacadas:

<!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" asp-append-version="true" />
</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-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 justify-content-between">
                    <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; 2022 - 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.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

A marcação anterior realizou as seguintes alterações:

  • Três ocorrências de MvcMovie a Movie App.
  • O elemento âncora de <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>.

Na marcação anterior, o asp-area=""atributo Auxiliar de Tag âncora e o valor do atributo foram omitidos porque este aplicativo não está usando Áreas.

Nota: O Movies controlador não foi implementado. Neste ponto, o Movie App link não está funcional.

Salve as alterações e selecione o Privacy link. Observe como o título na guia do navegador é exibido Privacy Política - Movie App em vez de Privacy Política - MvcMovie

Privacy separador

Selecione o link Home.

Note que o título e o texto âncora exibem Movie App. As alterações foram feitas uma vez no modelo de layout e todas as páginas do site refletem o novo texto do link e o novo título.

Examine o Views/_ViewStart.cshtml arquivo:

@{
    Layout = "_Layout";
}

O Views/_ViewStart.cshtml arquivo traz o Views/Shared/_Layout.cshtml arquivo para cada exibição. A Layout propriedade pode ser usada para definir uma exibição de layout diferente ou defini-la para null que nenhum arquivo de layout seja usado.

Abra o ficheiro de visualização Views/HelloWorld/Index.cshtml.

Altere o título e o elemento <h2> conforme realçado a seguir:

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

<h2>My Movie List</h2>

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

O título e <h2> o elemento são ligeiramente diferentes, por isso fica claro qual parte do código altera a exibição.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como "Lista de filmes". A propriedade Title é usada no elemento HTML <title> na página de layout.

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

Salve a alteração e navegue até https://localhost:{PORT}/HelloWorld.

Observe que o seguinte foi alterado:

  • Título do navegador.
  • Título principal.
  • Rubricas secundárias.

Se não houver alterações no navegador, pode haver conteúdo armazenado em cache que está sendo visualizado. Pressione Ctrl+F5 no navegador para forçar o carregamento da resposta do servidor. O título do navegador é criado com ViewData["Title"] que definimos no modelo de visualização Index.cshtml e o adicional "- Movie App" adicionado no arquivo de layout.

O conteúdo no modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml. Uma única resposta HTML é enviada para o navegador. Os modelos de layout facilitam as alterações que se aplicam a todas as páginas de um aplicativo. Para saber mais, consulte Layout.

Visualização da Lista de Filmes

No entanto, o pequeno pedaço de "dados", a mensagem "Olá do nosso template de exibição!", é codificado de forma fixa. O aplicativo MVC tem um "V" (visualização), um "C" (controlador), mas nenhum "M" (modelo) ainda.

Passando dados do controlador para a exibição

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde o código é escrito que lida com as solicitações de entrada do navegador. O controlador recupera dados de uma fonte de dados e decide que tipo de resposta enviar de volta para o navegador. Os modelos de visualização podem ser usados a partir de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.

Os modelos de visualização não devem:

  • Faça lógica de negócios
  • Interaja diretamente com um banco de dados.

Um modelo de exibição deve funcionar apenas com os dados fornecidos a ele pelo controlador. Manter essa "separação de preocupações" ajuda a manter o código:

  • Limpar.
  • Testável.
  • Sustentável.

Atualmente, o método Welcome na classe HelloWorldController usa os parâmetros name e ID e, em seguida, envia os valores diretamente para o navegador.

Em vez de fazer com que o controlador renderize essa resposta como uma cadeia de caracteres, altere o controlador para usar um modelo de exibição. O modelo de exibição gera uma resposta dinâmica, o que significa que os dados apropriados devem ser passados do controlador para a exibição para gerar a resposta. Faça isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewData dicionário. O modelo de exibição pode acessar os dados dinâmicos.

No HelloWorldController.cs, altere o método Welcome para adicionar um valor de Message e NumTimes ao dicionário ViewData.

O ViewData dicionário é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O ViewData objeto não tem propriedades definidas até que algo seja adicionado. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros name nomeados e numTimes da cadeia de caracteres de consulta para parâmetros no método. O completo HelloWorldController:

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 ViewData objeto de dicionário contém dados que serão passados para a exibição.

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

Você criará um loop no Welcome.cshtml modelo de exibição que exibe "Olá". NumTimes Substitua o conteúdo do Views/HelloWorld/Welcome.cshtml pelo seguinte:

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

<h2>Welcome</h2>

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

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

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

Os dados são retirados da URL e passados para o controlador usando o fichário de modelo MVC. O controlador empacota os dados em um ViewData dicionário e passa esse objeto para a exibição. Em seguida, a exibição renderiza os dados como HTML para o navegador.

Privacy mostrando um rótulo de boas-vindas e a frase Hello Rick mostrada quatro vezes

No exemplo anterior, o ViewData dicionário foi usado para passar dados do controlador para uma exibição. Mais adiante no tutorial, um modelo de exibição é usado para passar dados de um controlador para um modo de exibição. A abordagem do modelo de visualização para passar dados é preferida à abordagem de dicionário.

No próximo tutorial, um banco de dados de filmes é criado.

Anterior: Adicionar um controladorPróximo: Adicionar um modelo

Nesta secção, modifica a classe HelloWorldController para usar ficheiros de visualização Razor. Isso encapsula de forma clara o processo de geração de respostas HTML para um cliente.

Os modelos de exibição são criados usando Razor. Razor-modelos de visualização baseados em

  • Tem uma .cshtml extensão de arquivo.
  • Forneça uma maneira elegante de criar saída HTML com C#.

Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem na classe controller. Na classe HelloWorldController, substitua o método Index pelo seguinte código:

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

O código anterior:

  • Chama o View método do controlador.
  • Usa um modelo de exibição para gerar uma resposta HTML.

Métodos do controlador:

  • São referidos como métodos de ação. Por exemplo, o Index método de ação no código anterior.
  • Geralmente retornam uma IActionResult ou uma classe derivada de ActionResult, não um tipo como string.

Adicionar vista

Clique com o botão direito do rato na pasta Vistas e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.

Clique com o botão direito do rato na pasta Views/HelloWorld e, em seguida, Add > New Item.

Na caixa de diálogo Adicionar Novo Item - MvcMovie :

  • Na caixa de pesquisa no canto superior direito, escreva 'view'
  • Selecione Razor Visualizar - Vazio
  • Mantenha o valor da caixa Nome , Index.cshtml.
  • Selecione Adicionar

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do Views/HelloWorld/Index.cshtmlRazor arquivo de exibição pelo seguinte:

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

<h2>Index</h2>

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

Navegue até https://localhost:{PORT}/HelloWorld:

  • O método Index em HelloWorldController executou a instrução return View();, que especificou que o método deve usar um ficheiro de modelo de visualização para renderizar uma resposta ao navegador.

  • Um nome de arquivo de modelo de exibição não foi especificado, então o MVC usou como padrão o arquivo de exibição padrão. Quando o nome do arquivo de exibição não é especificado, o modo de exibição padrão é retornado. O modo de exibição padrão tem o mesmo nome que o método action, Index neste exemplo. O modelo /Views/HelloWorld/Index.cshtml de exibição é usado.

  • A imagem a seguir mostra a cadeia de caracteres "Olá do nosso modelo de exibição!" codificada na exibição:

    Janela do navegador

Alterar modos de exibição e páginas de layout

Selecione os links de menu MvcMovie, Homee Privacy. Cada página mostra o mesmo layout de menu. O layout do menu Views/Shared/_Layout.cshtml é implementado no ficheiro.

Abra o ficheiro Views/Shared/_Layout.cshtml.

Os modelos de layout permitem:

  • Especificando o layout de contêiner HTML de um site em um só lugar.
  • Aplicação do layout de contêiner HTML em várias páginas do site.

Encontre a @RenderBody() linha. RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, encapsuladas na página de layout. Por exemplo, se você selecionar o Privacy link, a Views/Home/Privacy.cshtml exibição será renderizada dentro do RenderBody método.

Substitua o conteúdo do ficheiro Views/Shared/_Layout.cshtml pela seguinte marcação. As alterações são destacadas:

<!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" asp-append-version="true" />
</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-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 justify-content-between">
                    <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; 2021 - 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.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

A marcação anterior realizou as seguintes alterações:

  • Três ocorrências de MvcMovie a Movie App.
  • O elemento âncora de <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>.

Na marcação anterior, o asp-area=""atributo Auxiliar de Tag âncora e o valor do atributo foram omitidos porque este aplicativo não está usando Áreas.

Nota: O Movies controlador não foi implementado. Neste ponto, o Movie App link não está funcional.

Salve as alterações e selecione o Privacy link. Observe como o título na guia do navegador é exibido Privacy Política - Movie App em vez de Privacy Política - MvcMovie

Privacy separador

Selecione o link Home.

Note que o título e o texto âncora exibem Movie App. As alterações foram feitas uma vez no modelo de layout e todas as páginas do site refletem o novo texto do link e o novo título.

Examine o Views/_ViewStart.cshtml arquivo:

@{
    Layout = "_Layout";
}

O Views/_ViewStart.cshtml arquivo traz o Views/Shared/_Layout.cshtml arquivo para cada exibição. A Layout propriedade pode ser usada para definir uma exibição de layout diferente ou defini-la para null que nenhum arquivo de layout seja usado.

Abra o ficheiro de visualização Views/HelloWorld/Index.cshtml.

Altere o título e o elemento <h2> conforme realçado a seguir:

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

<h2>My Movie List</h2>

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

O título e <h2> o elemento são ligeiramente diferentes, por isso fica claro qual parte do código altera a exibição.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como "Lista de filmes". A propriedade Title é usada no elemento HTML <title> na página de layout.

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

Salve a alteração e navegue até https://localhost:{PORT}/HelloWorld.

Observe que o seguinte foi alterado:

  • Título do navegador.
  • Título principal.
  • Rubricas secundárias.

Se não houver alterações no navegador, pode haver conteúdo armazenado em cache que está sendo visualizado. Pressione Ctrl+F5 no navegador para forçar o carregamento da resposta do servidor. O título do navegador é criado com ViewData["Title"] que definimos no modelo de visualização Index.cshtml e o adicional "- Movie App" adicionado no arquivo de layout.

O conteúdo no modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml. Uma única resposta HTML é enviada para o navegador. Os modelos de layout facilitam as alterações que se aplicam a todas as páginas de um aplicativo. Para saber mais, consulte Layout.

Visualização da Lista de Filmes

No entanto, o pequeno pedaço de "dados", a mensagem "Olá do nosso template de exibição!", é codificado de forma fixa. O aplicativo MVC tem um "V" (visualização), um "C" (controlador), mas nenhum "M" (modelo) ainda.

Passando dados do controlador para a exibição

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde o código é escrito que lida com as solicitações de entrada do navegador. O controlador recupera dados de uma fonte de dados e decide que tipo de resposta enviar de volta para o navegador. Os modelos de visualização podem ser usados a partir de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.

Os modelos de visualização não devem:

  • Faça lógica de negócios
  • Interaja diretamente com um banco de dados.

Um modelo de exibição deve funcionar apenas com os dados fornecidos a ele pelo controlador. Manter essa "separação de preocupações" ajuda a manter o código:

  • Limpar.
  • Testável.
  • Sustentável.

Atualmente, o método Welcome na classe HelloWorldController usa os parâmetros name e ID e, em seguida, envia os valores diretamente para o navegador.

Em vez de fazer com que o controlador renderize essa resposta como uma cadeia de caracteres, altere o controlador para usar um modelo de exibição. O modelo de exibição gera uma resposta dinâmica, o que significa que os dados apropriados devem ser passados do controlador para a exibição para gerar a resposta. Faça isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewData dicionário. O modelo de exibição pode acessar os dados dinâmicos.

No HelloWorldController.cs, altere o método Welcome para adicionar um valor de Message e NumTimes ao dicionário ViewData.

O ViewData dicionário é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O ViewData objeto não tem propriedades definidas até que algo seja adicionado. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros name nomeados e numTimes da cadeia de caracteres de consulta para parâmetros no método. O completo HelloWorldController:

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 ViewData objeto de dicionário contém dados que serão passados para a exibição.

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

Você criará um loop no Welcome.cshtml modelo de exibição que exibe "Olá". NumTimes Substitua o conteúdo do Views/HelloWorld/Welcome.cshtml pelo seguinte:

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

<h2>Welcome</h2>

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

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

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

Os dados são retirados da URL e passados para o controlador usando o fichário de modelo MVC. O controlador empacota os dados em um ViewData dicionário e passa esse objeto para a exibição. Em seguida, a exibição renderiza os dados como HTML para o navegador.

Privacy mostrando um rótulo de boas-vindas e a frase Hello Rick mostrada quatro vezes

No exemplo anterior, o ViewData dicionário foi usado para passar dados do controlador para uma exibição. Mais adiante no tutorial, um modelo de exibição é usado para passar dados de um controlador para um modo de exibição. A abordagem do modelo de visualização para passar dados é preferida à abordagem de dicionário.

No próximo tutorial, um banco de dados de filmes é criado.

Anterior: Adicionar um controladorPróximo: Adicionar um modelo

Nesta secção, modifica a classe HelloWorldController para usar ficheiros de visualização Razor. Isso encapsula de forma clara o processo de geração de respostas HTML para um cliente.

Os modelos de exibição são criados usando Razor. Razor-modelos de visualização baseados em

  • Tem uma .cshtml extensão de arquivo.
  • Forneça uma maneira elegante de criar saída HTML com C#.

Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem na classe controller. Na classe HelloWorldController, substitua o método Index pelo seguinte código:

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

O código anterior:

  • Chama o View método do controlador.
  • Usa um modelo de exibição para gerar uma resposta HTML.

Métodos do controlador:

  • São referidos como métodos de ação. Por exemplo, o Index método de ação no código anterior.
  • Geralmente retornam uma IActionResult ou uma classe derivada de ActionResult, não um tipo como string.

Adicionar vista

Clique com o botão direito do rato na pasta Vistas e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.

Clique com o botão direito do rato na pasta Views/HelloWorld e, em seguida, Add > New Item.

Na caixa de diálogo Adicionar Novo Item - MvcMovie :

  • Na caixa de pesquisa no canto superior direito, escreva 'view'
  • Selecione Razor Visualizar - Vazio
  • Mantenha o valor da caixa Nome , Index.cshtml.
  • Selecione Adicionar

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do Views/HelloWorld/Index.cshtmlRazor arquivo de exibição pelo seguinte:

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

<h2>Index</h2>

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

Navegue até https://localhost:{PORT}/HelloWorld:

  • O método Index em HelloWorldController executou a instrução return View();, que especificou que o método deve usar um ficheiro de modelo de visualização para renderizar uma resposta ao navegador.

  • Um nome de arquivo de modelo de exibição não foi especificado, então o MVC usou como padrão o arquivo de exibição padrão. Quando o nome do arquivo de exibição não é especificado, o modo de exibição padrão é retornado. O modo de exibição padrão tem o mesmo nome que o método action, Index neste exemplo. O modelo /Views/HelloWorld/Index.cshtml de exibição é usado.

  • A imagem a seguir mostra a cadeia de caracteres "Olá do nosso modelo de exibição!" codificada na exibição:

    Janela do navegador

Alterar modos de exibição e páginas de layout

Selecione os links de menu MvcMovie, Homee Privacy. Cada página mostra o mesmo layout de menu. O layout do menu Views/Shared/_Layout.cshtml é implementado no ficheiro.

Abra o ficheiro Views/Shared/_Layout.cshtml.

Os modelos de layout permitem:

  • Especificando o layout de contêiner HTML de um site em um só lugar.
  • Aplicação do layout de contêiner HTML em várias páginas do site.

Encontre a @RenderBody() linha. RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, encapsuladas na página de layout. Por exemplo, se você selecionar o Privacy link, a Views/Home/Privacy.cshtml exibição será renderizada dentro do RenderBody método.

Substitua o conteúdo do ficheiro Views/Shared/_Layout.cshtml pela seguinte marcação. As alterações são destacadas:

<!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 justify-content-between">
                    <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; 2020 - 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>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

A marcação anterior realizou as seguintes alterações:

  • Três ocorrências de MvcMovie a Movie App.
  • O elemento âncora de <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>.

Na marcação anterior, o asp-area=""atributo Auxiliar de Tag âncora e o valor do atributo foram omitidos porque este aplicativo não está usando Áreas.

Nota: O Movies controlador não foi implementado. Neste ponto, o Movie App link não está funcional.

Salve as alterações e selecione o Privacy link. Observe como o título na guia do navegador é exibido Privacy Política - Movie App em vez de Privacy Política - MvcMovie

Privacy separador

Selecione o link Home.

Note que o título e o texto âncora exibem Movie App. As alterações foram feitas uma vez no modelo de layout e todas as páginas do site refletem o novo texto do link e o novo título.

Examine o Views/_ViewStart.cshtml arquivo:

@{
    Layout = "_Layout";
}

O Views/_ViewStart.cshtml arquivo traz o Views/Shared/_Layout.cshtml arquivo para cada exibição. A Layout propriedade pode ser usada para definir uma exibição de layout diferente ou defini-la para null que nenhum arquivo de layout seja usado.

Abra o ficheiro de visualização Views/HelloWorld/Index.cshtml.

Altere o título e o elemento <h2> conforme realçado a seguir:

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

<h2>My Movie List</h2>

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

O título e <h2> o elemento são ligeiramente diferentes, por isso fica claro qual parte do código altera a exibição.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como "Lista de filmes". A propriedade Title é usada no elemento HTML <title> na página de layout.

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

Salve a alteração e navegue até https://localhost:{PORT}/HelloWorld.

Observe que o seguinte foi alterado:

  • Título do navegador.
  • Título principal.
  • Rubricas secundárias.

Se não houver alterações no navegador, pode haver conteúdo armazenado em cache que está sendo visualizado. Pressione Ctrl+F5 no navegador para forçar o carregamento da resposta do servidor. O título do navegador é criado com ViewData["Title"] que definimos no modelo de visualização Index.cshtml e o adicional "- Movie App" adicionado no arquivo de layout.

O conteúdo no modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml. Uma única resposta HTML é enviada para o navegador. Os modelos de layout facilitam as alterações que se aplicam a todas as páginas de um aplicativo. Para saber mais, consulte Layout.

Visualização da Lista de Filmes

No entanto, o pequeno pedaço de "dados", a mensagem "Olá do nosso template de exibição!", é codificado de forma fixa. O aplicativo MVC tem um "V" (visualização), um "C" (controlador), mas nenhum "M" (modelo) ainda.

Passando dados do controlador para a exibição

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde o código é escrito que lida com as solicitações de entrada do navegador. O controlador recupera dados de uma fonte de dados e decide que tipo de resposta enviar de volta para o navegador. Os modelos de visualização podem ser usados a partir de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.

Os modelos de visualização não devem:

  • Faça lógica de negócios
  • Interaja diretamente com um banco de dados.

Um modelo de exibição deve funcionar apenas com os dados fornecidos a ele pelo controlador. Manter essa "separação de preocupações" ajuda a manter o código:

  • Limpar.
  • Testável.
  • Sustentável.

Atualmente, o método Welcome na classe HelloWorldController usa os parâmetros name e ID e, em seguida, envia os valores diretamente para o navegador.

Em vez de fazer com que o controlador renderize essa resposta como uma cadeia de caracteres, altere o controlador para usar um modelo de exibição. O modelo de exibição gera uma resposta dinâmica, o que significa que os dados apropriados devem ser passados do controlador para a exibição para gerar a resposta. Faça isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewData dicionário. O modelo de exibição pode acessar os dados dinâmicos.

No HelloWorldController.cs, altere o método Welcome para adicionar um valor de Message e NumTimes ao dicionário ViewData.

O ViewData dicionário é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O ViewData objeto não tem propriedades definidas até que algo seja adicionado. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros name nomeados e numTimes da cadeia de caracteres de consulta para parâmetros no método. O completo HelloWorldController:

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 ViewData objeto de dicionário contém dados que serão passados para a exibição.

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

Você criará um loop no Welcome.cshtml modelo de exibição que exibe "Olá". NumTimes Substitua o conteúdo do Views/HelloWorld/Welcome.cshtml pelo seguinte:

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

<h2>Welcome</h2>

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

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

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

Os dados são retirados da URL e passados para o controlador usando o fichário de modelo MVC. O controlador empacota os dados em um ViewData dicionário e passa esse objeto para a exibição. Em seguida, a exibição renderiza os dados como HTML para o navegador.

Privacy mostrando um rótulo de boas-vindas e a frase Hello Rick mostrada quatro vezes

No exemplo anterior, o ViewData dicionário foi usado para passar dados do controlador para uma exibição. Mais adiante no tutorial, um modelo de exibição é usado para passar dados de um controlador para um modo de exibição. A abordagem do modelo de visualização para passar dados é preferida à abordagem de dicionário.

No próximo tutorial, um banco de dados de filmes é criado.

Anterior: Adicionar um controladorPróximo: Adicionar um modelo

Nesta secção, modifica a classe HelloWorldController para usar ficheiros de visualização Razor. Isso encapsula de forma clara o processo de geração de respostas HTML para um cliente.

Os modelos de exibição são criados usando Razor. Razor-modelos de visualização baseados em

  • Tem uma .cshtml extensão de arquivo.
  • Forneça uma maneira elegante de criar saída HTML com C#.

Atualmente, o Index método retorna uma cadeia de caracteres com uma mensagem na classe controller. Na classe HelloWorldController, substitua o método Index pelo seguinte código:

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

O código anterior:

  • Chama o View método do controlador.
  • Usa um modelo de exibição para gerar uma resposta HTML.

Métodos do controlador:

  • São referidos como métodos de ação. Por exemplo, o Index método de ação no código anterior.
  • Geralmente retornam uma IActionResult ou uma classe derivada de ActionResult, não um tipo como string.

Adicionar vista

Clique com o botão direito do rato na pasta Vistas e, em seguida, Adicionar > Nova Pasta e nomeie a pasta HelloWorld.

Clique com o botão direito do rato na pasta Views/HelloWorld e, em seguida, Add > New Item.

Na caixa de diálogo Adicionar Novo Item - MvcMovie :

  • Na caixa de pesquisa no canto superior direito, escreva 'view'
  • Selecione Razor Visualizar - Vazio
  • Mantenha o valor da caixa Nome , Index.cshtml.
  • Selecione Adicionar

Caixa de diálogo Adicionar Novo Item

Substitua o conteúdo do Views/HelloWorld/Index.cshtmlRazor arquivo de exibição pelo seguinte:

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

<h2>Index</h2>

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

Navegue até https://localhost:{PORT}/HelloWorld:

  • O método Index em HelloWorldController executou a instrução return View();, que especificou que o método deve usar um ficheiro de modelo de visualização para renderizar uma resposta ao navegador.

  • Um nome de arquivo de modelo de exibição não foi especificado, então o MVC usou como padrão o arquivo de exibição padrão. Quando o nome do arquivo de exibição não é especificado, o modo de exibição padrão é retornado. O modo de exibição padrão tem o mesmo nome que o método action, Index neste exemplo. O modelo /Views/HelloWorld/Index.cshtml de exibição é usado.

  • A imagem a seguir mostra a cadeia de caracteres "Olá do nosso modelo de exibição!" codificada na exibição:

    Janela do navegador

Alterar modos de exibição e páginas de layout

Selecione os links de menu MvcMovie, Homee Privacy. Cada página mostra o mesmo layout de menu. O layout do menu Views/Shared/_Layout.cshtml é implementado no ficheiro.

Abra o ficheiro Views/Shared/_Layout.cshtml.

Os modelos de layout permitem:

  • Especificando o layout de contêiner HTML de um site em um só lugar.
  • Aplicação do layout de contêiner HTML em várias páginas do site.

Encontre a @RenderBody() linha. RenderBody é um espaço reservado onde todas as páginas específicas de exibição que você cria aparecem, encapsuladas na página de layout. Por exemplo, se você selecionar o Privacy link, a Views/Home/Privacy.cshtml exibição será renderizada dentro do RenderBody método.

Substitua o conteúdo do ficheiro Views/Shared/_Layout.cshtml pela seguinte marcação. As alterações são destacadas:

<!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; 2020 - 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 realizou as seguintes alterações:

  • Três ocorrências de MvcMovie a Movie App.
  • O elemento âncora de <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>.

Na marcação anterior, o asp-area=""atributo Auxiliar de Tag âncora e o valor do atributo foram omitidos porque este aplicativo não está usando Áreas.

Nota: O Movies controlador não foi implementado. Neste ponto, o Movie App link não está funcional.

Salve as alterações e selecione o Privacy link. Observe como o título na guia do navegador é exibido Privacy Política - Movie App em vez de Privacy Política - MvcMovie

Privacy separador

Selecione o link Home.

Note que o título e o texto âncora exibem Movie App. As alterações foram feitas uma vez no modelo de layout e todas as páginas do site refletem o novo texto do link e o novo título.

Examine o Views/_ViewStart.cshtml arquivo:

@{
    Layout = "_Layout";
}

O Views/_ViewStart.cshtml arquivo traz o Views/Shared/_Layout.cshtml arquivo para cada exibição. A Layout propriedade pode ser usada para definir uma exibição de layout diferente ou defini-la para null que nenhum arquivo de layout seja usado.

Abra o ficheiro de visualização Views/HelloWorld/Index.cshtml.

Altere o título e o elemento <h2> conforme realçado a seguir:

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

<h2>My Movie List</h2>

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

O título e <h2> o elemento são ligeiramente diferentes, por isso fica claro qual parte do código altera a exibição.

ViewData["Title"] = "Movie List"; no código acima define a propriedade Title do dicionário ViewData como "Lista de filmes". A propriedade Title é usada no elemento HTML <title> na página de layout.

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

Salve a alteração e navegue até https://localhost:{PORT}/HelloWorld.

Observe que o seguinte foi alterado:

  • Título do navegador.
  • Título principal.
  • Rubricas secundárias.

Se não houver alterações no navegador, pode haver conteúdo armazenado em cache que está sendo visualizado. Pressione Ctrl+F5 no navegador para forçar o carregamento da resposta do servidor. O título do navegador é criado com ViewData["Title"] que definimos no modelo de visualização Index.cshtml e o adicional "- Movie App" adicionado no arquivo de layout.

O conteúdo no modelo de exibição Index.cshtml é mesclado com o modelo de exibição Views/Shared/_Layout.cshtml. Uma única resposta HTML é enviada para o navegador. Os modelos de layout facilitam as alterações que se aplicam a todas as páginas de um aplicativo. Para saber mais, consulte Layout.

Visualização da Lista de Filmes

No entanto, o pequeno pedaço de "dados", a mensagem "Olá do nosso template de exibição!", é codificado de forma fixa. O aplicativo MVC tem um "V" (visualização), um "C" (controlador), mas nenhum "M" (modelo) ainda.

Passando dados do controlador para a exibição

As ações do controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde o código é escrito que lida com as solicitações de entrada do navegador. O controlador recupera dados de uma fonte de dados e decide que tipo de resposta enviar de volta para o navegador. Os modelos de visualização podem ser usados a partir de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer os dados necessários para que um modelo de exibição renderize uma resposta.

Os modelos de visualização não devem:

  • Faça lógica de negócios
  • Interaja diretamente com um banco de dados.

Um modelo de exibição deve funcionar apenas com os dados fornecidos a ele pelo controlador. Manter essa "separação de preocupações" ajuda a manter o código:

  • Limpar.
  • Testável.
  • Sustentável.

Atualmente, o método Welcome na classe HelloWorldController usa os parâmetros name e ID e, em seguida, envia os valores diretamente para o navegador.

Em vez de fazer com que o controlador renderize essa resposta como uma cadeia de caracteres, altere o controlador para usar um modelo de exibição. O modelo de exibição gera uma resposta dinâmica, o que significa que os dados apropriados devem ser passados do controlador para a exibição para gerar a resposta. Faça isso fazendo com que o controlador coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewData dicionário. O modelo de exibição pode acessar os dados dinâmicos.

No HelloWorldController.cs, altere o método Welcome para adicionar um valor de Message e NumTimes ao dicionário ViewData.

O ViewData dicionário é um objeto dinâmico, o que significa que qualquer tipo pode ser usado. O ViewData objeto não tem propriedades definidas até que algo seja adicionado. O sistema de vinculação de modelo MVC mapeia automaticamente os parâmetros name nomeados e numTimes da cadeia de caracteres de consulta para parâmetros no método. O completo HelloWorldController:

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 ViewData objeto de dicionário contém dados que serão passados para a exibição.

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

Você criará um loop no Welcome.cshtml modelo de exibição que exibe "Olá". NumTimes Substitua o conteúdo do Views/HelloWorld/Welcome.cshtml pelo seguinte:

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

<h2>Welcome</h2>

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

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

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

Os dados são retirados da URL e passados para o controlador usando o fichário de modelo MVC. O controlador empacota os dados em um ViewData dicionário e passa esse objeto para a exibição. Em seguida, a exibição renderiza os dados como HTML para o navegador.

Privacy mostrando um rótulo de boas-vindas e a frase Hello Rick mostrada quatro vezes

No exemplo anterior, o ViewData dicionário foi usado para passar dados do controlador para uma exibição. Mais adiante no tutorial, um modelo de exibição é usado para passar dados de um controlador para um modo de exibição. A abordagem do modelo de visualização para passar dados é preferida à abordagem de dicionário.

No próximo tutorial, um banco de dados de filmes é criado.

Anterior: Adicionar um controladorPróximo: Adicionar um modelo

  • Last updated on