multiples vistas en la misma pagina mvc

Formular una pregunta

jueves, 22 de septiembre de 2011 1:47

0
hola ante de todo me gustaria decir que soy nuevo en mvc

la cosa es que me gustaria poder mostrar 2 vistas en la misma pagina es decir anvas de manera simultanea... con esta idea pretendo tenes una vista estatica y que la otra este cambiando a otra vista es decir a una tercera vista..

les agradecere mucho su ayuda...
- Cambiado Leandro TuttiniMVP jueves, 22 de septiembre de 2011 4:34 (De:Visual Studio)
- Responder
- Citar

Todas las respuestas

jueves, 22 de septiembre de 2011 6:48

1
Bienvenido @noe_saul! ;-)

Antes que nada te diré que el concepto de "mostrar 2 vistas en una misma página" no existe en ASP.NET MVC. Pagina y vista son equivalentes (de hecho debes dejar de pensar en páginas).

Eso no significa que no pueda hacerse lo que pides. Se puede hacer y es relativamente sencillo, aunque hay dos aproximaciones, en función de lo que quieras. Te cuendo las dos y si algo no te queda claro, pues lo dices y lo aclaramos :)

Sobre la sintaxis asumiré que usas Razor (MVC3), si usas el motor aspx la sintaxis es distinta...

1. Usar una master page

Esta aproximación se usa cuando la página estática es contenedora de la página que va cambiando. Imagina que tienes una aplicación web, donde siempre tienes una cabecera y un menú en la parte izquierda. Mientras la parte central va cambiando.

Como esto es muy común, la cabecera y el menú están definidas en la página master, y cada vista contiene el código HTML sólo de la parte central.

Para crear una página master, simplemente la añades desde VS (MVC master page) y allí pones el código HTML que quieras. Donde quieras que aparezca el contenido de cada página pones un @RenderBody(). Sería algo como:
```
<html>
<head>
   
</head>
<body>
<div class="cabecera">
   
</div>
<div class="menu">
   
</div>
<div class="contenido">
   @RenderBody()
</div>
</body>
</html>
```
Luego en cada una de tus vistas, debes usar el código:

@{ Layout="~/Views/Master/MiMaster.cshtml" }

Y en la vista pondrías sólo el código HTML que va dentro del <div class="contenido">

En este enlace, @scottgu lo explica en todo detalle: http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx

Por lo que tu pides (una vista estática y otra dinámica que va cambiando) me parece que tu solución puede ser usar master pages.

2. Vistas parciales

Esta técnica se usa cuando ambas vistas están en igualdad de condiciones, es decir una no incluye a la otra. Cuando usamos vistas parciales tenemos tres aspectos que juegan juntos:
1. Acciones del controlador que no devuelven una vista, sino una vista parcial
2. Una vista "normal" que incluye ambas vistas parciales
3. Las vistas parciales
Para incluir un par de vistas parciales dentro de una vista normal, podemos usar Html.RenderAction, que recibe como parámetros la acción del controlador a ejecutar, así como los parámetros (route values) que el controlador recibe. Entonces en tu vista "normal" puedes tener algo como:
```
<div id="vista1">
    {@Html.RenderAction("Accion", "controlador");}
</div>
<div id="vista2">
    {@Html.RenderAction("Accion2", "controlador2");}
</div>
```
Donde las acciones de los controladores tienen la forma:
```
public ActionResult Accion2()
{
    // Codigo
    return PartialView();
}
```
Y la vista parcial (en este caso Accion2.cshtml) contiene sólo la porción de código que iría dentro de, en este caso, el div vista2.

Otra opción es usar Html.RenderPartial en lugar de Html.RenderAction. Hacen casi lo mismo pero NO son exactamente iguales!. Para una buena explicación de las diferencias entre ambos: http://stackoverflow.com/questions/719027/renderaction-renderpartial

Por supuesto ambas técnicas (master pages y vistas parciales) se pueden usar a la vez!

Un saludo!
Eduard Tomàs Blog: http://geeks.ms/blogs/etomas -- Twitter: eiximenis
- Propuesto como respuesta JA Reyes - MCPD jueves, 22 de septiembre de 2011 8:03
- Marcado como respuesta Eder CostaOwner jueves, 18 de octubre de 2012 14:06
- Responder
- Citar
martes, 27 de septiembre de 2011 2:30

1
Hola noe_saul

Luego de la formidable respuesta de Eduard Tomàs, tambien hay una aproximacion de tener vistas parciales y cargarlas a traves de ajax.
Es decir como te comenta la opcion de Vistas Parciales Eduard, pero mediante jquery (mas facil) o

Muy laborioso pero tambien seria una alternativa

Un ejemplo "sencillo", siguiendo el ejemplo de Eduard, queda asi
```
<div id="vista1">
    {@Html.RenderAction("Accion", "controlador");}
</div>
<div id="vista2">
    Aqui se cargar la Accion2
</div>
```
y el script para cargar con jquery, facil... y que no cachee
```
<script type="text/javascript">
$(function(){
	$.ajax({
		url: '/controlador2/Accion2',
		cache: false,
		dataType: "html",
		success: function (data) {
			$('#vista2').html(data);
		}
	});
});
</script>
```
laborioso... no! Pero queria dejar la propuesta

Espero que te sirva de ayuda o guia.

Jose. A Fernandez | blog: http://geeks.ms/blogs/fernandezja
- Marcado como respuesta Eder CostaOwner jueves, 18 de octubre de 2012 14:06
- Responder
- Citar
miércoles, 28 de septiembre de 2011 0:27

0

te lo agradesco mucho Eduard me parecen muy buenas tus opciones... la de las vistas parciales logre hacerla probare lo de las page master....

graxias tenia un par de dias tratando de hacer esto.... soy algo nuevo en esto de mvc
- Responder
- Citar