Adicionar uma Vista (C#)

por Rick Anderson

Observação

Uma versão atualizada deste tutorial está disponível aqui que utiliza ASP.NET MVC 5 e Visual Studio 2013. É mais seguro, muito mais simples de seguir e demonstra mais funcionalidades.

Este tutorial vai ensinar-lhe o básico para construir uma aplicação web ASP.NET MVC usando o Microsoft Visual Web Developer 2010 Express Service Pack 1, que é uma versão gratuita do Microsoft Visual Studio. Antes de começar, certifique-se de que instalou os pré-requisitos listados abaixo. Pode instalá-los todos clicando no seguinte link: Web Platform Installer. Alternativamente, pode instalar individualmente os pré-requisitos usando os seguintes links:

• Pré-requisitos do Visual Studio Web Developer Express SP1
• ASP.NET Atualização das Ferramentas do MVC 3
• SQL Server Compact 4.0 (suporte em tempo de execução + ferramentas)

Se estiver a usar o Visual Studio 2010 em vez do Visual Web Developer 2010, instale os pré-requisitos clicando no seguinte link: Pré-requisitos do Visual Studio 2010.

Um projeto Visual Web Developer com código-fonte C# está disponível para acompanhar este tema. Faça o download da versão em C#. Se preferir Visual Basic, mude para a versão Visual Basic deste tutorial.

Nesta secção, vais modificar a HelloWorldController classe para usar ficheiros de template de visualização e encapsular de forma limpa o processo de geração de respostas HTML para um cliente.

Vais criar um ficheiro modelo de visualização usando o novo motor de visualização Razor introduzido com ASP.NET MVC 3. Os modelos de vista baseados em Razor têm uma extensão de ficheiro .cshtml e fornecem uma forma elegante de criar saída HTML usando C#. O Razor minimiza o número de caracteres e pressionamentos de tecla necessários ao escrever um modelo de visualização, e permite um fluxo de trabalho de codificação rápido e fluido.

Comece por usar um template de visualização com o método Index na classe HelloWorldController. Atualmente, o Index método devolve uma string com uma mensagem que está codificada fixamente na classe controller. Mude o Index método para devolver um View objeto, como mostrado no seguinte:

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

Este código utiliza um modelo de visualização para gerar uma resposta HTML ao navegador. No projeto, adiciona um modelo de vista que possas usar com o Index método. Para isso, clique com o botão direito dentro do Index método e clique em Adicionar Visualização.

A caixa de diálogo Adicionar Vista aparece. Deixa os valores padrão como estão e clica no botão Adicionar :

A pasta MvcMovie\Views\HelloWorld e o ficheiro MvcMovie\Views\HelloWorld\Index.cshtml são criados. Pode vê-los no Explorador de Soluções:

O seguinte mostra o ficheiro Index.cshtml que foi criado:

Adiciona algum HTML por baixo da <h2> etiqueta. O ficheiro modificado MvcMovie\Views\HelloWorld\Index.cshtml é mostrado abaixo.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

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

Executa a aplicação e navega até ao HelloWorld controlador (http://localhost:xxxx/HelloWorld). O Index método no teu controlador não fazia muito trabalho; simplesmente executava a instrução return View(), que especificava que o método deveria usar um ficheiro modelo de vista para renderizar uma resposta ao navegador. Como não especificaste explicitamente o nome do ficheiro modelo de visualização a usar, ASP.NET MVC passou a usar por defeito o ficheiro de visualização Index.cshtml na pasta \Views\HelloWorld . A imagem abaixo mostra a cadeia codificada fixamente na vista.

Parece bastante bom. No entanto, repare que a barra de título do navegador diz "Index" e o título grande na página diz "A Minha Aplicação MVC." Vamos mudar isso.

Mudança de Vistas e Páginas de Layout

Primeiro, quer mudar o título "A Minha Aplicação MVC" no topo da página. Esse texto é comum a todas as páginas. Na verdade, é implementado apenas num local do projeto, embora apareça em todas as páginas da aplicação. Vai à pasta /Views/Shared no Explorador de Soluções e abre o ficheiro _Layout.cshtml . Este ficheiro chama-se página de layout e é o "shell" partilhado que todas as outras páginas usam.

Os modelos de layout permitem-lhe especificar o layout do contentor HTML do seu site num só local e depois aplicá-lo em várias páginas do site. Repare na @RenderBody() linha perto do fundo do ficheiro. RenderBody é um marcador onde aparecem todas as páginas específicas da visualização criadas, "embrulhadas" na página de layout. Mude o cabeçalho do título no modelo de layout de "A Minha Aplicação MVC" para "Aplicação de Filmes MVC".

<div id="title">
      <h1>MVC Movie App</h1>
  </div>

Execute a aplicação e repare que agora diz "MVC Movie App". Clica no link Sobre , e vês como essa página também mostra "MVC Movie App". Conseguimos fazer a alteração uma vez no modelo de layout e todas as páginas do site refletiram o novo título.

O ficheiro completo _Layout.cshtml é mostrado abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>MVC Movie App</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Agora, vamos mudar o título da página do Índice (ver).

Abre MvcMovie\Views\HelloWorld\Index.cshtml. Existem dois locais para fazer uma alteração: primeiro, o texto que aparece no título do navegador, e depois no cabeçalho secundário (o <h2> elemento). Vais torná-los ligeiramente diferentes para poderes ver que parte do código muda em que parte da aplicação.

@{
    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 visualização Index.cshtml ). Se olhar para o código-fonte do modelo de layout, irá notar que o modelo utiliza este valor no elemento <title> como parte da seção <head> do HTML. Usando esta abordagem, pode facilmente passar outros parâmetros entre o seu modelo de visualização e o seu ficheiro de layout.

Execute a aplicação e navegue até http://localhost:xx/HelloWorld. Note que o título do navegador, o cabeçalho principal e os títulos secundários mudaram. (Se não vires alterações no navegador, podes estar a ver conteúdo em cache. Pressione Ctrl+F5 no seu navegador para forçar o carregamento da resposta do servidor.)

Repare também como o conteúdo do modelo de vista Index.cshtml foi fundido com o modelo de visualização _Layout.cshtml e uma única resposta HTML foi enviada ao navegador. Os modelos de layout facilitam muito a realização de alterações que se aplicam a todas as páginas da sua aplicação.

O nosso pequeno pedaço de "dados" (neste caso, a mensagem "Olá do nosso Modelo de Visualização!") é codificado fixamente, no entanto. A aplicação MVC tem um "V" (vista) e tens um "C" (controlador), mas ainda não tem um "M" (modelo). Em breve, vamos explicar como criar uma base de dados e recuperar dados de modelos a partir dela.

Passando dados do controlador para a exibição

Antes de irmos a uma base de dados e falar sobre modelos, vamos primeiro falar sobre passar informação do controlador para uma vista. As classes de controlador são invocadas em resposta a um pedido de URL recebido. Uma classe controlador é onde escreves o código que gere os parâmetros recebidos, recupera dados de uma base de dados e, em última análise, decide que tipo de resposta enviar de volta ao navegador. Os templates de vista podem então 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 quaisquer dados ou objetos necessários para que um modelo de visualização possa apresentar uma resposta ao navegador. Um modelo de vista nunca deve executar lógica de negócio nem interagir diretamente com uma base de dados. Em vez disso, deve funcionar apenas com os dados fornecidos pelo controlador. Manter esta "separação de preocupações" ajuda a manter o seu código limpo e mais fácil de manter.

Atualmente, o Welcome método de ação na HelloWorldController classe recebe um name e um numTimes parâmetro e depois envia os valores diretamente para o navegador. Em vez de fazer com que o controlador renderize esta resposta como uma string, vamos alterar o controlador para usar um modelo de vista. O modelo de visualização gera uma resposta dinâmica, o que significa que precisa de passar segmentos apropriados de dados do controlador para a visualização para gerar a resposta. Podes fazer isto fazendo com que o controlador coloque os dados dinâmicos que o template de vista precisa num ViewBag objeto que o template de vista possa então aceder.

Volte ao ficheiro HelloWorldController.cs e altere o Welcome método para adicionar um Message valor e NumTimes ao ViewBag objeto. ViewBag é um objeto dinâmico, o que significa que podes colocar o que quiseres nele; O ViewBag objeto não tem propriedades definidas até colocares algo dentro dele. O ficheiro completo de HelloWorldController.cs é assim:

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 o ViewBag objeto contém dados que serão automaticamente passados para a vista.

A seguir, precisa de um modelo de visualização de boas-vindas! No menu Debug , selecione Construir MvcMovie para garantir que o projeto está compilado.

Depois clica com o botão direito dentro do Welcome método e clica em Adicionar Vista. Aqui está como é a caixa de diálogo Adicionar Vista :

Clique em Adicionar e depois adicione o seguinte código sob o <h2> elemento no novo ficheiro Welcome.cshtml . Vais criar um loop que diz "Olá" tantas vezes quanto o utilizador disser que deve. O ficheiro completo Welcome.cshtml é mostrado abaixo.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

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

Execute a aplicação e navegue até ao seguinte URL:

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

Agora, os dados são retirados da URL e passados automaticamente para o controlador. O controlador empacota os dados num ViewBag objeto e passa esse objeto para a vista. A visualização apresenta então os dados como HTML ao utilizador.

Bem, isso era uma espécie de "M" para modelo, mas não do tipo usado em bases de dados. Vamos pegar no que aprendemos e criar uma base de dados de filmes.