En este post les explicare como crear una vista parcial y asi mismo realizar la llamada a la vista parcial desde Jquery en MV3, pero primero, ¿Que es una vista parcial?.
Una vista parcial o Partial View es un fragmento de codigo el cual podemos llamar desde cualquier parte de nuestra aplicacion la logica es parecida a utilizar User control, en donde podemos separar parte de la aplicacion en diversas secciones para poder reutilizarlas conforme las vallamos ocupando.
bueno manos a la obra:
Abrimos el poderoso Visual Studio y creamos una aplicacion ASP.Net MVC3 y le damos un nombre.
Despues escogemos una plantilla, en este caso yo utilizare la plantilla vacia.
Creamos un controlador con su respectivo ActionResult y posteriormente pasamos a agregar la vista para este ActionResult.
el codigo de nuestra vista debera tener el formato siguiente :
<html> <head> <title> </title> </head> <body> <h3>Esta es una aplicacion con vistas parciales</h3> </body> </html>
Ahora añadiremos el script de jquery el cual pueden descargarlo de Aqui
en este caso descargue la version mas actual que es la 1.10.2,la agregamos a la carpeta Scripts de nuestro proyecto.
Agregamos a nuestra vista la referencia del Script :
<script src="@Url.Content("~/Scripts/JQuery/jquery-1.10.2.js")" type="text/javascript"></script>
Dentro del body creare un pequeño boton que llamara a la funcion que a su vez llamara a la vista parcial.
<div> <br /> <input type="button" id="miBton" value="Click para llamar a la vista parcial :)" onclick="fnClick()" /></div> <div id="pvistaParcial"> </div> </div>
La funcion llamada fnClick tendra el siguiente codigo
function fnClick() {
var id = "parametros de la funcion";
$.ajax(
{
type: 'POST',
data: "{'id':" + "'" + id + "'}", //datos o parametros enviados al servidor
dataType: 'html', //el tipo de dato que nos regresara el servidor en este caso regresa html
url: '@Url.Action("vistaParcial", "Home")',
//URL del action result que cargara la vista parcial
success: function (result) {
// si la funcion se ejecuta lanzara un alert
alert('Success');
//cuando se ejecuta bien la funcion agregara al div vistaParcial el contenido
//que recibio del servidor
$("#pvistaParcial").html(result);
},
error: function (error) {
// si hay un error lanzara el mensaje de error
alert('Fail');
}
});
}
para mas informacion sobre ajax pueden consultar Aqui
ahora pasamos al controlador , creamos un nuevo ActionResult que nos regrese una vista parcial como en el ejemplo:
[HttpPost]
[HttpPost]
public ActionResult vistaParcial(string id)
{
return PartialView("vistaParcial");
}
damos click derecho al nombre del ActionResult y escogemos la opcion Agregar Vista, seleccionamos el check Crear como vista parcial:
El codigo de nuestra vista parcial sera parecido a este :
@{
ViewBag.Title = "vistaParcial";
}
<h2> esta es una vista parcial vistaParcial</h2>
Guardamos y ejecutamos la aplicacion. Damos click en el boton y el resultado sera el siguiente :
Espero les sirva, de ser asi no olviden comentar 🙂
dejo el codigo fuente de ejemplo en este LINK
El Blog de JuMiPe 