ASP.NET MVC – Início, Meio e Fim – Parte 3

No primeiro artigo desta série, você foi apresentado ao framework ASP.NET MVC e entendeu quais são os aspectos gerais que definem a tecnologia. Em seguida, no segundo artigo, apresentamos um resumo do processo de evolução da tecnologia e entendemos como se dá a separação das responsabilidades e a comunicação entre os controllers, models e views. Caso não tenha efetuado a leitura dos dois artigos iniciais e não possua os conhecimentos equivalentes, recomendo fortemente a leitura antes de prosseguir com este artigo.

Neste artigo, personalizaremos alguns aspectos da aplicação que criamos no artigo anterior (modificar algumas mensagens que estão em inglês) e, em seguida, criaremos nosso primeiro controller, entendendo em detalhes o que este faz e como podemos criar controllers personalizados. Em seguida, a partir do controller criaremos nossa primeira view e exibiremos os valores retornados pelo controller. O objetivo é que, ao final deste artigo, você entenda o que é um controller e uma view e torne-se apto a criá-los de forma personalizada.

Vale lembrar que, ao final deste artigo, estará disponível uma vídeo aula apresentando os conceitos visualizados no artigo.

Personalizando a aplicação

A aplicação que personalizaremos aqui é aquela criada no segundo artigo da série, portanto, é fundamental a leitura do segundo artigo para que possa prosseguir com os exemplos apresentados a seguir.

Como mencionado também no artigo anterior, estamos utilizando para a construção de nossos exemplos, um modelo de aplicação MVC já pronto, disponibilizado pelo Visual Studio 2010. Este modelo já traz a estrutura de diretórios e arquivos base bem definida, portanto, alguns aspectos devem ser personalizados, principalmente sob o aspecto textual, para nos familiarizarmos com a aplicação. A seguir, apresento as páginas e respectivas “customizações”.

As personalizações realizadas serão as seguintes:

Na guia Solution Explorer, expanda a aba no diretório “Views” e, em seguida, expanda o diretório “Shared“. Dê um duplo clique sobre a página “Site.Master”. Nesta página, atualizaremos:

1. A informação contida entre as tag’s “h1”;
2. Persolizaremos os ítens de menu;

Como você pôde perceber, nossa aplicação utiliza o conceito de Master Pages, portanto, as alterações realizadas em “Site.Master” serão refletidas em todas as páginas que herdam suas características. Caso este conceito seja novo para você (conceito de Master Pages), você pode efetuar a leitura do artigo que escrevi aqui no site sobre o assunto. A Listagem 1 apresenta o código do trecho da página “Site.Master” antes da personalização e a Listagem 2 apresenta o código depois da personalização.

[html]
<div id=”header”>
<div id=”title”>
<h1>My MVC Application</h1>
</div>

<div id=”logindisplay”>
<% Html.RenderPartial(“LogOnUserControl”); %>
</div>

<div id=”menucontainer”>

<ul id=”menu”>
<li><%: Html.ActionLink(“Home”, “Index”, “Home”)%></li>
<li><%: Html.ActionLink(“About”, “About”, “Home”)%></li>
</ul>

</div>
</div>
[/html]

Listagem 1: Trecho de código a ser personalizado

[html]
<div id=”header”>
<div id=”title”>
<h1>FabricioSanchez!</h1>
</div>

<div id=”logindisplay”>
<% Html.RenderPartial(“LogOnUserControl”); %>
</div>

<div id=”menucontainer”>

<ul id=”menu”>
<li><%: Html.ActionLink(“Home”, “Index”, “Home”)%></li>
<li><%: Html.ActionLink(“Usuários”, “Index”, “Usuarios”)%></li>
<li><%: Html.ActionLink(“Notícias”, “Index”, “Noticias”)%></li>
</ul>

</div>
</div>
[/html]

Listagem 2: Trecho de código personalizado

Em relação aos códigos apresentados pelas Listagens 1 e 2, os aspectos a serem observados são:

• Listagem 2 – linha 3: O conteúdo foi modificado, de “My MVC Application” para “FabricioSanchez!”;
• Listagem 2 – linhas 13-15: Alterados os ítens de menu. Duas novas opções foram adicionadas as tag’s <li>, “Usuários” e “Notícias”.

Uma observação importante sobre a criação dos novos ítens de menu é a ausência das tag’s <a></a> para vinculação dos link’s. Estas tag’s encontram-se ausentes em função da utilização do helper “Html”. Falaremos especificamente dos helper’s em um artigo futuro desta série, mas apenas para fins de contextualização, o que um helper faz é encapsular uma operação especifica para simplificar o processo de escrita da view. Assim, o helper Html através da função “ActionLink” redireciona a requisição para o controller e action respectiva. A Figura 1 apresenta a aplicação em execução após as alterações realizadas.

Figura 1: Aplicação ASP.NET MVC em execução

Cada um dos novos ítens de menu, representam o set de operações que construiremos neste e nos artigos posteriores. Neste artigo, construiremos exemplos de controller’s e view’s para “Usuários”.

Criando nosso primeiro Controller

Conforme mencionado anteriormente, cada um dos ítens de menu representará um set de operações. Por exemplo, o ítem de menu “Usuários” representa o set de operações possíveis para usuários (cadastrar usuário, editar usuário, remover usuário, listar usuário e demais operações relacionadas a usuários), assim, criaremos um novo controller chamado “Usuarios”, daí vem a parametrização do helper “Html” apresentado na Listagem 2, conforme apresenta o trecho de código da Listagem 3.

[html]
<%: Html.ActionLink(“Usuários”,”Usuarios”,”Home”)%>
[/html]

Listagem 3: Parametrização do método ActionLink do helper Html

O trecho de código apresentado pela Listagem 3 apresenta três parâmetros para o método ActionLink. São eles: “Usuários”, “Usuarios” e “Home”. Como é possível observar, neste caso, os três parâmetros são do tipo string. É importante observar que existem 10 sobrecargas para este método, ou seja, a forma como a função ActionLink está parametrizada na Listagem 3, muito embora seja a comumente encontrada, não é a única.

Vamos então a criação do controller. Para isso, com seu projeto aberto, vá até a Solution Explorer, clique com o botão direito sobre a pasta “Controllers“, “Add…”, “Controller“, conforme ilusta a Figura 2. Ao executar este procedimento, uma nova janela será apresentada para que você então nomeie o controller. O nome deverá ficar “UsuariosController” e você deverá marcar a opção “Add control methods for Create, Update, Delete and Details scenarios“. Uma observação importante é que a framework MVC utiliza a porção “Controller” do nome informado para gerenciar os controllers, portanto, você não deve alterar esta porção, deve ater-se apenas aquela previamente selecionada.

Figura 2: Adicionando um novo controller – Usuarios

Ao marcar a opção “Add control methods for Create, Update, Delete and Details scenarios“, o que você está dizendo a framework é que ela deverá criar um controller com 4 actions básicas: Create, Edit, Delete e Details. Lembrando, actions são as ações para as quais o controller redirecionará a requisição. Se tudo correu bem, uma nova classe deve ter sido criada com o código semelhante ao apresentado pela Listagem 4.

[csharp]
namespace SitePessoalMVC.Controllers
{
public class UsuariosController : Controller
{
//
// GET: /Usuarios/

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

//
// GET: /Usuarios/Details/5

public ActionResult Details(int id)
{
return View();
}

//
// GET: /Usuarios/Create

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

//
// POST: /Usuarios/Create

[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here

return RedirectToAction(“Index”);
}
catch
{
return View();
}
}

//
// GET: /Usuarios/Edit/5

public ActionResult Edit(int id)
{
return View();
}

//
// POST: /Usuarios/Edit/5

[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here

return RedirectToAction(“Index”);
}
catch
{
return View();
}
}

//
// GET: /Usuarios/Delete/5

public ActionResult Delete(int id)
{
return View();
}

//
// POST: /Usuarios/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here

return RedirectToAction(“Index”);
}
catch
{
return View();
}
}
}
}
[/csharp]

Listagem 4: ControllerUsuarios e suas actions

Muito bem, o que fizemos aqui foi adicionar um novo controller a nossa aplicação ASP.NET MVC. Este controller foi nomeado como “Usuarios” e possui (de início) 8 actions. São elas:

• Index(): Action executada por padrão quando o controller é chamado. Neste artigo, iremos realizar operações apenas nesta action. Nos artigos futuros implementaremos as demais actions.
• Details(): Esta action será executada quando uma operação de details for solicitada através da view. Evidentemente que a lógica de exibição da action deve ser implementada pelo desenvolvedor. O que a framework faz é apenas criar a estrutura para que o programador personalize.
• Create() e [HttpPost] Create(): Note que existem duas actions Create. A primeira não possui o atributo [HttpPost], portanto, esta é a responsável por exibir o formulário de cadastro dos dados do usuário. Sua função é unicamente gerar a view de cadastro para o usuário. Já a segunda, acompanha o atributo [HttpPost], portanto, se a primeira exibe a tela de cadastro de usuário, a segunda envia os dados fornecidos para a fonte de dados.
• Edit() e [HttpPost] Edit(): Os conceitos apresentados para Create() são válidos da mesma forma para Edit(), com a diferença de que Create adiciona um novo usuário e Edit() atualiza os dados de um usuário préviamente cadastrado.
• Delete() e [HttpPost] Delete(): Idem aos dois ítens anteriores.

Como neste artigo utilizaremos apenas a action “Index()”, nos ateremos a ela. Nos artigos posteriores, vamos focar as demais actions e, portanto, entraremos em maiores detalhes sobre os parâmetros recebidos por elas, etc.

Listando opções de administração para “Usuários”

Como na primeira parte deste artigo personalizamos nossa aplicação e adicionamos duas novas opções de menu (Usuários e Notícias), precisamos, em primeira instância, exibir as informações disponíveis para aquela opção. Por exemplo, ao usuário clicar em “Usuários”, o que faremos é exibir as informações disponíveis para o gerenciamento de usuários. Ok?

Vá até a action “Index()” e adicione o trecho de código apresentado pela Listagem 5.

[csharp]
public ActionResult Index()
{
Dictionary<string, string> lista = new Dictionary<string, string>();

lista.Add(“Adicionar usuário”, “Create”);
lista.Add(“Editar dados de usuário”, “Edit”);
lista.Add(“Remover usuário”, “Delete”);
lista.Add(“Listar usuários”, “List”);

ViewData[“OpcoesUsuarios”] = lista;

return View();
}
[/csharp]

Listagem 5: Action que exibe opções de gerenciamento de usuários

O código acima é extremamente simples. Basicamente o que fazemos é criar um dicionário de dados (este dicionário contém as opções de gerenciamento de usuários com suas respectivas actions) e passar este dicionário via ViewData para a view Index.

Agora, vamos criar a view que exibirá as opções de gerenciamento de usuários com seus respectivos links. Para isso, vá até a action apresentada na Listagem 5 e dê um clique com o botão direito sobre o nome da action. Em seguida, selecione a opção “Add view…”. A janela que se abre é uma janela de apoio para construção de views. Neste momento, apenas clique em “Add“. Em artigos futuros veremos como utilizar esta janela. A Figura 3 apresenta a janela de configuração das views.

Figura 3: Janela de configuração da view

Para que possamos entender como a framework MVC trata a interatividade entre os módulos, observe a Solution Explorer de seu projeto. Quando maximizada, a pasta Views apresenta uma nova pasta com um novo arquivo ASPX em seu interior, “Index.aspx”, conforme apresenta a Figura 4. Note que este arquivo (esta view) possui o mesmo nome da action, portanto, quando a action retornar valor, este será exibido na view com o nome respectivo.

Figura 4: View criada a partir da action

A seguir, adicione o código apresentado pela Listagem 6 na view recém criada.

[html]
<asp:Content ID=”Content1″ ContentPlaceHolderID=”TitleContent” runat=”server”>
Gerenciamento de Usuários
</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>

<h2>Gerenciamento de Usuários</h2>

<ul>
<% foreach(KeyValuePair<string, string> dados in (Dictionary<string, string>)ViewData[“OpcoesUsuarios”]) { %>
<li>
<%: Html.ActionLink(dados.Key.ToString(), dados.Value.ToString(), “Usuarios”) %>
</li>
<% } %>
</ul>

</asp:Content>
[/html]

Listagem 6: Exibindo os dados retornados pela action

O código da Listagem 6 é simples. Basicamente percorremos o dicionário de dados armazenado em ViewData com foreach e exibimos as informações em forma de lista com a ajuda do helper “Html”. A Figura 4 apresenta o resultado da execução da view.

Figura 4: Aplicação em execução

Bom pessoal, por hora é isso. Espero que este artigo o tenha ajudado a entender como podemos criar controllers e trafegar informações entre os módulos da aplicação.

No próximo artigo, conectaremos nossa aplicação a um banco de dados e faremos as opções de “Create“, “Edit“, “Delete” e “List“. Fique ligado! Até lá!

Não esqueça de deixar seu feedback em relação a este artigo na forma de comentários. Esta ação simples que não demora nem um minuto é de fundamental importância para que possamos saber como está o texto. 🙂

---

Abaixo você pode conferir a vídeo aula complementar ao artigo apresentado anteriormente. Espero que esta possa o ajudar a consolidar os conceitos já apresentados.

[mediaplayer src=’https://www.fabriciosanchez.com.br///site/wp-content/uploads/2010/12/Final_Site.wmv’ ]