Escrito por: TiraCodigo
Etiquetas: asp.net, MVC, Tutorial
En este punto del tutorial, veremos la utilización de las vistas parciales, las cuales nos ayudan a tener organizadas nuestras vistas, ya que con estas seccionamos el contenido de nuestra pagina, así como para cuando se rendericé la pagina, por ejemplo cuando realizamos una llamada en Ajax, solo se devuelva el contenido de la vista parcial y no toda la pagina, cosa que veremos mas adelante, por el momento veremos su uso básico
Por ejemplo, imaginemos que tenemos una pagina, donde mostraremos informacion de registro, del lado izquierdo la imagen del usuario y del lado derecho su información, para tener esto organizado, utilizaremos vistas parciales, una para la parte izquierda y otra para la parte derecha, lo cual realizaremos de la siguiente manera.
Primeramente, crearemos nuestro modelo, el cual llamaremos Persona y seria se la siguiente forma:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace VistasParciales.Models
{
public class Persona
{
public string imagen { get; set; }
public string nombre { get; set; }
public string apellido { get; set; }
public string direccion { get; set; }
public string contrasena { get; set; }
}
}
Ya que tenemos el modelo, podemos definir las 2 vistas parciales, una donde mostraremos la imagen del usuario y otra donde mostraremos los datos del usuario, esto utilizando el mismo modelo que definimos anteriormente, empecemos por la vista parcial izquierda, la cual quedaría de la siguiente forma:
@model VistasParciales.Models.Persona
@{
ViewBag.Title = "Mi Página";
}
<div class="container__child signup__thumbnail">
<div class="thumbnail__logo">
<img src="@Url.Content(Model.imagen)" alt="Sample Image" width="350px" style="padding-top:40px" />
<h1 class="logo__text">Usuario Actual</h1>
</div>
<div class="signup__overlay"></div>
</div>
Como vemos en la vista izquierda, tiene el formato de una vista común, ahora realizaremos la vista parcial derecha, la cual nos quedaría de la siguiente forma:
@model VistasParciales.Models.Persona
@{
ViewBag.Title = "Mi Página";
}
<div class="container__child signup__form">
<form action="#" style="padding-top: 20px;">
<div class="form-group">
<label for="username">Nombre</label>
@Html.EditorFor(m => m.nombre, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
<label for="email">Apellidos</label>
@Html.EditorFor(m => m.apellido, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
<label for="email">Dirección</label>
@Html.EditorFor(m => m.direccion, new { htmlAttributes = new { @class = "form-control" } })
</div>
<div class="form-group">
<label for="password">Contraseña</label>
@Html.EditorFor(m => m.contrasena, new { htmlAttributes = new { @class = "form-control", @type = "password" } })
</div>
<div class="m-t-lg">
<ul class="list-inline" style="padding-left: 90px;padding-top: 30px;">
<li>
<input class="btn btn--form" type="submit" value="Registrar" />
</li>
</ul>
</div>
</form>
</div>
Ahora viene la parte interesante, y esta es la invocación, la cual realizaremos sobre la vista index, donde utilizaremos la función Html.Partial(), mandando como parámetro el nombre de la vista parcial a cargar, así como el modelo que esta utilizara, aqui en código:@model VistasParciales.Models.Persona
@{
ViewBag.Title = "Mi Página";
}
<div class="signup__container">
@Html.Partial("Izquierda", Model)
@Html.Partial("Derecha", Model)
</div>
Para complementar todo lo anterior, en nuestro controller, vamos a inicializar el modelo y especificar los datos, quedando de la siguiente manera:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using VistasParciales.Models;
namespace VistasParciales.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var m = new Persona();
m.imagen = "~/Content/pic.jpg";
m.nombre = "Pedro";
m.apellido = "Perez";
m.direccion = "No conocida";
m.contrasena = "nolasabes";
return View(m);
}
}
}
Como pudiste ver, el uso de vistas parciales es relativamente fácil, la organización es uno de sus usos, pero el mayor provecho se saca al combinarlo con Ajax, para la recarga de partes de la pagina, lo cual tocaremos en un punto mas adelante, ahora si, es tiempo de ver el resultado final:
A continuación los links para ver el proyecto en producción y el link de descarga
Descargar el código fuente del ejemplo