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


por Mauricio Junior em 1/1/2011 0

    Olá pessoal, primeiramente desculpe passar algum tempo sem publicar artigo no site. Mas hoje vou falar de como montar e entender o seu primeiro ambiente utilizando o novo Visual Studio .NET 2010 com MVC. O ambiente WEB funciona muito bem e só precisa prestar atenção em alguns detalhes.

Referência:
Ferramenta: Visual Studio .NET 2010
Linguagem: C#.NET
Plataforma: Web
Arquitetura: MVC
Framework: 4.0

    Todo 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)



Referência: Figura 1 (clique na imagem para ampliar)

    Note que a figura 1 mostra a seleção em amarelo para o projeto ASP.NET MVC 2 Web Application. Dê um nome para o projeto e clique no botão 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 pois 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



Referência: Figura 2 (clique na imagem para ampliar)

    Como falado anteriormente, a estrutura foi montada automaticamente pela ferramenta, com as pastas e o estilo. Note que existe a pasta View, Model, Controller e outras. 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.  Eu 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.



Referência: Figura 3 (clique na imagem para ampliar)

    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 busca diretamente dentro da pasta View e em seguida procura o arquivo dentro da outra pasta.

    Como exemplo, eu 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.



Referência: Figura 4 (clique na imagem para ampliar)

    Apareceu outra tela para adicionar o nome e escolher o tipo. Figura 5.



Referência: Figura 5 (clique na imagem para ampliar)

    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 eu preciso ir à aba Controller e adicionar 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)

 

Referência: Figura 6 (clique na imagem para ampliar)

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


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

Referência: 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">
           
                <ul id="menu">             
                    <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%: Html.ActionLink("Contato", "Contato", "Home")%></li>
                    <li><%: Html.ActionLink("About", "About", "Home")%></li>
                    <li><%: Html.ActionLink("Artigo", "Index", "Artigo")%></li>
                </ul>
           
            </div>

Referência: 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. O segundo é o ActionName que no meu caso coloquei Contato. Para finalizar, o terceiro parâmetro é o RouterValues; ou seja, o nome da pasta 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.

 

Referência: Figura 7 (clique na imagem para ampliar)

    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 no outro artigo que publico ainda esta semana.

Abraço a todos e qualquer dúvida, pode entrar em contato.
voltar   comente  subir

 
Mauricio Junior Formado pela Faculdade Anhanguera, Especialista pela FGV (Fundação Getúlio Vargas), Pós-Graduação em Docência Superior e cursando Mestrado na UNB Engenharia Elétrica; .
Tenho 29 anos e possuo sete livros publicados pela editora Ciência Moderna. Sou Certificado Microsoft MCP, MCAD e MVP, faço parte da comunidade ASPNETI.COM, ECODE10.COM, onde publico artigos, vídeos, ebooks e livros Publico artigos, vídeos e podcast em outras comunidades. Trabalho como Analista de Sistemas / Desenvolvedor na empresa ATP S/A. Blog: blog.mauriciojunior.org, Site pessoal www.mauriciojunior.org



Comentários:
Comentado por: Juliano Tiago Rinaldi - 3/1/2011 0:00:00
Muito legal, para eu que sou iniciante em MVC (Só conheço o conceito) ficou muito fácil de iniciar.

Comente (dê sua opinião):
Comentário:
Código Imagem:  (digite o código da imagem respeitando maiúsculo e minúsculo)

Favor digitar o código da imagem para cadastramento.

 

Outros Artigos do Autor

Criptografando Senha
Educação no Brasil
Encontrar o valor no texto
As várias maneiras de mandar e-mail utilizando .NET
URL do WebService Dinâmica
Sistema de Login em ASP – Parte IX (Utilizando três camadas)
ASP.MENU com Compatibilidade
Vídeo - Ler EventLog do Windows usando C#.NET
Vídeo Microsoft Visual SourceSafe Parte III 3/3
Entrevista com Bruno PorKaria
Mais detalhes sobre o HTC Touch HD 2 com o possível Windows Mobile 7
Membership
Você tem boa postura no trabalho?
Trabalhando com Cookie usando Visual Studio.NET 2005 (parte I)
Integração é necessário
Channel9 - Soap, OData, Json
Visual Studio Toolbox Performance
Vídeo sobre banco de dados
Comunicação .NET e VB 6.0 – Parte II - usando Visual Studio.NET 2005
Windows Phone 7 Action Pack - Vídeo Tutorial
Podcast publicado no site
Virtual Earth - Segundo Passo
Windows 7 funciona até no Mac
Sistema iGas - Controle de Gasolina
Microsoft Recite
Programando em Windows Forms e abrindo na web
Transmitir Arquivo com Segurança
Sistema de Login em ASP Utilizando três camadas - Parte VIII
Vídeo - Criando um WebBrowser
Dica para Auto Completar Código
Search do Windows Live em Seu Site
Chama método que está dentro do COM PLUS (COM +)
iMove Developer: chegou para te ajudar
O Avanço do Blu-Ray no Brasil
Tecla ESC - Windows Forms