Cargar vista parcial en un div usando jquery

Question

Hola que tal!!!

quiero realizar la siguiente acción:

al momento de hacer click sobre un boton dentro de la misma pagina web, en un div en particular cargar una vista parcial.

Desde ya muchas gracias por la ayuda.

Answer 1

Hola que tal!!!

quiero realizar la siguiente acción:

al momento de hacer click sobre un boton dentro de la misma pagina web, en un div en particular cargar una vista parcial.

Desde ya muchas gracias por la ayuda.

Vi un ejemplo en el cual con unos tab hacían algo parecido a continuación lo detallo:

Vista:

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">Text 1</a></li>
            <li><a href="#tabs-2">Text 2</a></li>
            <li><a href="#tabs-3">Text 3</a></li>
        </ul>
        <div id="tabs-1">
            <% Html.RenderPartial("_tab1", Model);  %>            
        </div>
        <div id="tabs-2">
            <% Html.RenderPartial("_tab2", Model);  %>            
        </div>
        <div id="tabs-3">
            <% Html.RenderPartial("_tab3", Model);  %>            
        </div>
</div>

Funcion Jquery:

<script type="text/javascript">
$(document).ready(function () {
    $("#tabs").tabs();
});    
</script>

yo quiero hacer algo parecido, que cargue de manera dinamica y simple el div usando jquery, saludos!

Answer 2

Pues es bien sencillo pues puede usted consumir una vista parcial vía jQuery sin tener que hacer nada particular:

$(document).ready(function ()
{
    $('#elBoton').click(function ()
    {
        $.post('/Controlador/AccionQueRetornaVistaParcial'
            , null
            , function(data)
            {
                //Chequear opcionalmente el tamaño de la respuesta:
                if (data.length > 0)
                {
                    $('#elDiv').html(data);
                    //Opcionalmente mostrar el DIV si es que estaba oculto.
                    //Puede ser usando una animación.
                }
            }
    });
});

---

Jose R. MCP
Code Samples

Answer 3

Pues es bien sencillo pues puede usted consumir una vista parcial vía jQuery sin tener que hacer nada particular:

$(document).ready(function ()
{
    $('#elBoton').click(function ()
    {
        $.post('/Controlador/AccionQueRetornaVistaParcial'
            , null
            , function(data)
            {
                //Chequear opcionalmente el tamaño de la respuesta:
                if (data.length > 0)
                {
                    $('#elDiv').html(data);
                    //Opcionalmente mostrar el DIV si es que estaba oculto.
                    //Puede ser usando una animación.
                }
            }
    });
});

---

Jose R. MCP
Code Samples

Hola Jose, retomando el tema, es asi como lo estoy haciendo, una consulta como me recomiendas poner la direccion de la vista parcial (la url) he intentado con  "~/Controlador/Vista" pero no logro retornar algo.

te doy un ejemplo de como lo hago...

	$(document).ready(function () {
	    $('.contenedor').on("click", function () {
	        var sParametros = $(this).attr("id");
	        sParametros = sParametros.split("®");
	        $.post('~/Cuenta/AsignaCuentasInforme', {idInforme: sParametros[0], idInformeGrupo: sParametros[1]}
                , function(data) {
                    //Chequear opcionalmente el tamaño de la respuesta:
                    if (data.length > 0) {
                        $('#contenedor' + sParametros[0] + sParametros[1]).html(data);
                    }
                }
            );
	    });
	});

esta función va a estar en la pagina http://localhost:4000/Informe/ y la vista partical se encuentra en http://localhost:4000/Cuenta/AsignaCuentasInforme

Que puedo estar haciendo mal, saludos, gracias por todo.

Answer 4

Eso de '~' es un asunto que únicamente ASP.net entiende.  Javascript/jQuery no tienen idea de qué significa eso.  Fuera de eso pues no veo nada obviamente malo.  Lo que le recomiendo es deshacerse del ~ y depurar el Javascript.  En Google Chrome es relativamente bien sencillo de hacer.  Depure el JS para asegurarse que todo corre como debe, y por supuesto asegúrese de que la acción AsignaCuentasInforme del controlador Cuenta está en efecto siendo corrida por ej JS.

En mi experiencia esto funciona perfectamente.  Actualmente tengo este mismito código corriendo a la perfección en un proyecto MVC4.  Recuerde eso sí, que está haciendo un POST ($.post() es un atajo de $.ajax() con POST como método), y por lo tanto la acción debe permitir su ejecución vía HTTP POST.  En mi caso particular, la acción que retorna la vista parcial no se usa en ninguna otra parte y por lo tanto la marqué con el atributo [HttpPost].

---

Jose R. MCP
Code Samples

Answer 5

Eso de '~' es un asunto que únicamente ASP.net entiende.  Javascript/jQuery no tienen idea de qué significa eso.  Fuera de eso pues no veo nada obviamente malo.  Lo que le recomiendo es deshacerse del ~ y depurar el Javascript.  En Google Chrome es relativamente bien sencillo de hacer.  Depure el JS para asegurarse que todo corre como debe, y por supuesto asegúrese de que la acción AsignaCuentasInforme del controlador Cuenta está en efecto siendo corrida por ej JS.

En mi experiencia esto funciona perfectamente.  Actualmente tengo este mismito código corriendo a la perfección en un proyecto MVC4.  Recuerde eso sí, que está haciendo un POST ($.post() es un atajo de $.ajax() con POST como método), y por lo tanto la acción debe permitir su ejecución vía HTTP POST.  En mi caso particular, la acción que retorna la vista parcial no se usa en ninguna otra parte y por lo tanto la marqué con el atributo [HttpPost].

---

Jose R. MCP
Code Samples

Jose muchas gracias toda la razon efectivamente es lo que dices.

tengo solo la siguiente duda... recuerdas que estamos cargando un contenido con jquery... te pongo en el siguiente caso..

tengo la siguiente estructura de un arbol creado con <li> y <ul>:

Arbol
---carpeta1
------subcarpeta1
---------elemento1
---------elemento2
      subcarpeta1
   carpera2
------subcarpeta1

los elementos1 y elemento2 estan dentro de un div, este contenido corresponden a un codigo html que lo cargo con jquery-ajax, y se carga al hacer un click sobre el <li> de la subcarpeta1, usando la siguiente que me enseñaste, el problema ahora es que usando esta funcion por alguna razon al hacer click sobre el codigo cargado por jquery me gatilla el evento click del <li> generando nnuevamente la carga del html. 

como puedo evitar esto?

muchas gracias.

Answer 6

En vez de usar $(...).on('click', ...) use $(...).one('click', ...).  Vea http://api.jquery.com/one/ para detalles completos.  Eso sería lo más fácil de hacer si es que es apropiado en su caso.

---

Jose R. MCP
Code Samples

Answer 7

En vez de usar $(...).on('click', ...) use $(...).one('click', ...).  Vea http://api.jquery.com/one/ para detalles completos.  Eso sería lo más fácil de hacer si es que es apropiado en su caso.

---

Jose R. MCP
Code Samples

gracia jose efectivamente me sirve pero a medias, ya que por lo que vi one("click") "no toma en cuenta" solo siguientes click despues del primero, eso me permite hacer click en el DIV que esta dentro del LI, pero si quiero volver hacer click en el LI para cerrar el arbol y nuevamente click para abrirlo, no me ejecuta la funcion debido a que ya se hizo click una ves... y yo necesito que se vuelve a ejecutar en este caso.. "volver a abrir nodo después de haberlo cerrado"

pensaba usar multiples clases, pero no me funciono... es decir... pornerle dos clases al LI (<LI class="clase1 clase2">)

y llamar la funcion asi... 

 $('.contenedor').on("clase1.clase2", function () {

y al hacer click cambiar la segunda clase para que no la considere al hacer click dentro de ella, pero no me funciona, se ejecuta igual, sera algo del navegador?

Answer 8

Pues entonces si no puede usar one() tendrá que asegurarse de que "subcarpeta" no contenga "elemento1" o "elemento2" para que así pueda usted hace clic sobre dichos elementos sin activar el JS asignado al clic de la subcarpeta.

---

Jose R. MCP
Code Samples

Answer 9

Pues entonces si no puede usar one() tendrá que asegurarse de que "subcarpeta" no contenga "elemento1" o "elemento2" para que así pueda usted hace clic sobre dichos elementos sin activar el JS asignado al clic de la subcarpeta.

---

Jose R. MCP
Code Samples

es exactamente lo que he hecho, me estaba complicando, pero que jquery permitía controlarlo de alguna manera, muchas gracias