Primeiros passos no Asp.Net MVC    

Olá pessoal, depois de uma pequena série preparando o terreno para começar a falar de Asp.Net MVC, finalmente chegou o momento de falar dessa forma de desenvolver Web.

Vou tentar fazer vários pequenos posts sobre este assunto, e hoje será um bem introdutório, tentando falar um pouco da estrutura do MVC, para que quem nunca criou um novo projeto desse tipo possa ir se habituando. Falarei a principio falarei de Asp.Net MVC 2, porém, conforme for se tornando conveniente, falarei das novas funcionalidades do Asp.Net MVC 3, que já está com a segunda Release Candidate publicada.

Então vamos lá!

Criando um Projeto MVC

Da mesma forma que você cria um projeto WebForm, para criar um MVC você deve ir até o Visual Studio, e seguir os procedimentos padrões, apenas escolhendo o tipo certo de site (Clique nas imagens para ampliar):

image

Quando criamos um projeto Asp.Net MVC, percebemos que uma estrutura bem maior do que a de um WebForm é criada, com diversas pastas e subpastas, como mostrado na imagem abaixo:

image

Vamos explicar um pouco sobre isso. Toda aplicação Web tende a ficar extensa, com inúmeros arquivos. No caso do WebForm, você pode organizar isso da forma que achar melhor, criando vários níveis de pastas e sub-pastas. No MVC, isso é um pouco diferente. Com MVC a Microsoft decidiu trabalhar seguindo convenções, e isso é levado a sério ao desenvolver sites MVC. No caso das pastas, a MS convencionou que deveria existir uma pasta com cada tipo de arquivo, que são: Modelos, Visões e Controladores (Model, View, Controllers – MVC). Existem outras pastas, mas o conteúdo delas é também comum ao WebForms, como Scripts e Content.

Lembre-se: Convenção é um termo que você ouvirá muito no mundo MVC.

É possível mudar essa convenção? Sim, mas nem sempre é interessante, na realidade isso será tema de algum próximo post.

Mas de forma geral, os Controllers você pode colocar em qualquer lugar no projeto que ele será encontrado, os Models (os dados da aplicação) também podem está em qualquer lugar, principalmente em outro projeto, como é comum, apenas as Views que, normalmente, você não trocar de lugar, as view sempre estão na seguinte estrutura de pasta: View/{NomeDoController}/{AçãoDoControle}. O que fugir muito dessa estrutura não será encontrado pela engine de View do MVC. E ai está o ponto, se você realmente quiser mudar essa estrutura, você terá que customizar a ViewEngine do Asp.Net MVC (assunto para outro post).

Ainda existe outra pequena forma de mudar a estrutura de pastas, também tema para um post, que a nova funcionalidade, adicionada a partir do MVC 2, que são as Areas, que resumidamente é uma forma de você agrupar “por funcionalidade” a estrutura de pastas Controllers, Models e Views, ou seja, replicando para cada grupo de Controladores, toda a estrutura padrão de pastas.

Agora que vimos um pouco cada pasta da estrutura do MVC, vamos entender no que consiste cada item do padrão Model View Controller na implementação do Asp.Net MVC.

Controller

O Controller no Asp.Net MVC é representado por uma classe que herda da classe System.Web.Mvc.Controller, é o Controller que é a base do endereço que digitamos na URL, e ele que sabe como deve ser a View que deve ser retornada. Um Controller pode retornar várias Views, de acordo com a Ação (Action) definida.

Action são os métodos do Controller que executam alguma ação e retornam uma View específica, utilizando um Modelo (Model) ou não.

Por exemplo, quando criamos um novo projeto, o Visual Studio cria dois Controllers: Home e Account. O Controller Home tem duas Actions, como mostrado abaixo:

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

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

Cada Action tem uma View relacionada na pasta View/Home, como pode ser visualizado no print abaixo:

image

Não precisa ser sempre assim. Lembre que uma View pode ser qualquer coisa que retorne para um usuário, portanto, pode ser texto simples, arquivo, JSON, comando para o browser redirecionar, enfim, qualquer coisa coisa que pode ser retornada para o Browser. Para deixar isso claro, vamos criar um novo Controller, da seguinte forma:

Clique na pasta Controller –> Add-> Controller e dê o nome de PrimeiroController, conforme prints abaixo:

image

image

Perceba que temos outra Convenção ao criar um controller: Todos devem ter o sufixo Controller, como os atributos devem ter o sufixo Attribute.

Quando criamos um Controller é criado uma Action padrão chamada Index, que é invocado toda vez que não definimos qual ação chamar, então vamos alterar a implementação padrão do método/action Index, para ficar como a seguinte:

public class PrimeiroController : Controller
    {
        //
        // GET: /Primeiro/

        public string Index()
        {
            return "Primeira página!";
        }

    }

Dando F5, vamos digitar /Primeiro após o nome do seu site no endereço e receberemos o retorno de nossa Action Index no Controller Primeiro da seguinte forma (Perceba que não precisamos digitar o sufixo Controller):

image

Neste casso, o controller está retornando todo o conteúdo HTML, que é a nossa View, vamos criar mais uma Action para ver que podemos chamar mais de uma Action dentro de um Controller e ter Views diferentes. Abaixo segue o código da Action, e o endereço http://localhost:50413/Primeiro/BemVindo digitado no endereço IE. Perceba que você pode colocar qualquer código HTML no retorno da View, e neste caso precisamos também colocar o nome da Action, porque agora não estamos chamando a Action padrão:

public string BemVindo()
{
	return "<h1>Minha Página!</h1><p>Olá, seja bem-vindo!</p>"

}

image

Mas calma! Você não precisa ficar digitando HTML em C# dessa forma, porque seria bem cansativo. Para isso você utiliza um ActionResult como retorno. Vamos mudar o tipo do retorno das nossas Actions de string  para ActionResult, e adicionar Views HTMLs para elas, dessa forma ficará mais fácil de controlarmos a geração do HTML. Podemos adicionar uma View clicando em cima do Método da Action e depois em Add View. Vamos fazer isso para os dois métodos. Aparecerá  a seguinte janela:

image

Essa é a janela que você define as informações da View. Vamos conhecê-la com o passar do tempo. Por hoje, precisamos ver apenas que estamos dando o nome da View, que é o mesmo nome da Action, e também estamos dizendo que ela utilizará uma MasterPage (Site.Master). Quanto a MasterPages, o conceito é o mesmo que no WebForm.

Depois de adicionarmos as duas Views, nosso diretório de View ficará assim:

image

Quando trabalhamos com Action do tipo ViewResult, podemos passar dados do controller para view de duas formas: Através do dicionário ViewData, que você pode pode definir qualquer informação, e lê-la a partir da View, ou através de Model, que é a representação dos dados, como você já sabe.

A princípio não existe nada de mais no HTML da View, porém, se você vem do WebForm, deve saber que NÃO EXISTEM NENHUM SERVER CONTROL no MVC. Portanto, você deverá conhecer HTML, se você veio de PHP ou Asp 3, verá que é bem parecido com o que você trabalhava, a principio pelo menos.

Vamos primeiro codificar o Index, tanto Action como View:

Action:

 public ActionResult Index()
        {
            ViewData["Texto"] = "Primeira Página";
            return View();
        }

View:

<asp:content id="Content2" runat="server" contentplaceholderid="MainContent">

    <h2><%=ViewData["Texto"] %></h2>

</asp:content>

Resultado:

image

Agora o comportamento com um Model, e vendo como ser acessado a partir da View, agora com a Action BemVindo. Nesse caso, estou utilizando como modelo um objeto dinâmico,, apenas como exemplo, mas poderia ser qualquer estrutura de dados:

Action:

public ActionResult BemVindo()
        {
            dynamic model = new ExpandoObject();
            model.Texto = "Seja bem-vindo!";
            return View(model);
        }

View:

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

    <h2><%=Model.Texto %></h2>

</asp:Content>

Resultado:

image

Perceba que agora  agente não utilizou o View data, mas um objeto chamado Model, que terá as propriedades do seu modelo de acordo com o definido na Action.

No nosso caso, o IntelliSense do Model não funcionou porque o nosso objeto era dinâmico e o tipo da View era dinâmico, como podemos ver na primeira linha da View:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

No próximo post, veremos como fazer Views fortemente tipadas e como isso pode nos ajudar no desenvolvimento.

Bom, acredito que para um primeiro post, apenas introdutório, o que foi passado já é suficiente para você ir fuçando e descobrindo mais coisas do Asp.Net MVC.

Qualquer dúvida estou a disposição.

Até o próximo!

16. November 2010 07:18 by Frederico B. Emídio | Comments (2) | Permalink

Comments

Parabéns pelo post, já programo em php e um pouco de asp.net com webform, realmente o conceito é parecido com o MVC do PHP, só não entendi muito bem quando você renderiza um view pelo controle, pois no php posso setar a view que quero renderizar caso o controller for executado pelo ajax por exemplo, mas valeu gostei do post.. parabéns denovo!
4/7/2011 3:09:29 AM #
Hey! I know this is kinda off topic but I was wondering which blog platform are you using for this site? I'm getting fed up of Wordpress because I've had issues with hackers and I'm looking at alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.

Take a look at my site  On the internet Reservations regarding Motels inside Canada - http://www.hotel-discount.com/niagara-falls-hotel/
9/8/2014 3:56:11 PM #

Add comment




biuquote
  • Comment
  • Preview
Loading



Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  October 2014  >>
MoTuWeThFrSaSu
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET