Como agregar el efecto collapse a un div y activarlo con un boton ASP.NET

Hola chic@s, hoy les traigo un nuevo tutorial de como asignarle el efecto collapse a un div y activarlo con un boton.

Vamos a usar uno de los ejemplos anteriores y solo aplicarle el efecto.

Primero vamos a agregar un div con la clase "collapse" que encierre todos los controles.





Ahora vamos a agregar un boton que active el efecto collapse y despliegue u oculte el div.

en la propiedad data-target, ponemos el id del div al que vamos aafectar con el efecto collapse, arriba no le puse id, pero solo es poner <div id="Controles" class="collapse">.






Ya que utilizamos un boton de asp, el postback que realice este boton no dejará que se mire correctamente el efecto en el div, lo que se hace para reparar este inconveniente es agregar la siguiente funcion javascript.







y eso es todo. Aquí les en el siguiente vídeo como se ve el efecto una vez que lo corremos:

Tambien les dejo el formulario de ejemplo.

Gracias por leerme el dia de hoy, pasen buen dia o tarde o noche.

ejemplo de efecto collapse en div

Agregar datatable jquery a un gridview en ASP.NET usando visual studio 2013

Buenos días chic@s. Hoy les traigo un post a cerca de como agregar el plugin datatable de jquery a un grid view en ASP.NET. Comenzamos:

Lo primero es agregar el javascript de datatable al proyecto. Para eso usamos el nuget manager de visual studio 2013 y buscamos el plugin:




Una vez que seleccionamos esa opción , ponemos en la barra de busqueda " jquery datatable" y visual studio nos muestra el plugin, una vez encontrado , le damos click y le damos install (yo ya lo tengo instalado asi que solo me sale con un check verde).





Una vez instalado, a nuestro proyecto se le agregan las siguientes carpetas:





Estas carpetas contiene los script y los estilos que vamos a utilizar. Ahora lo primero que debemos hacer es hacer referencia al jquery, que ya viene cuando agregamos el bootsrap. (aqui les dejo un post donde sale como agregamos el jquery Agregar jquery). Cabe destacar también que debemos hacer la referencia de los script y estilos en un orden especifico, como sale a continuación:

(Nota: Recuerden que para hacer la referencia solo seleccionamos el script y lo arrastramos con el mouse hasta la hoja que contiene el html y lo colacamos justamente en la posición que se muestra en las imagenes siguientes.)
Primero hacemos la referencia al jquery:




Posteriormente hacemos la referencia al datatable jquery:




Finalmente agregamos la referencia del estilo del datatable:



Ahora que tenemos los script referenciados, usamos la siguiente función

     $(document).ready(function () {
              $(".sem").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
                  "bPaginate": true,
                 
                  "columnDefs": [{
                      "defaultContent": "-",
                      "targets": "_all"
                  }],
                  "bLengthChange": false,
                  "iDisplayLength": 5,
                  "bInfo": false,
                  "language": {
                      "sSearch": "Buscar",
                      "oPaginate": {
                          "sFirst": "Primero",
                          "sLast": "Último",
                          "sNext": "Siguiente",
                          "sPrevious": "Anterior"
                      }
                  }
              });
          });


La colocamos debajo del todo el código. (les dejare un link abajo con los archivos de ejemplo).

la parte que dice ".sem", es parte de la clase con la que referenciamos el gridview.




Como vemos, vinculamos la función datatable con el grid a través de la clase.

Una vez que realizamos esto , corremos el proyecto para verificar si funciono.





Como vemos la función se agrego exitosamente. abajo les dejo el link con el ejemplo.

ejemplo datatable jquery gridview


Muchas gracias por el tiempo que han dedicado a aprender mas. pasen buen dia.