Adicionar uma exibição

por Rick Anderson

Note

Uma versão atualizada deste tutorial está disponível aqui usando a versão mais recente do Visual Studio. O novo tutorial usa ASP.NET Core MVC,que fornece muitas melhorias sobre este tutorial.

Este tutorial ensina a usar o ASP.NET Core MVC com controladores e exibições. Razor Pages é uma nova alternativa no ASP.NET Core, um modelo de programação baseado em página que torna a criação da interface do usuário da Web mais fácil e produtiva. Recomendamos que você experimente o tutorial Razor Pages antes da versão do MVC. O tutorial Páginas do Razor:

  • É mais fácil de acompanhar.
  • Aborda mais recursos.
  • É a abordagem preferencial para o desenvolvimento de novos aplicativos.

Nesta seção, você modificará a HelloWorldController classe para usar os arquivos de modelo de exibição para encapsular corretamente o processo de geração de respostas HTML para um cliente.

Você criará um arquivo de modelo de exibição usando o mecanismo de exibição do Razor. Os modelos de exibição baseados em Razor têm uma extensão de arquivo . cshtml e fornecem uma maneira elegante de criar uma saída HTML usando C#. O Razor minimiza o número de caracteres e pressionamentos de teclas necessários ao escrever um modelo de exibição e permite um fluxo de trabalho de codificação rápido e fluido.

Atualmente, o método Index retorna uma cadeia de caracteres com uma mensagem que é embutida em código na classe do controlador. Altere o Index método para chamar o método de exibição de controladores, conforme mostrado no código a seguir:

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

O Index método acima usa um modelo de exibição para gerar uma resposta HTML para o navegador. Os métodos do controlador (também conhecidos como métodos de ação), como o Index método acima, geralmente retornam um ActionResult (ou uma classe derivada de ActionResult), não tipos primitivos como cadeia de caracteres.

Clique com o botão direito do mouse na pasta Views\HelloWorld e clique em Adicionare, em seguida, clique em exibição MVC 5 página com layout (Razor).

Na caixa de diálogo especificar nome para o item , insira índicee clique em OK.

Na caixa de diálogo selecionar uma página de layout , aceite o default ** _ layout. cshtml** e clique em OK.

Na caixa de diálogo acima, a pasta Views\Shared está selecionada no painel esquerdo. Se você tiver um arquivo de layout personalizado em outra pasta, poderá selecioná-lo. Falaremos sobre o arquivo de layout mais adiante no tutorial

O arquivo MvcMovie\Views\HelloWorld\Index.cshtml é criado.

Adicione a seguinte marcação realçada.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Clique com o botão direito do mouse no arquivo index. cshtml e selecione Exibir no navegador.

PI

Você também pode clicar com o botão direito do mouse no arquivo index. cshtml e selecionar Exibir no Inspetor de página. Consulte o tutorial Inspetor de página para obter mais informações.

Como alternativa, execute o aplicativo e navegue até o HelloWorld controlador ( http://localhost:xxxx/HelloWorld ). O Index método em seu controlador não fazia muito trabalho; ele simplesmente executou a instrução return View() , que especificava que o método deveria usar um arquivo de modelo de exibição para renderizar uma resposta ao navegador. Como você não especificou explicitamente o nome do arquivo de modelo de exibição a ser usado, o ASP.NET MVC assume o uso do arquivo de exibição index. cshtml na pasta \Views\HelloWorld A imagem abaixo mostra a cadeia " de caracteres Hello de nosso modelo de exibição! " embutida em código na exibição.

Parece muito bom. No entanto, observe que a barra de título do navegador mostra "índice-meu aplicativo ASP.NET" e o link grande na parte superior da página diz "nome do aplicativo". Dependendo do tamanho em que você fizer a janela do navegador, talvez seja necessário clicar nas três barras no canto superior direito para ver os links de início, sobre, contato, registro e logon .

Alterando exibições e páginas de layout

Primeiro, você deseja alterar o " link do nome do aplicativo " na parte superior da página. Esse texto é comum a cada página. Na verdade, ele é implementado em apenas um local no projeto, mesmo que ele apareça em cada página do aplicativo. Vá para a pasta /views/Shared em Gerenciador de soluções e abra o arquivo * _ layout. cshtml* . Esse arquivo é chamado de página de layout e está na pasta compartilhada que todas as outras páginas usam.

_LayoutCshtml

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. Localize a linha @RenderBody(). 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. Por exemplo, se você selecionar o link about , a exibição Views\Home\About.cshtml será renderizada dentro do RenderBody método.

Altere o conteúdo do elemento de título. Altere o ActionLink no modelo de layout do " nome do aplicativo " para " " o filme do MVC e o controlador de Home para Movies . O arquivo de layout completo é mostrado abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Execute o aplicativo e observe que agora ele diz o " filme do MVC " . Clique no link sobre , e você verá como essa página mostra o " filme do MVC " também. Conseguimos fazer a alteração uma vez no modelo de layout e fazer com que todas as páginas no site reflitam o novo título.

Quando criamos o arquivo Views\HelloWorld\Index.cshtml pela primeira vez, ele continha o seguinte código:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

O código do Razor acima está definindo explicitamente a página de layout. Examine as exibições \ _ViewStart arquivo. cshtml , que contém exatamente a mesma marcação Razor. As exibições \ _ViewStart arquivo. cshtml define o layout comum que todos os modos de exibição usarão, portanto, você pode comentar ou remover esse código do arquivo Views\HelloWorld\Index.cshtml .

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Use a propriedade Layout para definir outra exibição de layout ou defina-a como null para que nenhum arquivo de layout seja usado.

Agora, vamos alterar o título da exibição de índice.

Abra MvcMovie\Views\HelloWorld\Index.cshtml. Há dois locais para fazer uma alteração: primeiro, o texto que aparece no título do navegador e, em seguida, no cabeçalho secundário (o <h2> elemento). Você os tornará ligeiramente diferentes para que possa ver qual parte do código altera qual parte do aplicativo.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

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

Para indicar o título HTML a ser exibido, o código acima define uma Title Propriedade do ViewBag objeto (que está no modelo de exibição index. cshtml ). Observe que o modelo de layout ( Views\Shared \ _Layout. cshtml ) usa esse valor no <title> elemento como parte da <head> seção do HTML que modificamos anteriormente.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Usando essa ViewBag abordagem, você pode facilmente passar outros parâmetros entre o modelo de exibição e o arquivo de layout.

Execute o aplicativo. Observe que o título do navegador, o cabeçalho primário e os títulos secundários foram alterados. (Se as alterações não forem exibidas no navegador, talvez o conteúdo armazenado em cache esteja sendo exibido. Pressione CTRL + F5 em seu navegador para forçar a resposta do servidor a ser carregado.) O título do navegador é criado com o ViewBag.Title que definimos no modelo de exibição index. cshtml e o " aplicativo de filme adicional " adicionado no arquivo de layout.

Observe também como o conteúdo no modelo de exibição index. cshtml foi mesclado com o modelo de exibição * _ layout. cshtml* e uma única resposta HTML foi enviada ao navegador. Os modelos de layout facilitam realmente a realização de alterações que se aplicam a todas as páginas do aplicativo.

Nosso pequeno bit de " dados " (nesse caso, a " saudação do nosso modelo de exibição! " Message) é embutida em código, no entanto. O aplicativo MVC tem uma " V " (exibição) e você tem um " C " (controlador), mas não há " M " (modelo) ainda. Em breve, veremos como criar um banco de dados e recuperar os dados do modelo.

Passando dados do controlador para a exibição

Antes de passarmos para um banco de dados e falarmos sobre modelos, no entanto, vamos falar primeiro sobre como passar informações do controlador para uma exibição. As classes de controlador são invocadas em resposta a uma solicitação de URL de entrada. Uma classe de controlador é onde você escreve o código que manipula as solicitações de entrada do navegador, recupera dados de um banco de dado e, por fim, decide que tipo de resposta enviar de volta ao navegador. Os modelos de exibição podem ser usados de um controlador para gerar e formatar uma resposta HTML para o navegador.

Os controladores são responsáveis por fornecer quaisquer dados ou objetos necessários para que um modelo de exibição processe uma resposta para o navegador. Uma prática recomendada: um modelo de exibição nunca deve executar uma lógica de negócios ou interagir diretamente com um banco de dados. Em vez disso, 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 a limpeza, o teste e a manutenção de seu código.

Atualmente, o Welcome método de ação na HelloWorldController classe usa um name parâmetro e numTimes , em seguida, gera os valores diretamente para o navegador. Em vez de fazer com que o controlador processe essa resposta como uma cadeia de caracteres, vamos alterar o controlador para usar um modelo de exibição. O modelo de exibição gerará uma resposta dinâmica, o que significa que você precisa passar bits de dados apropriados do controlador para a exibição para gerar a resposta. Você pode fazer isso fazendo com que o controlador Coloque os dados dinâmicos (parâmetros) que o modelo de exibição precisa em um ViewBag objeto que o modelo de exibição pode acessar.

Retorne ao arquivo HelloWorldController.cs e altere o Welcome método para adicionar um Message NumTimes valor e ao ViewBag objeto. ViewBag é um objeto dinâmico, o que significa que você pode colocar o que desejar nele; o ViewBag objeto não tem propriedades definidas até que você coloque algo dentro dele. O sistema de associação de modelo MVC do ASP.net mapeia automaticamente os parâmetros nomeados ( name e numTimes ) da cadeia de caracteres de consulta na barra de endereços para parâmetros em seu método. O arquivo HelloWorldController.cs completo tem esta aparência:

using System.Web;
using System.Web.Mvc;

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

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

Agora ViewBag , o objeto contém dados que serão passados para a exibição automaticamente. Em seguida, você precisa de um modelo de exibição de boas-vindas! No menu Compilar , selecione Compilar solução (ou Ctrl + Shift + B) para verificar se o projeto foi compilado. Clique com o botão direito do mouse na pasta Views\HelloWorld e clique em Adicionare, em seguida, clique em exibição MVC 5 página com layout (Razor).

Na caixa de diálogo especificar nome para o item , digite Bem-vindoe clique em OK.

Na caixa de diálogo selecionar uma página de layout , aceite o default ** _ layout. cshtml** e clique em OK.

O arquivo MvcMovie\Views\HelloWorld\Welcome.cshtml é criado.

Substitua a marcação no arquivo Welcome. cshtml . Você criará um loop que diz " Olá " quantas vezes o usuário disser que deveria. O arquivo Welcome. cshtml completo é mostrado abaixo.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

Execute o aplicativo e navegue até a seguinte URL:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Agora, os dados são extraídos da URL e passados para o controlador usando o associador de modelo. O controlador empacota os dados em um ViewBag objeto e passa esse objeto para a exibição. A exibição, em seguida, exibe os dados como HTML para o usuário.

No exemplo acima, usamos um ViewBag objeto para passar dados do controlador para uma exibição. Mais adiante no tutorial, usaremos um modelo de exibição para passar dados de um controlador para uma exibição. A abordagem do modelo de exibição para passar dados é geralmente muito preferida sobre a abordagem do recipiente de exibição. Confira a entrada de blog Dynamic V com rigidez de tipos para obter mais informações.

Bem, esse era um tipo de " M " para modelo, mas não o tipo de banco de dados. Vamos ver o que aprendemos e criar um banco de dados de filmes.