ASP NET – Partial Views – Razor – MVC – C#

Publicado: 4 de junho de 2015 em C#

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.

Partial: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.partialextensions.partial(v=vs.118).aspx

 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

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

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

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"
            }
        };

    }
}

 

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s