none
multiples vistas en la misma pagina mvc

    Pregunta

  • 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...

    jueves, 22 de septiembre de 2011 1:47

Respuestas

  • 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>
       <!-- Código en el head -->
    </head>
    <body>
    <div class="cabecera">
       <!-- Codigo cabecera -->
    </div>
    <div class="menu">
       <!-- Codigo 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
    jueves, 22 de septiembre de 2011 6:48
  • 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
    martes, 27 de septiembre de 2011 2:30

Todas las respuestas

  • 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>
       <!-- Código en el head -->
    </head>
    <body>
    <div class="cabecera">
       <!-- Codigo cabecera -->
    </div>
    <div class="menu">
       <!-- Codigo 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
    jueves, 22 de septiembre de 2011 6:48
  • 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
    martes, 27 de septiembre de 2011 2:30
  • 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

    miércoles, 28 de septiembre de 2011 0:27
  • Aunque sea viejo este post, la duda que tengo y no he encontrado explicacion es el postback de estas vistas parciales. es decir, que llega a la vista principal, si poe ejemplo tuviesemosun submit.

    Llegaria todo lo del modelo de cada una de las vistas parciales?

    Y si una vista parcial no esta pensada para estar dentro de otra, no esta pensada para reusar vistas? Que pasa cuando no puede usarse EditorTemplate para customized una parte de la clase por ejemplo items de una orden de compra, que son mostradas con algun jqgrid o algo asi, donde no es factible el uso de EditorTemplate?

    Saludos!

    viernes, 07 de junio de 2013 21:07
  • Estimados,

    solo una corrección: 

    <divid="vista1">
        @{Html.RenderAction("Accion", "controlador");}
    </div><divid="vista2">
        @{Html.RenderAction("Accion2", "controlador2");}
    </div>

    Atte.

    Aporte de SuperPato
    • Editado RafaelMarin miércoles, 31 de julio de 2013 20:32 Fuente
    • Propuesto como respuesta RafaelMarin miércoles, 31 de julio de 2013 20:32
    miércoles, 31 de julio de 2013 20:30