Tutorial ASP.NET MVC 4 - Parte 2 - Views

Como prometido, vamos começar a criar nossas telas! Antes só precisamos uma entender uma coisa.
A convenção de nomenclatura, nós vimos Parte 1 que os Controllers PRECISAM terminar com o nome Controller, como por exemplo HomeController. Vamos relembrar aqui:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TutorialMVC.Controllers
{
    public class HomeController : Controller
    {

        public String Index(String nome, String sobrenome)
        {
            return "Olá :" + nome + " " + sobrenome;
        }

        public String Visualizar(String termoDePesquisa)
        {
            return "Você pesquisou por: " + termoDePesquisa;
        }

    }
}

Para as Views o ASP.NET MVC também segue um padrão. Normalmente as Views tem o mesmo nome da Action, então se temos a Action Index, vamos criar a View Index.
Só um detalhe, já que nossa Action Index do HomeController não retornará mais uma simples string e sim uma página HTML precisamos fazer uma alteração nele, assim:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TutorialMVC.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index(String nome, String sobrenome)
        {
            return View();
        }

        public String Visualizar(String termoDePesquisa)
        {
            return "Você pesquisou por: " + termoDePesquisa;
        }

    }
}

Existem vários retornos que pode podemos usar, mas aqui nesse tutorial vamos ficar com o ActionResult mesmo. Bom, feito isso, vem a segunda parte da convenção que é criar dentro da pasta Views uma pasta com o mesmo nome do Controller ignorando o sufixo Controller. Então vamos criar uma pasta chamada Home dentro da pasta Views.

1. Botão direito na pasta Views -> Add -> Folder
   
2. Depois que você criar a pasta a estrutura deve ficar assim. Note que agora temos a pasta Home, assim como temos o Controller chamado Home, dessa forma estamos dizendo "Ei MVC, você encontrará as Views do Controller Home nessa pasta aqui." 
   
3.  Então agora vamos criar a View propriamente dita. Botão direito em cima da pasta Home -> Add -> View.
   
4. No janela seguinte nomei sua View com Index, e clique em Add. Não se preocupe com o restante das opções nesse momento.
   
5. Então agora temos o Controller Home, e View Index dessa forma.
   

Dessa forma temos a relação Controller <-> Pasta e Action <-> View, captou a ideia? Ah! Sua View foi criada com a seguinte estrutura.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

Nesse momento aqui temos nosso primeiro contato com chamado Razor (engine de processamento das Views [arquivos *.cshtml]), mas não vou entrar  em detalhes sobre ele agora. Vamos alterar a View, apague todo o conteúdo dela e deixe assim:

<h1>Hello World View!</h1>

Agora salve tudo e rode a aplicação.

Tá dáááá!

Através das Views construímos interfaces com HTML, CSS e Javascript. Isso será cena dos próximos capítulos. Por enquanto vamos lembrar que estávamos recebendo parâmetros via QueryString e exibindo na tela através de um texto simples. Vamos agora fazer com que aqueles parâmetros sejam exibidos pela view Index.
Para isso precisamos fazer uso de um artifício chamado ViewBag, com a ViewBag conseguimos passar valores da Action para View. Primeiro altere a Action Index desse jeito:

public class HomeController : Controller
    {

        public ActionResult Index(String nome, String sobrenome)
        {
            ViewBag.Nome = nome;
            ViewBag.Sobrenome = sobrenome;

            return View();
        }

        public String Visualizar(String termoDePesquisa)
        {
            return "Você pesquisou por: " + termoDePesquisa;
        }

    }

A ViewBag é um objeto dinâmico, então você não precisa ter declarado as propriedades Nome e Sobrenome para atribuir valores a elas. Agora vamos alterar a View Index (o arquivo Index.cshtml) dessa forma:

<h1>Hello World View!</h1>

<p>Seu nome é: @ViewBag.Nome @ViewBag.Sobrenome</p>

Veja como podemos misturar código HTML, texto fixo com a ViewBag através do caractere "@". Com o arrouba você diz para o Razor: "Ei, isso vc deve processar, ignore o restante pois é texto ou HTML.".
Vamos ver isso em ação, rode a aplicação e digite http://localhost:4537/?nome=Achilles&sobrenome=Froes

:D

Note que a engine Razor é esperta o suficiente até para interpretar corretamente o espaço em branco entre @ViewBag.Nome @ViewBag.Sobrenome. Vamos ver o que Razor pode fazer por nós. Altere a View Index adicionando essas linhas:

<h1>Hello World View!</h1>

<p>Seu nome é: @ViewBag.Nome @ViewBag.Sobrenome</p>

<ul>
@for (int i = 0; i < 5; i++)
{
    <li>Esse é o @i dessa iteração</li>
}
</ul>

Olha o resultado:

Isto é incrível #leiacomavozdosilvosantos

"Ei, aquele é igual ao for que faço com C#", você ter se pensado. Pois é, aquele É O FOR do C#. Essa é a grande sacada do Razor, poder misturar texto, HTML e código C#, identificando o código C# através do @. Vamos fazer mais um teste alterando a View Index dessa forma:

<h1>Hello World View!</h1>

<p>Seu nome é: @ViewBag.Nome @ViewBag.Sobrenome</p>

<ul>
@for (int i = 0; i < 5; i++)
{
    <li>Esse é o @i dessa iteração</li>
}
</ul>

@{
    int soma = 0;

    soma = 5 + 5;
 }

@soma

Dessa vez temos o seguinte resultado:

Legal né? Só tome cuidado para não sair escrevendo lógica da aplicação nas Views. Não é porque é possível escrever C# nas Views que vamos escreve nosso código nelas. A ideia é poder usar C# nas Views para torná-las dinâmicas, como acessar as  propriedades dinâmicas da ViewBag.

Dessa vez vamos ficar por aqui. Resumindo o que temos até agora:

• Sabemos que criar um Controller.
• Sabemos que as Views criam a interface com HTML.
• O Controller tem uma pasta com nome dele dentro da pasta Views.
• Lá estão as Views (arquivos .cshtml) com o nome da Action.
• Podemos passar valores da Action do Contoller para sua View correspondente através da ViewBag.
• As Views são processadas pelo Razor (engine) permitindo que se misture HTML com C# para criar páginas dinâmicas.

Na próxima parte vamos criar um formulário e enviar os dados para o Controller. Assim conseguiremos obter os dados digitados pelo usuário na tela. Aqui segue o link: http://alemdolaboratorio.blogspot.com.br/2014/05/tutorial-aspnet-mvc-4-parte-3-forms-e.html

Caso tenha ficado alguma dúvida deixe um comentário.

Espero que você tenha gostado e continue a me acompanhar aqui pelo Além do Laboratório.