Algumas vezes você vai se deparar com a necessidade de reutilizar códigos de suas visões em suas aplicações ASP.NET MVC, um conceito muito utilizado nestas situações são as visões parciais, com este recurso você pode quebrar sua visão em vários pedaços, como por exemplo utilizando uma visão parcial para o cabeçalho, outra para o rodapé e qualquer parte de sua aplicação conforme a sua necessidade. Entretanto você também pode utilizar as visões parciais para reutilizar código de um modo mais avançado, como por exemplo reutilizar o código de um iterador utilizando apenas a parte a ser iterada, separando o iterando do resultado mostrado.
Podemos dizer que uma visão parcial permite definir uma exibição que será processada dentro de uma visão pai. As visões parciais são implementadas como controles de usuário ASP.NET (.ascx) framework Web Forms.
Usando Visões Parciais
1 – Crie uma nova aplicação MVC usando o template padrão ou utilize o exemplo anterior que já contem os códigos necessários para esta aplicação. Crie um controlador e uma visão utilizando o scaffold de lista para o seu modelo de dados, utilize os códigos abaixo para isto. Crie uma visão parcial vazia para nosso controlador chamada _Cursos, marque-a como uma visão parcial e adicione o modelo utilizado, lembre-se de começar as visões parciais com o caractere underline:
MVC Parcial View
2 – Na visão de índice de lista você tem o código completo do iterador que foi gerado automaticamente, recorte o código de dentro do for each e cole em sua visão parcial. Lembre de na visão parcial trocar o item do iterador pelo modelo, pois o item só existe no escopo do iterador do qual a visão parcial não faz parte, no entanto o passaremos com parâmetro para a visão parcial:
MVC – Código Reutilizado
3 – Rode sua aplicação e chame seu controlador, você pode perceber que a visão índice e a visão parcial formam um único resultado com o mesmo efeito que possuímos antes:
MVC – Partial View
Exemplos:
Neste exemplo desmembramos a visão de índice em duas utilizando uma visão parcial para separar o código a ser iterado.
C#
Modelo
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication1.Models
{
public class CursosModelo
{
// Propriedades
public int Id { get; set; }
public string Curso { get; set; }
public string Linguagem { get; set; }
public string Dia { get; set; }
public string hora { get; set; }
}
}
Visão
@model IEnumerable<WebApplication1.Models.CursosModelo>
@{
ViewBag.Title = "Desenvolvimento Aberto - Cursos";
}
<h1>Desenvolvimento Aberto</h1>
<h2>Cursos</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Curso)
</th>
<th>
@Html.DisplayNameFor(model => model.Linguagem)
</th>
<th>
@Html.DisplayNameFor(model => model.Dia)
</th>
<th>
@Html.DisplayNameFor(model => model.hora)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<!--
Os itens serão exibidos por uma visão parcial
Você precisa enviar como parâmetro a visão e o item para o modelo
-->
@Html.Partial("_Cursos", item)
}
</table>
Visão Parcial
@model WebApplication1.Models.CursosModelo
<!--
Visaão Parcial
Para que o modelo funcione no iterador da visão mãe
você precisa trocar o item pelo Model como você pode ver abaixo
-->
<tr>
<td>
@Html.DisplayFor(modelItem => Model.Curso)
</td>
<td>
@Html.DisplayFor(modelItem => Model.Linguagem)
</td>
<td>
@Html.DisplayFor(modelItem => Model.Dia)
</td>
<td>
@Html.DisplayFor(modelItem => Model.hora)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = Model.Id }) |
@Html.ActionLink("Details", "Details", new { id = Model.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = Model.Id })
</td>
</tr>
Controlador
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class CursosController : Controller
{
// GET: Cursos
public ActionResult Index()
{
var modelo =
from r in _cursos
orderby r.Id
select r;
return View(modelo);
}
// GET: Cursos/Details/5
public ActionResult Details(int id)
{
return View();
}
// GET: Cursos/Create
public ActionResult Create()
{
return View();
}
// POST: Cursos/Create
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
// TODO: Add insert logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
// GET: Cursos/Edit/5
public ActionResult Edit(int id)
{
// Recebe identificador do item da coleção
var modelo = _cursos.Single(r => r.Id == id);
// Adiciona modelo à visão
return View(modelo);
}
// POST: Cursos/Edit/5
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
// Recebe identificador do item da coleção
var modelo = _cursos.Single(r => r.Id == id);
// Ainda não estamos utilizando um banco de dados
// Então apenas vamos alterar o item da coleção
if (TryUpdateModel(modelo))
{
// Caso bem sucedido redireciona para a lista
return RedirectToAction("Index");
}
// retorna modelo
return View(modelo);
}
// GET: Cursos/Delete/5
public ActionResult Delete(int id)
{
return View();
}
// POST: Cursos/Delete/5
[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here
return RedirectToAction("Index");
}
catch
{
return View();
}
}
// Lista estatica enquanto ainda não utilizamos banco de dados
// Lista alimenta os dados para nossa pagina
static List<CursosModelo> _cursos = new List<CursosModelo>
{
new CursosModelo {
Id =1,
Curso = "ASP.NET MVC",
Linguagem = "C#",
Dia = "Segunda",
hora = "8:00"
},
new CursosModelo {
Id =2,
Curso = "Web Dynpro MVC",
Linguagem = "ABAP",
Dia = "Terça",
hora = "8:00"
},
new CursosModelo {
Id =3,
Curso = "Ruby on Rail",
Linguagem = "Ruby",
Dia = "Quarta",
hora = "8:00"
},
new CursosModelo {
Id =4,
Curso = "Django",
Linguagem = "Python",
Dia = "Quinta",
hora = "8:00"
},
new CursosModelo {
Id =1,
Curso = "Java EE MVC",
Linguagem = "Java",
Dia = "Sexta",
hora = "8:00"
}
};
}
}
Ricardo Mantovani
Desenvolvimento Código Aberto 