<< Anterior
Adicionando uma View
Neste tutorial você irá modificar a classe
Você criará um arquivo do modelo view utilizando o Razor View Engine introduzido com o ASP.NET MVC 3. O modelo baseado no Razor view tem a extensão do arquivo como .cshtml, e provê uma maneira elegante para criar saída HTML utilizando o C#. Razor minimiza o número de caracteres e o número de digitação requeridos quando se está construindo um template view, e habilita um fluxo de trabalho de codificação rápido e com fluidez.
Inicie utilizando um template com o método
Este código utiliza o modelo View para gerar uma resposta HTML para o navegador. No projeto, adicione um modelo View que você pode utilizar com o método
A caixa de diálogo Add View aparecerá. Deixe as seleções padrões da maneira que estão e clique no botão Add.
A pasta MvcMovie\Views\HelloWorld e o arquivo MvcMovie\Views\HelloWorld\Index.cshtml são criados. Você pode vê-los no Solution Explorer.
A seguir é exibido o arquivo Index.cshtml que foi criado:
Adicione algum código HTML como a tag <h2>. A modificação do arquivo MvcMovie\Views\HelloWorld\Index.cshtml é mostrado a seguir:
Execute a aplicação e navegue para o controller
Parece muito bom. No entanto, observe que a barra de título do navegador exibe "Index" e o grande título na página exibe "My MVC Application". Vamos alterar isto.
O modelo de layout permite que você o conteúdo HTML do layout do seu site em um lugar e então ele é aplicado através de múltiplas páginas no seu site. Observe a linha
O arquivo _Layout.cshtml completo é exibido abaixo:
Agora, vamos alterar o título da página principal (view)
Abra o arquivo MvcMovie\Views\HelloWorld.cshtml. Existem dois locais para fazer a alteração: primeiro, o texto que aparece no título do navegador, e então o cabeçalho secundário (a tag <h2>). Você vai torná-los um pouco diferente, assim você poderá ver em qual pedaço do código alterado como parte da aplicação.
Para indicar o título HTML para exibir, o código acima define uma propriedade
Execute a aplicação e navegue para http://localhost:xxxx/HelloWorld. Note que o título do navegador, o primeiro e o segundo cabeçalho foram alterados. (Se você não viu as alterações no browser, você pode estar vendo o conteúdo do cache do navegador. Pressione CTRL + F5 no seu navegador para forçar a resposta do servidor para ser carregada.)
Note também como o conteúdo do modelo view index.cshtml foi fundido com o modelo view _Layout.cshtml e uma simples resposta HTML foi enviada para o navegador. Modelos de layout fazem isso realmente fácil, para fazer mudanças que serão aplicadas dentro de todas as páginas na sua aplicação.
Embora nossa pequena parte de "dados" (Neste caso a mensagem "Hello from our View Template!") seja hard-coded. A aplicação MVC tem um "V" (View) e também um "C" (Controller), mas não um "M" (Model) ainda. Logo, nós iremos aprender como criar um banco de dados e recuperar dados da camada Model.
Então clique com o botão direito dentro do método Welcome e clique em Add View. Aqui está o que a caixa de diálogo Add View mostrará:
Clique em Add, e então adicione o seguinte código abaixo da tag
Execute a aplicação e navegue para a seguinte URL:
http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4
Agora o dado é recuperado da URL e passado para o controller automaticamente. O controller empacota o dado dentro do objeto ViewBag e passa o objeto para a view. O view então exibe o dado como código HTML para o usuário.
Bem, esse foi um tipo de "M" para model, mas não um tipo de banco de dados. Vamos usar o que aprendemos e criar um banco de dados de filmes.
HelloWorldController para utilizar o arquivo modelo View para limpar o encapsulamento do processo de geração de resposta HTML para o cliente.Você criará um arquivo do modelo view utilizando o Razor View Engine introduzido com o ASP.NET MVC 3. O modelo baseado no Razor view tem a extensão do arquivo como .cshtml, e provê uma maneira elegante para criar saída HTML utilizando o C#. Razor minimiza o número de caracteres e o número de digitação requeridos quando se está construindo um template view, e habilita um fluxo de trabalho de codificação rápido e com fluidez.
Inicie utilizando um template com o método
Index na classe HelloWorldController. Atualmente o método Index retorna uma string com uma mensagem que é hard-coded na classe controller. Altere o método Index para retornar um objeto View, como mostrado a seguir:public ActionResult Index() { return View(); }
Este código utiliza o modelo View para gerar uma resposta HTML para o navegador. No projeto, adicione um modelo View que você pode utilizar com o método
Index. Para fazer isto, clique com o botão direito dentro do método Index e clique em Add View.A caixa de diálogo Add View aparecerá. Deixe as seleções padrões da maneira que estão e clique no botão Add.
A pasta MvcMovie\Views\HelloWorld e o arquivo MvcMovie\Views\HelloWorld\Index.cshtml são criados. Você pode vê-los no Solution Explorer.
A seguir é exibido o arquivo Index.cshtml que foi criado:
Adicione algum código HTML como a tag <h2>. A modificação do arquivo MvcMovie\Views\HelloWorld\Index.cshtml é mostrado a seguir:
@{ ViewBag.Title = "Index"; } <h2>Index</h2> <p>Hello from our View Template!</p>
Execute a aplicação e navegue para o controller
HelloWorld (http://localhost:xxxx/HelloWorld). O método Index no seu controller não faz muita coisa; ele simplesmente executa a declaração return View(), o qual específica que o método deverá usar um arquivo do modelo view para transmitir uma resposta para o navegador. Como você não especificou o nome do arquivo modelo view a ser usado, ASP.NET MVC por padrão utiliza o arquivo view Index.cshtml na pasta \Views\HelloWorld. A imagem abaixo exibe a string hard-coded no view.
Parece muito bom. No entanto, observe que a barra de título do navegador exibe "Index" e o grande título na página exibe "My MVC Application". Vamos alterar isto.
Alterando Views e a exibição da página
Primeiro, você procure alterar o título "My MVC Application" no topo da página. Aquele texto é comum para todas as páginas. Atualmente ele é implementado somente em um lugar no projeto, apesar de aparecer em todas as páginas na aplicação. Vá para o diretório \Views\Shared na Solution Explorer e abra o arquivo _Layout.cshtml. Este arquivo é chamado por uma página de exibição e ele compartilha o conteúdo que outras páginas utilizam.
O modelo de layout permite que você o conteúdo HTML do layout do seu site em um lugar e então ele é aplicado através de múltiplas páginas no seu site. Observe a linha
@RenderBody() próximo à parte de baixo do arquivo. RenderBody é um placeholder onde todas as especificações visuais da página que você criou são mostradas, "dentro" do layout da página. Altere o título do cabeçalho no modelo do layout de "My MVC Application" para "MVC Movie App".<div id="title"> <h1>MVC Movie App</h1> </div>Execute a aplicação novamente e note que agora é exibido "MVC Movie App". Clique no link About, e veja como está página também exibe "MVC Movie App" também. Fomos capazes de alterar o layout do site em um único lugar e ter o novo título refletido em todo o site.
O arquivo _Layout.cshtml completo é exibido 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 alterar o título da página principal (view)
Abra o arquivo MvcMovie\Views\HelloWorld.cshtml. Existem dois locais para fazer a alteração: primeiro, o texto que aparece no título do navegador, e então o cabeçalho secundário (a tag <h2>). Você vai torná-los um pouco diferente, assim você poderá ver em qual pedaço do código alterado como 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 para exibir, o código acima define uma propriedade
Title do objeto ViewBag (o qual está no modelo view index.cshtm). Se você olhar o fonte do código anterior do modelo do layout, você notará que o modelo utiliza este valor no elemento <title> como parte da seção <head> do HTML. Usando esta abordagem você pode facilmente passar outros parâmetros entre seus modelos view e seu arquivo de layout.Execute a aplicação e navegue para http://localhost:xxxx/HelloWorld. Note que o título do navegador, o primeiro e o segundo cabeçalho foram alterados. (Se você não viu as alterações no browser, você pode estar vendo o conteúdo do cache do navegador. Pressione CTRL + F5 no seu navegador para forçar a resposta do servidor para ser carregada.)
Note também como o conteúdo do modelo view index.cshtml foi fundido com o modelo view _Layout.cshtml e uma simples resposta HTML foi enviada para o navegador. Modelos de layout fazem isso realmente fácil, para fazer mudanças que serão aplicadas dentro de todas as páginas na sua aplicação.
Embora nossa pequena parte de "dados" (Neste caso a mensagem "Hello from our View Template!") seja hard-coded. A aplicação MVC tem um "V" (View) e também um "C" (Controller), mas não um "M" (Model) ainda. Logo, nós iremos aprender como criar um banco de dados e recuperar dados da camada Model.
Passando Dados do Controller para o View
Antes de ir para um banco de dados e falar sobre modelos, vamos primeiramente falar sobre a passagem de informação de um controller para um view. Classes controller são invocadas em resposta à solicitações de requisições de URL. Uma classe controller é onde você escreve o código que manipulará a entrada de parâmetros, recuperando dados de um banco, e por último, decidindo qual tipo de resposta será enviada de volta para o navegador. Modelos View podem então serem usados de um controller para gerar e formatar uma resposta HTML para o navegador.
Controller são responsáveis por prover tudo o que dados ou objetos estão requisitando na ordem para um modelo view para fazer uma resposta para o navegador. Um modelo view nunca poderá realizar a lógica de negócios ou interagi com um banco de dados diretamente. Em vez disso, deverá trabalhar somente com os dados que são providos para ele pelo controller. A manutenção deste "conceito de separação" ajuda a manter seu código limpo e mais fácil para dar manutenção.
Atualmente o método de ação Welcome na classe HelloWorldController recebe com parâmetro name e numTimes e então os valores são exibidos diretamente para o browser. Ao invés do controller ter de retornar esta resposta como uma string, em vez disso, vamos alterar o controller para usar um modelo view. O modelo view irá gerar uma resposta dinamicamente, o que significa que você precisa passar pedaços apropriados de dados do controller para a view na ordem de geração da resposta. Você pode realizar isso fazendo com que o controller coloque os dados dinâmicos que o modelo view precisa em um objeto
ViewBag que o modelo view pode acessar.
Retorne para o arquivo HelloWorldController.cs e altere o método Welcome para adicionar os valores de Message e NumTimes para o objeto ViewBag. ViewBag é um objeto dinâmico, o que significa que você pode colocar o que quiser dentro dele; o objeto ViewBag tem propriedades não definidas até você colocar algo dentro delas. O arquivo completo HelloWorldController.cs ficará como este:
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 objeto ViewBag contém dados que serão passados para a view automaticamente.
Em seguida, você precisa de um modelo view de boas vindas. No menu Debug, selecione Build MvcMovie para ter certeza que o projeto foi compilado.
Clique em Add, e então adicione o seguinte código abaixo da tag
<h2> no novo arquivo Welcome.cshtml. Você vai criar um loop que diz "Hello" quantas vezes o usuário solicitar. O arquivo completo Welcome.cshtml é exibido 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 para a seguinte URL:
http://localhost:xxxx/HelloWorld/Welcome?name=Scott&numtimes=4
Agora o dado é recuperado da URL e passado para o controller automaticamente. O controller empacota o dado dentro do objeto ViewBag e passa o objeto para a view. O view então exibe o dado como código HTML para o usuário.
Bem, esse foi um tipo de "M" para model, mas não um tipo de banco de dados. Vamos usar o que aprendemos e criar um banco de dados de filmes.
Excelente esse BLOG.. Parabéns..
ResponderExcluirEstou vindo do Webforms e não conseguia entender como MVC funcionava corretamente, qual era a diferença entre eles.
Tenha certeza que me ajudou muito..
[]s Raphael
Muito bom, vale conferir.
ResponderExcluir