ASP.NET MVC 

ASP.NET MVC é um framework para desenvolvimento de aplicações web que usa os padrões 

MVC (Model View Controller) e Convention over Configuration. 

O padrão MVC aplicado a aplicações web conduz a uma separação de responsabilidades. Esta 

separação explícita de responsabilidades adiciona uma pequena quantidade de complexidade 

extra ao projecto de uma aplicação, mas os benefícios compensam o esforço extra.  

Modelos: são classes que representam o domínio. Os objectos do domínio encapsulam os 

dados armazenados numa base de dados assim como o código usado para manipular esses 

dados e para aplicar lógica de negócio específica do domínio. Incluiem a camada de acesso a 

dados (Data Access Layer – DAL) podendo usar uma ferramenta como Entity Framework. 

Vistas: são templates para gerar dinamicamente HTML. 

Controladores: classes que respondem às interacções do utilizador, acedem ao Modelo e 

decidem que Vista usar. Em Asp.Net estas classes têm o sufixo Controller. 

O framework ASP‐NET MVC usa convenções em vez de configurações (Convention over 

Configuration), o que permite fazer assunções baseadas nos nomes dos diretórios. O uso de 

convenções reduz a quantidade de código que é necessário escrever, e também facilita a 

compreensão do projecto por outros desenvolvedores. 

 

Construção de uma aplicação ASP.NET MVC4 

File  >  New Project  >  Visual C#, Web, ASP.NET MVC4 Web Application 

Name:  MvcApplication1 

Project Template: Internet Application – contém o princípio de uma aplicação Web MVC, 

incluindo funções de gestão de contas (que correm no sistema Membership Asp.Net). É 

possível correr a aplicação logo após ser criada. 

View Engine: linguagem usada para gerar código HTML. Duas opções: Razor View Engine ou 

ASPX View Engine. Selecionar Razor. 

Os projectos Asp.Net MVC criados com o template “Internet Application” apresentam 9 

directórios top‐level: 

/Controllers ‐ para colocar classes Controller que tratam os pedidos. 

/Models ‐ para colocar classes que representam e manipulam os dados e objectos de negócio. 

/Views   ‐ para colocar ficheiros template responsáveis por gerar output, tal como HTML. 

/Scripts ‐ para colocar ficheiros JavaScript. 

/Images ‐ para colocar imagens usadas no site. 

/Content ‐ para colocar código CSS e outro conteúdo do site sem ser scripts e imagens. 

/Filters ‐ para colocar código de filtros. 

/App_Data ‐ para colocar ficheiros de bases de dados para leitura e escrita. 

/App_Start ‐ para colocar ficheiros de configuração para Routing, Bundling, e API Web. 

 

É possível mudar esta estrutura, por exemplo colocar as classes do modelo num projecto class 

library separado. Contudo esta estrutura do projecto corresponde à convenção dos directórios 

por omissão. 

O directório /Controllers contém 2 classes Controller: HomeController e AccountController. 

O directório /Views contém 3 subdirectórios: Home, Account, e Shared. 

Os directórios /Content e /Script contêm um ficheiro Site.css e bibliotecas JavaScript ‐ jQuery. 

 

1. Controladores 

Os controladores respondem aos pedidos HTTP e retornam informação para o browser. 

Recebem os dados de entrada, muitas vezes efectuam mudanças no modelo e fornecem dados 

para a vista. São responsáveis pelo fluxo da aplicação. 

Nos frameworks Web tradicionais um URL era mapeado num ficheiro do disco do servidor 

web. Por exemplo um pedido feito com o URL “/Produtos.aspx” ou “/Produtos.php” é 

processado pelos ficheiros  “Produtos.aspx” ou “Produtos.php”. Em MVC o mecanismo de 

routing mapeia um URL num método de uma classe Controller. O mecanismo de routing 

decide que classe Controller instanciar, que método de acção invocar, e fornece os 

argumentos necessários a esse método. O método de acção do controlador decide que vista 

usar e a vista gera o HTML. 

Asp.Net MVC implementa a variante Front Controller do padrão MVC. 

Analisemos o que está incluído no projecto criado usando o template Internet Application. 

2 Controladores, subclasses da classe Controller:  

HomeController – responsável pelas “home page”, “about page” e “contact page” na raiz do 

website. 

AccountController – responsável por login e registo. 

 

F5 – Start Debugging 

HomeController 

O método Index é responsável pela home page: 

Colocar no IE o endereço  http://localhost:xxx/ 

ou         http://localhost:xxx/Home 

ou         http://localhost:xxx/Home/Index 

Criar um novo Controlador 

Controllers  >  Add  >  Controller…  >  StoreController  Empty MVC Controller 

O Controlador já tem um método Index. 

Suponhámos que o método Index será para listar os itens, vamos acrescentar mais 2 métodos: 

Browse para pesquisar itens e Details para mostrar os detalhes de um item. 

Estes métodos dentro do controlador são chamados métodos de Acção – têm a 

responsabilidade de responder aos pedidos, realizar as acções apropriadas e retornar a 

resposta para o browser. 

1. Mudar a assinatura do método Index() para retornar uma string 

        public string Index()         {             return "Olá de Store/Index()";         }  2. Adicionar métodos de acção para Browse e Details. 

         // GET: /Store/          public string Index()         {             return "Olá de Store/Index()";         }          // GET: /Store/Browse          public string Browse()         {             return "Olá de Store/Browse()";         }          // GET: /Store/Details          public string Details()         {             return "Olá de Store/Details()";         } 

 

3. Correr o projecto. Não usámos modelos nem vistas. 

http://localhost:1755/Store 

http://localhost:1755/Store/Browse 

http://localhost:1755/Store/Details 

4. Parâmetros nos Action Methods de um Controlador 

Vamos modificar o método de acção Browse() para receber um valor de uma query 

string  

      // GET: /Store/Browse?genero=Disco        public string Browse(string genero)       {          return ("Olá de Store/Browse(), Género = " + genero;       }  

Testar: 

http://localhost:1755/Store/Browse 

http://localhost:1755/Store/Browse?genero=Disco 

 

Vamos modificar o método de acção Details() para receber um parâmetro com o nome 

ID do tipo inteiro. 

        // GET: /Store/Details/5          public string Details(int id)         {             return "Olá de Store/Details(), ID = " + id;         } 

  

Testar: 

http://localhost:1755/Store/Details  ‐ dá erro. 

http://localhost:1755/Store/Details?id=5 

http://localhost:1755/Store/Details/5 

É como se o browser invocasse directamente métodos no Controlador. 

 

Modificar o método de acção Details() colocando um valor por omissão para o 

parâmetro com o nome ID. 

        // GET: /Store/Details/5          public string Details(int id = 0)         {             return "Olá de Store/Details(), ID = " + id;         } 

  

Testar: 

http://localhost:1755/Store/Details  ‐ já não dá erro. 

   

2. Vistas 

A primeira impressão que um utilizador tem de uma Aplicação Web depende da vista e toda a 

interacção com a aplicação é realizada através de vistas. Os controladores e os modelos são 

muito importantes mas esse trabalho não é visível. 

Já vimos como um controlador poderia retornar uma string, mas a maior parte das acções dos 

controladores necessitam de mostrar informação dinâmica no formato HTML. 

A vista é responsável por construir a interface com o utilizador (UI). Recebe o modelo (a 

informação que o controlador necessita de mostrar) e a vista transforma esse modelo num 

formato próprio para ser apresentado ao utilizador. 

As vistas não são directamente acessíveis pelo browser. Uma vista é sempre invocada pelo 

controlador que lhe fornece os dados.  

 

Convenções em Asp.Net MVC 

As aplicações Asp.Net MVC, por omissão, funcionam com base em convenções. Isto evita ter 

de especificar tudo o que pode ser inferido através de convenções. 

MVC usa uma estrutura de nomes de directórios baseados em convenções que permite 

determinar os templates das vistas referidos pelos controladores sem especificar a localização. 

O ficheiro com o template da vista referido num método de um controlador encontra‐se no 

directório \Views\<Nome_do_Controlador>\ e tem o nome igual ao método do qual é 

invocado. 

As convenções do MVC podem ser substituídas quando necessário. Este conceito é designado 

por “convenções em vez de configurações” (convention over configuration). Este conceito foi 

introduzido pelo Ruby on Rails. 

 

Convenções Asp.Net MVC: 

O nome de cada classe Controlador termina em Controller, e é colocada no directório 

Controllers. 

Há um único directório Views para todas as vistas da aplicação. 

As vistas que cada Controlador usa são colocadas num subdirectório de Views com o nome do 

Controlador (excepto o sufixo Controller). 

Todas as vistas partilhadas são colocadas no subdirectório de Views com o nome Shared. 

 

 

Especificação das Vistas 

O directório Views contém um subdirectório por controlador, com o mesmo nome do 

controlador, mas sem o sufixo controller. Dentro de cada um destes subdirectórios existe um 

ficheiro view para cada método de acção, com o mesmo nome do método de acção. Este é o 

processo base de associação de vistas a métodos de acção. 

Exemplo1: 

Se o método de acção do controlador não especificar o nome da vista aplica‐se a convenção 

para localizar o objecto ViewResult retornado pelo método View(): é retornada uma vista com 

o mesmo nome do método de acção dentro do directório Views/Nome_do_Controlador. 

Para o método /Store/Index a vista seleccionada será /Views/Store/Index.cshtml  

Modificar o método Index do Controlador StoreController: 

    public class StoreController : Controller {                  // GET: /Store/          public ActionResult Index()         {             ViewBag.Mensagem = "Mensagem de Store/Index";             return View();         }   . . .      } 

 

Botão direito do rato em cima do código deste método e  Add View... 

View name: Index 

Retirar a selecção a Use a Layout or master page 

Obtém‐se o seguinte ficheiro: 

@{     Layout = null; }  <!DOCTYPE html>  <html> <head>     <meta name="viewport" content="width=device‐width" />     <title>Index</title> </head> <body>     <div>              </div> </body> </html> 

 

Acrescentar no div do body: 

<h1>@ViewBag.Mensagem</h1> 

Executar:   http://localhost:1755/Store/ 

A vista mostra a mensagem colocada pelo controlador usando a expressão ViewBag.Mensagem. 

Exemplo2: 

Se pretendermos que o método de acção /Store/Index retornasse uma vista diferente 

colocada no subdirectório Store (por exemplo Teste.cshtml) temos de fornecer o nome da 

vista. 

Copiar o ficheiro Index.cshtml, colocar no mesmo directório com o nome Teste.cshtml, e fazer 

a modificação. 

<body>     <div>         <h1>Da vista Teste: @ViewBag.Mensagem</h1>     </div> </body> 

 

No Index de StoreController alterar: 

        public ActionResult Index()         {             ViewBag.Mensagem = "Mensagem de Store/Index";             return View("Teste");         } 

 

Executar. 

Exemplo3: 

Se pretendermos que o método de acção /Store/Index retornasse uma vista diferente 

colocada num subdirectório diferente de Store (por exemplo Teste.cshtml em /Views/Home/) 

temos de fornecer o nome completo  da vista usando sintaxe com ~. Nesta sintaxe com ~ 

também temos de fornecer a extensão porque não é usado o mecanismo interno de procura 

de vistas. 

 

Mudar a localização do ficheiro Teste.cshtml para Views/Home 

Executar.   Dá erro. 

Alterar para   return View("~/Views/Home/Teste");  Executar.   Dá erro. 

Alterar para   return View("~/Views/Home/Teste.cshtml");  Executar.   Não dá erro 

 

Vistas fortemente Tipadas 

Para passar um objecto modelo para a vista, podemos colocá‐lo como argumento do método 

View(). 

Na vista este objecto é colocado na propriedade Model. Mas esta propriedade é do tipo 

dinâmico, isto é, o seu tipo de dados só é determinado em tempo de execução. 

Podemos usá‐la deste modo mas também é possível atribuir‐lhe o tipo de dados correcto. 

Atribuindo o tipo correcto beneficiamos do Intellisense do Visual Studio quando acedemos às 

propriedades do objecto, e também às verificações em tempo de compilação (compile‐time 

checking). 

Para que lhe seja atribuído o tipo de dados correcto temos de indicar à vista o tipo de dados da 

propriedade Model com a seguinte declaração: 

@model IEnumerable<MvcApplication1.Models.Album>  

 

View Models 

Muitas vezes uma vista tem necessidade de mostrar informação que não mapeia directamente 

num objecto do modelo do domínio. 

Como na vista só podemos ter um objecto Model, uma possibilidade para mostrar informação 

extra que não faça parte do modelo da vista é enviá‐la através do ViewBag. Embora seja uma 

solução flexível, os dados obtidos pela vista através do VIewBag não são fortemente tipados, 

pelo que o programador da vista não terá a vantagem do intellisense do Visual Studio. 

 

Assim, pode ser útil construir uma classe para agregar toda a informação necessária para 

fornecer à vista, designada por ViewModel, um modelo (classe) construído com o único 

objectivo de fornecer informação para a vista. 

Uma classe ViewModel serve para encapsular múltiplos dados representados por instâncias de 

outras classes num objecto para passar à Vista. 

Não há nenhuma localização pré‐defenida para colocar os ViewModels. Normalmente cria‐se 

um directório ViewModels na raiz do projecto MVC. Nesse directório colocam‐se todos os 

ViewModels, um ficheiro para cada classe, com a designação do nome do Controlador seguida 

do nome do método de acção (ou Vista). 

 

 

 

Exemplo1: 

MvcApplication1   >   Add   >   New Folder:   ViewModels 

ViewModels/StoreIndexViewModel.cs

    public class StoreIndexViewModel     {         public int NumeroDeGeneros { get; set; }         public List<string> Generos { get; set; }     } 

 

Consideremos o seguinte método de acção: 

Controllers/StoreController.cs  using MvcApplication1.ViewModels;  public ActionResult Index2() {    // Criar uma lista de géneros    var generos = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};    var viewModel = new StoreIndexViewModel    {        NumeroDeGeneros = generos.Count(),        Generos = generos    }; return View(viewModel); } 

Criar uma Vista

Uma vista pode ser criada escrevendo código e adicionada ao directório Views. Mas é muito mais fácil de criar através da ferramenta do Visual Studio “Add View”.

Clicando com o botão direito do rato em qualquer parte do código de um método de acção, seleccionar Add View…

Na janela de diálogo “Add View”:

View name: inicializado com o nome do método de acção.

View engine: Razor ou ASPX.

Create a strongly–typed view: esta selecção permite escrever ou seleccionar uma classe para modelo a enviar à vista. A lista de classes para modelos é preenchida usando reflexão. Portanto é importante compilar o projecto antes de seleccionar uma classe para modelo.

Scaffold template: A selecção de um modelo a enviar à vista permite seleccionar também um template para gerar a vista baseado no modelo seleccionado.

Scaffolding é usado por muitas tecnologias de software para significar geração rápida de um esquema do software que depois se pode editar. O template que gera este esquema inicial do código é usado como um andaime (scaffold) a partir do qual se constrói um programa mais poderoso.

Tipos de templates:

Empty: Cria uma vista vazia.

Create: Cria uma vista com um formulário para criar instâncias do modelo.

Delete: Cria uma vista com um formulário para apagar instâncias do modelo.

Details: Cria uma vista que mostra o valor de cada propriedade do modelo.

Edit: Cria uma vista com um formulário para editar instâncias do modelo.

List: Cria uma vista com um tabela das instâncias do modelo. A tabela apresenta uma coluna para cada propriedade do modelo. O modelo que é passado pelo método de acção à vista tem de ser do tipo de dados IEnumerable<Modelo>. Esta vista também apresenta links para as acções create/edit/delete.

Reference script libraries: a selecção desta opção na criação de uma vista que contenha entrada de dados, tal como Edit ou Create, faz com que a vista gerada referencie ficheiros JavaScript adequados para essa vista, tais como jQuery Validation library.

Create as a partial view: gera uma vista parcial, que vai constituir apenas parte de uma página, sem a opção layout. O layout, por omissão, está definido no ficheiro _ViewStart.cshtml.

Use a layout or master page: permite determinar se a vista referencia um layout (ou master page) diferente do layout por omissão ou se é uma vista completa.

Botão direito do rato no código do método public ActionResult Index2(): 

Seleccionar Add View …   Na janela de diálogo “Add View”:

View name:Index2

View engine: Razor

Create a strongly–typed view: selecionar

Model class: StoreIndexViewModel (MvcApplication1.ViewModels)

Scaffolf template: Details

Reference script libraries: selecionar

Create as a partial view: : não selecionar

Use a layout or master page: não selecionar

Add

O ficheiro Views/Store/Index2.cshtml é criado com o seguinte código:

@model MvcA.ViewModels.StoreIndexViewModel  @{  Layout = null;  }  <!DOCTYPE html>  <html> <head>     <meta name="viewport" content="width=device‐width" />     <title>Index2</title> </head> <body>     <fieldset>         <legend>StoreIndexViewModel</legend>              <div class="display‐label">              @Html.DisplayNameFor(model => model.NumeroDeGeneros)         </div>         <div class="display‐field">             @Html.DisplayFor(model => model.NumeroDeGeneros)         </div>     </fieldset>     <p>         @Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) |         @Html.ActionLink("Back to List", "Index")     </p> </body> </html>

Alterar o conteúdo do <div> para:

        <div class="display‐label">             @Html.DisplayNameFor(model => model.NumeroDeGeneros) :             @Html.DisplayFor(model => model.NumeroDeGeneros)         </div>         <div class="display‐field">             @Html.DisplayNameFor(model => model.Generos) :             @Html.DisplayFor(model => model.Generos)         </div> 

Layouts

Os layouts têm a mesma finalidade das master pages nas Web Forms. Podemos usar um layout para definir um template comum para o site ou parte do site. Este template conterá um ou mais placeholders. As outras vistas da aplicação fornecerão conteúdos para estes placeholders.

Exemplo:

Layout1.cshtml

<!DOCTYPE html> <html>     <head><title>@ViewBag.Title</title></head>     <body>         <header> 

<h1>@ViewBag.Title</h1>         </header>         <div id="main‐content">@RenderBody()</div>         <footer>@RenderSection("Footer", required: false)</footer>     </body> </html>   

Index.cshtml  @{ 

Layout = "~/Views/Shared/Layout1.cshtml"; ViewBag.Title = "Index"; 

}  <p>Conteudo principal</p>  @section Footer { 

Este é o footer } 

@RenderBody() é um placeholder que marca o lugar onde as vistas que usam este layout colocarão o seu conteúdo principal.

@RenderSection(“Footer”) é um placeholder que marca o lugar onde as vistas que usam este layout colocarão o conteúdo especificado na secção @section Footer.

As vistas têm de fornecer conteúdo para todas as secções definidas no layout, a não ser que a secção seja definida como opcional:

@RenderSection(“Footer”, required: false)

ViewStart

Cada vista pode especificar a sua página de layout usando a propriedade Layout.

Mas para um grupo de vistas que usem o mesmo layout podemos colocar num directório um ficheiro com o nome _ViewStart.cshtml. Este código é executado antes do código de qualquer vista nesse directório ou subdirectórios.

_ViewStart.cshtml:

@{     Layout = "~/Views/Shared/_Layout.cshtml"; } 

Forms e HTML Helpers

Html.Label

O helper Html.Label(”idTitulo”) cria o elemento html

<lable for=”idTitulo”>Titulo</label>

O objectivo do tag label é definir um label para um elemento input (tal como campo de texto, checkbox, ou radio button), e melhorar a acessibilidade, porque se o utilizador clicar no texto do label o browser transfere o foco para o controlo de input associado.

O atributo for deve conter o id do elemento input associado.

Html.DropDownList e Html.ListBox

Estes helpers criam elementos select.

Html.Label(”idTitulo”) cria o elemento html

<lable for=”idTitulo”>Titulo</label>

O objectivo do tag label é definir um label para um elemento input (tal como campo de

Exemplo de DropDownList

Ficheiro Controllers/HomeController.cs:

public ActionResult SelecionarCategoria() {    List<SelectListItem> itens = new List<SelectListItem>();    itens.Add(new SelectListItem { Text = "Ação", Value = "0", Selected = true });    itens.Add(new SelectListItem { Text = "Drama", Value = "1" });    itens.Add(new SelectListItem { Text = "Comedia", Value = "2" });    itens.Add(new SelectListItem { Text = "Ficção Científica", Value = "3" });     ViewBag.TipoFilme = itens;    return View(); } 

Ficheiro SelecionarCategoria.cshtml:

@{     ViewBag.Title = "SelecionarCategoria"; }  <h2>SelecionarCategoria</h2>  @using (Html.BeginForm("CategoriaEscolhida", "Home", FormMethod.Get)) {      <fieldset>              Tipo de Filme              @Html.DropDownList("TipoFilme")          <p>              <input type="submit" value="Submit" />          </p>      </fieldset> }  

Código html gerado:

<h2>SelecionarCategoria</h2> <form action="/Home/CategoriaEscolhida" method="get"> <fieldset> Tipo de Filme <select id="TipoFilme" name="TipoFilme"> <option value="0">A&#231;&#227;o</option> <option value="1">Drama</option> <option selected="selected" value="2">Comedia</option> <option value="3">Fic&#231;&#227;o Cient&#237;fica</option> </select> <p> <input type="submit" value="Submit" /> </p> </fieldset> </form>

Exemplo de ListBox

Semelhante ao exemplo anterior excepto no Ficheiro SelecionarCategoria.cshtml:

            @Html.DropDownList("TipoFilme")  

Alterado para:             @Html.ListBox("TipoFilme")  

Código html gerado:

<h2>SelecionarCategoria</h2> <form action="/Home/CategoriaEscolhida" method="get"> <fieldset>

Tipo de Filme <select id="TipoFilme" multiple="multiple" name="TipoFilme"> <option value="0">A&#231;&#227;o</option> <option value="1">Drama</option> <option selected="selected" value="2">Comedia</option> <option value="3">Fic&#231;&#227;o Cient&#237;fica</option> </select> <p> <input type="submit" value="Submit" /> </p> </fieldset> </form>