Não é de hoje que existe o modelo MVC (Model View Controller), para quem não sabe ele surgiu pela primeira vez em 1979 por Trygve Reenskaug, que trabalhava no Smalltalk. Ele descreve de maneira bem clara sua definição.

A visão gera a saída gráfica ou textual para a tela que é atribuída à sua aplicação. O controlador interpreta as entradas do mouse do teclado do utilizador, comandando o modelo a fim de alterar conforme apropriado. Finalmente, o modelo gerencia o comportamento e os dados do domínio da aplicação, responde aos pedidos de informações sobre seu estado (geralmente a partir da visão), e responde às instruções para mudar de estado (geralmente do controlador).

É impressionante como um modelo de programação está vivo e ainda tão poderoso, na figura abaixo está o diagrama MVC.

Diagrama conceitual de MVC no Smalltalk-80

Figura 1: Diagrama conceitual de MVC no Smalltalk-80

MVC no Visual Studio

Os projetos para ASP.NET MVC serão aqui criados na versão beta do Visual Studio 11, criamos um novo projeto em MVC4 como é mostrado na figura abaixo:

Criando um projeto MVC4

Figura 2: Criando um projeto MVC4

Após criado o projeto vamos adicionar duas referencias para nosso projeto do jQuery.Mobile.MVC. Podemos instalar o pacote pelo NuGet ou instalá-lo a partir do Visual Studio Manager Console do pacote, digite o seguinte comando: Install-Package jQuery.Mobile.MVC

Este pacote também adicionará as dependências como o Jquery.Mobile. Agora vamos modificar o código para visualizar os dois ambientes.Primeiro vamos abrir o arquivo gerado _Layout.Mobile.cshtml e modicar o código entre as TAGs como é mostrado abaixo:

Listagem 1: Adicionando Dependências Jquery.Mobile

        
        @ViewBag.Title 
        
        
        
        

Criamos uma nova view com o nome de index.Mobile.cshtml. Esta view será a visualização no ambiente móvel, este é um novo recurso no ASP.NET MVC4. Se for solicitada a pagina pelo navegador desktop será mostrada a index, caso seja de um navegador móvel será exibida a index.Mobile. Em seguida, adicionaremos um link para mudarmos de modo de exibição no mesmo navegador. Vamos adicionar esta linha no inicio do arquivo index.cshtml que fica no diretorio Views/Home:

Listagem 2: Criando a View index.Mobile.cshtml

@Html.ActionLink("Mobile view", "SwitchView", "ViewSwitcher", new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = "external" })

Executando o projeto, a primeira tela visualizada é do ambiente desktop. Clicando no link “Mobile View”, muda para a tela do ambiente mobile e o resultado final é mostrado nas imagens abaixo:

Pagina inicial no Desktop

Figura 3: Pagina inicial no Desktop

 Pagina inicial no mobile

Figura 4: Pagina inicial no mobile

Para saber mais sobre o MVC4 leia a documentação na pagina do asp http://www.asp.net/whitepapers/mvc4-release-notes

O download deste projeto encontra-se no início do artigo, espero poder ter ajudado e até a próxima.

Um abraço.