Popup y retorno de valores con MVC 4 + bootstrap

En esta ocasión vamos a mostrar un pequeño ejemplo de cómo abrir un popup con MVC 4 y cómo hacer para generar un valor (o varios) de retorno a la página principal.

Voy a generar una grilla con GRIDMVC y todo el diseño y manejo del popup lo hago con bootstrap 3.0 +. Para descargarlo en el sitio tenemos que hacer esto.

foto1

foto2

foto3

En nuestro Controller vamos a generar una pequeña lista para llenar la grilla.

HTML de página de inicio (donde vamos a poner nuestra grilla y todo el manejo del popup con bootstrap)

Vamos a ir explicando de a poco todo el código anterior:

1ero la generación de la grilla.

Con el método Html.ActionLink puedo generar un HTML donde voy a poner toda la funcionalidad de bootstrap. Es muy importante recordar poner el href=”#” para que al hacer click al link no vaya directamente a la página, sino que sea bootstrap quien dispare el popup.
El atributo data_toggle=”modal” es el que necesita bootstrap para que reconozca el link.
El data_source queda formado con un @Url.Action donde le indico que vaya a Popup/AbrirPopup (pasando previamente por mi Controller de Popup)

2do Contenedor del popup
Es muy importante ver que en la página madre vamos a tener el contendor vacio del popup que con bootstrap vamos a llenar via iframe. El tamaño de este contenedor se puede establecer, dejo el HTML:

3ero la funcion de JS

La función que dispara el popup. Hay que recalcar aqui el evento que atrapa el mensaje de vuelta.

De acá es importante observar la manera que utilizo para intercambiar mensajes entre las 2 páginas. Luego voy a mostrar como lo envío.

El siguiente paso es ver nuestro Controller de Popup. La ventaja de MVC es que me permite tener una sola clase que administre TODOS los popup que pueda generar mi sitio. De esta manera podemos reutilizar mucho código.

Lo único de especial aquí es que tengo una clase, llamada GSQueryString, que me genera parámetros. Más adelante voy a desarrollar un código que encripte esos parámetros para darle mayor seguridad al sitio. Por ahora están en texto plano.

Y por ultimo me resta mostrar el javascript que necesita el popup para funcionar. Aqui lo importante es la linea que me envia datos a la pagina principal.

Por ultimo dejo algunas imágenes de cómo funciona el ejemplo y adjunto un link a Google Drive para que se pueda descargar.
Saludos.
Dudas, preguntas, comentarios tambien pueden dejarlos en trytocatch.arg@gmail.com

foto4

foto5

foto6

LINK A GOOGLE DRIVE
La contraseña es: www.trytocatch.com

noviembre 25, 2014     admin     MVC, Pop-Up     , , ,      comment

Función Row_number con un valor de inicio

En SQL Server existe una función denominada ROW_NUMBER() que es muy sencilla de utilizar y nos devuelve de manera secuencial el número de la fila que toda la Query, comenzando por 1.

El ejemplo mas sencillo es (yo siempre utilizo mis tablas con la columna ID):

Acá podemos ver el resultado que nos devolvería esta queryimg1

Entonces si queremos hacer una secuencialidad de registros entre 2 queries, solamente tenemos que hacer lo siguiente:

La segunda query comienza a contar sumando la variable que le ingreso. Muy simple y rápido.
Saludos.

junio 4, 2013     admin     SQL     , , , , ,      Comentarios desactivados

Año nuevo, Jquery Nueva (?)

Las grandes cosas están construidas por pequeños elementos que hacen nuestra vida feliz y placentera. En este pequeño post voy a ir enumerando pequeños detalles de JQUERY que nos van a permitir solucionar problemas en nuestra interface ASP.NET con transparencia y sencillez.

Ejemplo 1: Cambio de valores de un input/textbox/label

En la cabecera tomamos siempre el archivo JS del site de JQUERY y lo insertamos en el

Y finalmente insertamos el ejemplo de JQUERY para realizar el cambio de valores usando el método html()

Ejemplo 2: Generar un Postback con JQUERY (no AJAX)

En este ejemplo vemos como generar un postback desde jquery sin usar las funciones de AJAX. Sino un postback tradicional.

Primero como siempre nuestra cabecera

Formamos nuestro HTML con un botón (que es el encargado de realizar el postback), un link y un input oculto que nos servirá para manejar diferentes orígenes de ese postback.

Y en este caso el script de jquery se forma de la siguiente manera. El valor que se ingresa en txtoculto me permite diferencia de donde viene el postback para poder realizar diferentes acciones.

Y para atrapar lo realizado en el cliente, vamos al código de servidor.

Espero que estos pequeños ejemplos sirvan para grandes resultados. Saludos. Hasta la próxima.

marzo 7, 2013     Fernando Sanchez     Javascript, Jquery     , , , , , , ,      Comentarios desactivados

Atributos en .NET y la punta del Iceberg de Reflection

Hace un tiempo, con un desarrollo ya avanzado, me tuve que enfrentar a una disyuntiva. Generada todas mis clases de negocios con sus correspondientes propiedades necesitaba realizar un algoritmo que me permita encriptar determinados valores de esas propiedades al momento de persistirlas en la base y desencriptarlas al momento de ser consultadas.

Buscando una solución llegue a la clase System.Attribute que me ofrecía .NET, que me permitía agregarle un poco de información a las clases sin tener que rescribirlas todas soportando la nueva funcionalidad. De esta manera, y con la ayuda del TodoPoderoso Señor Reflection, obtuve una manera rápida, y que no me generó una baja en la performance de mi sistema, para poder recorrer las clases y saber cual atributo debía encriptar/desencriptar.

Vamos al ejemplo para explicar un poco como funciona:

1- Paso, crear nuestro Atributo personalizado:

Se puede notar que que el tag AttributeUsage me permite usar mi atributo solamente sobre lo que yo deseo, en mi caso propiedades pero pueden ser lo que uno quiera: delegados, enum`s, eventos, interfaces, etc

image

2-Tagear a las propiedades de las clases que queremos a attributear (?) de esta manera: _

y ahora resta recorrer la clase con Reflection de esta manera:

Ahi es donde está la punta del iceberg de Reflection. No vamos en ese post a adentrarnos sobre este tema.

Espero que les sirva, saludos.

-código fuente en SkyDrive:

agosto 7, 2012     Fernando Sanchez     .NET, C#, General, VB.NET     , , , , ,      Comentarios desactivados

Tips: Manejo de Div desde el servidor y del HTML

Existen varias formas de ocultar y mostrar etiquetas <div> en nuestra Web, en general son maneras para mostrar información útil al usuario en el momento en que él la necesita y ocultarla cuando no la necesite. De esta manera le damos el control al usuario de que vea lo que él desee, en el momento en que lo deseé.

Ya anteriormente comente un pequeño tips para manejar los TRs

La primera manera es la mas simple y permite hacerlo desde el servidor, en un postback:

Lo importante en este caso es el runat= server que insertamos en el DIV, de esta manera lo tendremos como un objeto en el servidor.
Simplemente manejamos el estado visible true/false del div como un objeto mas.

Saludos.

mayo 9, 2012     Fernando Sanchez     HTML     , , , , ,      Comentarios desactivados

Recorrer todos los controles de una página ASP.NET

Buscando la manera de encontrar una serie de Gridview en una página es que llegué a crear esta función. Que es básicamente recorrer los controles de manera recursiva porque un control puede contener a otros controles en su interior. En mi caso era solamente ocultar el FooterRow de las Grillas (Gridview) y tengo en cuenta que cuando la grilla no tiene rows la oculto directamente.

El código en VB:

[sourcecode language=”vb”]
For Each ctrl As Control In Page.Controls
Dim gv As GridView = TryCast(ctrl, GridView)
If gv Is Nothing Then
RecorrerColeccion(ctrl)
Else
If gv.Rows.Count > 0 Then
gv.FooterRow.Visible = False
Else
gv.Visible = False
End If
End If
Next
[/sourcecode]

Acá esta la función recursiva RecorrerColeccion:

[sourcecode language=”vb”]
Sub RecorrerColeccion(ByVal parentCtrl As Control)
For Each pctrl As Control In parentCtrl.Controls
Dim gv As GridView = TryCast(pctrl, GridView)
If gv Is Nothing Then
RecorrerColeccion(pctrl)
Else
If gv.Rows.Count > 0 Then
gv.FooterRow.Visible = False
Else
gv.Visible = False
End If
End If
Next
End Sub
[/sourcecode]

Y acá esta el mismo ejemplo en C#:

[sourcecode language=”csharp”]
foreach (Control ctrl in Page.Controls) {
GridView gv = ctrl as GridView;
if (gv == null) {
RecorrerColeccion(ctrl);
} else {
if (gv.Rows.Count > 0) {
gv.FooterRow.Visible = false;
} else {
gv.Visible = false;
}
}
}

public void RecorrerColeccion(Control parentCtrl)
{
foreach (Control pctrl in parentCtrl.Controls) {
GridView gv = pctrl as GridView;
if (gv == null) {
RecorrerColeccion(pctrl);
} else {
if (gv.Rows.Count > 0) {
gv.FooterRow.Visible = false;
} else {
gv.Visible = false;
}
}
}
}
[/sourcecode]

Espero que les resuelva el problema como a mi.

Saludos.

abril 17, 2012     Fernando Sanchez     asp.net, GridView     , , , , ,      1 comment

Deshabilitar el botón de Login en el postback

Voy a mostrar un ejemplo muy sencillo y practico de como deshabilitar el botón de login cuando el usuario le da click para evitar el doble post-back.

El ejemplo esta testeado en IE 7, Firefox 3.0.11 y Chrone 2.0

Voy a mostrar todo el HTML de la pagina de una pagina de login y luego voy a explicar los 2 puntos que hacen que funcione.

El HTML es este:


































































Del HTML observamos 2 puntos importantes el primero es la propiedad submitdisabledcontrols en true. Gracias a este propiedad podemos forzar el postback del botón cuando éste está bloqueado.


Y el 2do punto es el código javascript del botón de login:


Aquí, en la propiedad OnClientClick, es donde ingresamos todo el código javascript, que consta del cambio del Label, el bloqueo del botón y el postback de la pagina. Cabe destacar que el __doPostback tiene que ir ultimo para que realice el postback después de hacer los cambios visibles en el cliente.

Bueno realmente es muy sencillo, es simple y es claro (kuak)

Saludos.

junio 20, 2009     Fernando Sanchez     Javascript     , , , , ,      Comentarios desactivados

Un solo RowDataBound para varias GridView

Suele pasar que tengamos mas de una grilla (gridView en .NET 2.0) en una misma pagina Web y es incomodo, cuando se necesita que cada fila tenga un comportamiento, copiar y pegar código para cada grilla en el evento RowDataBound. Por ejemplo, si quiero a cada fila agregarle algo de Javascript para su validación o simplemente cambiar de color esa fila.

Este ejemplo muetra como enlazar un solo evento RowDataBound para las grillas que sean necesarias en un misma pagina. Esta hecho en  ASP.NET (VB.NET) 2.0

Una vez creado el proyecto y agregada las 2 GridView, simplemente en el Code Behind y nos paramos sobre una GridView.

foto0

Y luego en sus eventos vamos al RowDataBound:

foto01

Una vez que nos genero el código simplemente vamos hacia el handles (que esta al final) con comas vamos agregando todos los objetos que queremos que ese evento maneje:

foto1

Ahora bien, la pregunta es simple: ¿Como distingo una Grilla de Otra?, simple:

Bastante sencillo. Y así es como nos queda:

fotofinal

Adjunto el proyecto aqui

Saludos.

julio 28, 2008     Fernando Sanchez     GridView     , , , ,      1 comment

   


© Try To Catch - Wordpress Hosting by Dattatec