Tutorial ASP.NET MVC 4 - Parte 3 - Forms e Views

Na Parte 2 vimos as Views, são com elas que criamos a interface gráfica com HTML. Além disso, é através das Views que criamos os formulários onde os usuários enviam os dados para aplicação Web.
Antes de criamos nosso formulário, um detalhe importante. Toda solicitação (Request) que fazemos a aplicação web seguem uma forma de envio (Request Methods). Os métodos mais comumente utilizados são GET e POST, basicamente quando acessamos alguma página (solicitamos recursos) digitando a URL dela na barra de endereços, fazemos um Request via GET, quando enviamos um formulário (enviamos recursos) fazemos um Request via POST.
Então quando submetemos um formulário estamos enviando dados para aplicação web processar. Para demonstrarmos esse fluxo, vamos criar novo Controller. Para ver como criar um novo Controller veja a primeira parte desse tutorial aqui.
Crie um Controller Empty com o nome de Cliente, assim que você criar o novo Controller ele terá essa estrutura:

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

namespace TutorialMVC.Controllers
{
    public class ClienteController : Controller
    {
        //
        // GET: /Cliente/

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

    }
}

Apague a Action padrão e cria uma Action chamada Cadastrar, seu Controller ficará assim:

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

namespace TutorialMVC.Controllers
{
    public class ClienteController : Controller
    {
        public ActionResult Cadastrar()
        {
            return View();
        }
    }
}

Lembra da relação Controller/Pasta, Action/View? Você pode criar uma pasta com o mesmo nome do Controller e uma View com o mesmo nome da Action na mão, ou seguir essa dica aqui:

1. Botão direito no nome da Action, vai abrir esse menu:
   
2. Clique em Add View, esse wizard aqui será aberto. Simplesmente clique em Add.
   

Perceba que o wizard é aberto já com o nome da Action, e quando você clica em Add e cria a pasta Cliente e colocar a View Cadastrar no lugar certo. A estrutura do seu projeto estará a assim.

Agora sim, vamos escrever nosso formulário. Nesse formulário de cadastro do cliente, vamos ter apenas dois campos Nome e CPF. Não vamos nos preocupar com validação nesse momento, apenar obter o valor digitado no formulário no Controller. Nosso formulário deve ficar assim:

@{
    ViewBag.Title = "Cadastrar";
}

<h2>@ViewBag.Title</h2>
<form action="/Cliente/Cadastrar" method="post">
<label>Nome:</label>
    <input name="Nome" type="text" />

    <label>CPF:</label>
    <input name="CPF" type="text" />

    <button>Enviar</button>

</form>

Repare nas propriedade que definimos no formulário. A propriedade action indica para onde vamos enviar os dados do formulário e a propriedade method como vamos enviar. Só tem um detalhe, todas Actions de qualquer Controller é por padrão uma Action que atende solicitações (Request) do tipo GET. Para conseguirmos capturar uma solicitação enviada via POST, precisamos criar uma nova Action para isso.
Ah! IMPORTANTE, eu não marquei a propriedade name dos inputs de azul por acaso, depois de modificarmos o Controller eu explico isso. Seu Controller depois alterado ficará assim.

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

namespace TutorialMVC.Controllers
{
    public class ClienteController : Controller
    {
        public ActionResult Cadastrar()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Cadastrar(String Nome, String CPF)
        {
            return View();
        }
    }
}

Criamos a Action Cadastrar e veja que ela está configurada (decorada/ anotada) para atender Requests do tipo POST. Além disso ela tem dois parâmetros, que não por acaso tem os mesmos nomes que as propriedades name lá do formulário da View Cadastrar. Quando submetermos o formulário o ASP.NET MVC fará o favor de relacionar os dois pontos (input/parâmetro) justamente por terem o mesmo nome. Vamos fazer o seguinte, coloque um Breakpoint como indicado na imagem abaixo:

Para colocar um Breakpoint, clique na barra cinza. :D

Após fazer isso execute sua aplicação, por padrão ela abrirá a Home/Index, então você deve digitar: http://localhost:4537/Cliente/Cadastrar.

Tá feio, mas tá valendo.

Ele não parou no Breakpoint porque ele passou pela Action Cadastrar do GET. Agora preencha os campos do formulário e clique em Enviar.

Há!

Quando você submeteu o formulário o Breakpoint foi ativado, pois você fez o um Request via POST, para você ver os valores dos parâmetros coloque o cursor do mouse sobre eles e observe que é o mesmo valor que você digitou no formulário. Se isso não aconteceu reveja a propriedade name dos inputs do formulário e o nome dos parâmetros da Action Cadastrar, eles TEM que ser iguais. Depois que você verificou os valores é só apertar F5 para liberar o Breakpoint. Legal, né? Existem outras formas de se obter os valores do formulário.
Por exemplo, altere a Action Cadastrar como está abaixo, coloque o Breakpoint no "return View();" e execute a aplicação novamente.

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

namespace TutorialMVC.Controllers
{
    public class ClienteController : Controller
    {
        public ActionResult Cadastrar()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Cadastrar(FormCollection form)
        {
            String nome = form["Nome"];
            String CPF = form["CPF"];

            return View();
        }
    }
}

Porém vou te dizer uma coisa, nenhuma dessa duas formas é a melhor maneira de se obter dados dos formulários. Pô Achilles, está fazendo eu perder meu tempo aqui? Não, de forma nenhuma. Essa parte do tutorial foi essencial para você entender a relação entre as Actions e os tipos de Request (GET e POST) e a relação dos names dos inputs com os parâmetros da Action.

Então o que vimos até aqui?

• Podemos escrever formulários nas Views para obter dados dos usuários
• Existem Requests do tipo GET e POST
• Requests GET solicitam recursos (no nosso caso, telas)
• Resquest POST enviam recursos (dados)
• Devemos ter uma Action para tratar cada um dos Requests
• Para obtermos os dados dos formulários, devemos nomear os parâmetros da Action e a propriedade name do input com mesmo nome.

Você pode ter imaginado que Nome e CPF bem que poderia ser as propriedades de uma Classe chamada Cliente, não é? Então, isso será o assunto da próxima parte Models. Não percam! Aqui o link: http://alemdolaboratorio.blogspot.com.br/2014/05/tutorial-aspnet-mvc-4-parte-4-models.html