Montando estrutura de um site MVC 2 com Visual Studio .NET 2010

Olá pessoal! Hoje
vou falar sobre como montar e entender o seu primeiro ambiente utilizando o novo
Visual Studio .NET 2010 com MVC. O ambiente WEB funciona muito bem, mas é necessário dar atenção a alguns detalhes.

Referências

• Ferramenta:
  Visual Studio .NET 2010

• Linguagem:
  C#.NET

• Plataforma:
  Web

• Arquitetura:
  MVC

• Framework: 4.0

Todo
o artigo foi testado e a cada exemplo uma figura é mostrada para melhor
entendimento e visualização.

O primeiro passo é criar um projeto do tipo MVC 2,
como mostrado na figura de referência. (Figura 1)

Note
que a figura mostra a seleção em amarelo para o projeto ASP.NET MVC 2 Web Application. Agora dê um nome para o projeto e clique em OK.

Toda
estrutura é montada automaticamente pela ferramenta, facilitando a sua vida como
desenvolvedor WEB. Gostaria de lembrar que, a linguagem é uma opção importante,
C#.NET, VB.NET, F# e C++; qualquer uma dessas opções podem ser escolhidas, agora não importa a linguagem que vai programar, o importante é a solução
criada. As linguagens e projetos podem se comunicar sem qualquer problema.

Estrutura montada

(Figura 2)

Como já foi falado, a estrutura foi montada automaticamente pela ferramenta,
com as pastas e o estilo. Note que existe as pastas: View, Model, Controller e outras. E as mais importantes para fazer o
seu aplicativo funcionar são: View, Model
e Controller tirando os arquivos de configuração.

A
pasta Content  é responsável pelo estilo do site,
imagens e outros arquivos sobre layout. Lógico que a pasta Theme pode ser criada como na ferramenta anterior, Visual Studio
.NET 2008 por exemplo.

A
pasta Script possui todos os scripts
utilizados na aplicação web, estes scripts geralmente são utilizados para
jquery ou funções javascript da tela.

Web.Configs Existentes

Não
posso deixar de falar sobre os arquivos de configuração destinados para
desenvolvimento e produção. Pelo menos é este o nome que dou para o debug e o release que vem na ferramenta. Agora ficou mais fácil colocar uma
string de desenvolvimento e outra do banco de dados de produção.  Expliquei isso em um dos vídeos
postados no site da comunidade ASPNETi.COM. (aspneti.com/videos+0,5.aspx). Qualquer
dúvida, pode recorrer ao link anterior.

Views

Dentro
da pasta View se encontra as páginas
.aspx como as antigas, usando a ferramenta Visual Studio .NET 2008. (Figura 3)

Dentro
de cada pasta, a View é o caminho do
seu projeto. Por exemplo: http://seu_site.com.br/artigo
ou http://seu_site.com.br/home, que busca
diretamente dentro da pasta View e em
seguida procura o arquivo dentro da outra pasta.

Como
exemplo, quero colocar uma página de contato dentro da pasta Home do meu
site. Dessa forma, ficaria assim: http://meu_site.com.br/home/contato
automaticamente a página iria abrir sem qualquer extensão. Vou mostrar como
montar esta página na prática.

Na prática, adicionando View

 O
primeiro passo foi clicar com o botão direito em cima da pasta Home, escolher
Add e depois View. Pois agora o meu trabalho com MVC 2 é sempre com View.
(Figura 4)

Aparece
outra tela para adicionar o nome e escolher o tipo. (Figura 5)

Deixei
selecionado a master page e coloquei o nome no campo (View name) de Contato.
Apenas Contato, automaticamente a extensão do arquivo é colocada, ou seja, o .aspx.

Pronto,
a página Contato.aspx foi criada com sucesso. Agora vá até a aba
Controller e adicione um ActionResult da página. Como falado anteriormente,
adicionei a View (entenda como “página”) dentro da pasta Home. Dessa forma, o arquivo HomeController.cs precisa ser
adicionado um método que chama a View de contato. (Figura 6)

Note
que o último método do arquivo HomeController.cs está escrito.

<br /><br />public ActionResult Contato()<br /><br />{<br /><br />     return View();<br /><br />}

(Code 1)

É
retornado apenas uma View() e o nome dela é o mesmo nome da página criada
dentro da pasta View, lembra? Esse public ActionResult Contato() e esse contato é o nome da página / view criada. 

Até
agora tudo bem, vou colocá-la para ser clicada no menu e visualizada. Acessei a
pasta Views, depois Shared e depois a página Site.Master. Code 2.

          <div id="menucontainer"><br /><br /><br /><br />                <ul id="menu">              <br /><br />                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li><br /><br />                    <li><%: Html.ActionLink("Contato", "Contato", "Home")%></li><br /><br />                    <li><%: Html.ActionLink("About", "About", "Home")%></li><br /><br />                    <li><%: Html.ActionLink("Artigo", "Index", "Artigo")%></li><br /><br />                </ul><br /><br /><br /><br />            </div>

(Code 2)

Adicionei
no segundo <li> um ActionLink para a página contato. O primeiro parâmetro
Contato é o text que vai aparecer na tela. Já o segundo, é o ActionName que no meu caso coloquei Contato. Para finalizar, o terceiro
parâmetro é o RouterValues; ou seja,
o nome da pasta em que a página está localizada. Como falado anteriormente, dentro
da pasta Views / Home /
Contato.aspx. Home é a pasta!

O
passo seguinte foi descrever qualquer coisa dentro da View Contato.aspx e
clicar em F5 para iniciar o projeto. (Figura 7)

Veja
como ficou o endereço em cima do link da página. Não aparece extensão alguma. E
o ActionLink apareceu na parte de menu depois do link Home. O próximo passo é
criar um formulário que manda e-mail dentro da View Contato.aspx.  Só que para
não ficar muito extenso, farei próximo artigo.

Quailquer dúvida, deixe um comentário.

Abraço!