Principales respuestas
Cargar vista parcial en un div usando jquery

Pregunta
-
Respuestas
-
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- Marcado como respuesta Mainer_Nunez lunes, 22 de octubre de 2012 2:57
Todas las respuestas
-
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!
-
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- Marcado como respuesta Mainer_Nunez lunes, 22 de octubre de 2012 2:57
-
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 SamplesHola 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.
-
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 -
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 SamplesJose 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.
-
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 -
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 Samplesgracia 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?
-
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 -
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.
es exactamente lo que he hecho, me estaba complicando, pero que jquery permitía controlarlo de alguna manera, muchas gracias
Jose R. MCP
Code Samples