none
MVC. Razor. Mostrar, ocultar div, panel... RRS feed

  • Pregunta

  • Buenas.

    estoy desarrollando en MVC con razor en Visual studio 2015

    tengo una vista con un listado de ventas y en la parte superior de la vista tengo una serie de campos que sirven para filtrar el listado de ventas. como hay bastantes filtros pues quiero que este filtro se puedo ocultar en un panel, div o similar. y poder mostrarlo u ocultarlo según me convenga clickando en una imagen.

    alguien me puede decir que objeto es el que más me conviene para hacer lo que quiero o si alguien dispone de algún ejemplo o similar.

    un saludo y gracias! :-)

    miércoles, 16 de agosto de 2017 12:54

Respuestas

  • Si te refieres a la clase Panel de System.Web, en MVC no lo encontrarás. Con independencia del marco de trabajo que utilices (ASP .Net WebForms, ASP .Net MVC) para mostrar u ocultar elementos del DOM puedes utilizar JavaScript o alguna librería como JQuery, claro, debes contener los elementos en un DIV y el elemento que cambiará el estado de visibilidad deberá estar fuera del DIV, por ejemplo:

    <input type="button" id="btn-estado" value="Mostrar/Ocultar" />
    <div id="id-container">
    	
    </div>
    ---
    <script type="text/javascript">
    
        $(document).ready(function () {
    
    		$('#btn-estado').on('click', function () {
    
    			var container = $('#id-container');
    
    			if (container.css('display') == 'none') {
    				container.fadeIn(400);
    			}
    			else {
    				container.fadeOut(400);
    			}
    		});
    	})
    
    </script>

    Si en tu proyecto se encuentra BootStrap tienes a mano mas de una forma para hacer lo que requieres de una manera simple, por ejemplo Collapse


    Nuestra profesión exige tener pasión por resolver problemas de una manera óptima y eficiente.
    • Marcado como respuesta DaniDeveloper jueves, 17 de agosto de 2017 7:02
    miércoles, 16 de agosto de 2017 18:28
  • A estos efectos, es irrelevante el hecho de que estes usando MVC. El codigo para ocultar el DIV sera un "pedacito" de javascript exactamente igual que el que pondrias en una pagina HTML. Si tienes instalado jQuery en la pagina (la plantilla de aplicacion MVC te lo incorpora de forma predeterminada), entonces puede ser algo asi como esto:

    $("#botonOcultar").click(function(){
    $("#IdDelDiv").hide();
    });
    $("#botonMostrar").click(function(){
    $("#IdDelDiv").show();

    });

    • Marcado como respuesta DaniDeveloper jueves, 17 de agosto de 2017 7:02
    miércoles, 16 de agosto de 2017 16:22

Todas las respuestas

  • A estos efectos, es irrelevante el hecho de que estes usando MVC. El codigo para ocultar el DIV sera un "pedacito" de javascript exactamente igual que el que pondrias en una pagina HTML. Si tienes instalado jQuery en la pagina (la plantilla de aplicacion MVC te lo incorpora de forma predeterminada), entonces puede ser algo asi como esto:

    $("#botonOcultar").click(function(){
    $("#IdDelDiv").hide();
    });
    $("#botonMostrar").click(function(){
    $("#IdDelDiv").show();

    });

    • Marcado como respuesta DaniDeveloper jueves, 17 de agosto de 2017 7:02
    miércoles, 16 de agosto de 2017 16:22
  • Si te refieres a la clase Panel de System.Web, en MVC no lo encontrarás. Con independencia del marco de trabajo que utilices (ASP .Net WebForms, ASP .Net MVC) para mostrar u ocultar elementos del DOM puedes utilizar JavaScript o alguna librería como JQuery, claro, debes contener los elementos en un DIV y el elemento que cambiará el estado de visibilidad deberá estar fuera del DIV, por ejemplo:

    <input type="button" id="btn-estado" value="Mostrar/Ocultar" />
    <div id="id-container">
    	
    </div>
    ---
    <script type="text/javascript">
    
        $(document).ready(function () {
    
    		$('#btn-estado').on('click', function () {
    
    			var container = $('#id-container');
    
    			if (container.css('display') == 'none') {
    				container.fadeIn(400);
    			}
    			else {
    				container.fadeOut(400);
    			}
    		});
    	})
    
    </script>

    Si en tu proyecto se encuentra BootStrap tienes a mano mas de una forma para hacer lo que requieres de una manera simple, por ejemplo Collapse


    Nuestra profesión exige tener pasión por resolver problemas de una manera óptima y eficiente.
    • Marcado como respuesta DaniDeveloper jueves, 17 de agosto de 2017 7:02
    miércoles, 16 de agosto de 2017 18:28
  • Gracias Williams,

    si que tengo bootstrap y el ejemplo que me has pasado me parece bastante útil. Gracias.

    jueves, 17 de agosto de 2017 10:24