Select2 no funciona correctamente en un modal de Bootstrap en Firefox

En la mayoria de los casos si se tiene un modal con select2 funciona correctamente, pero recientemente he podido notar que en un caso muy particular no funciona como debe ser, es decir no permite hacer una búsqueda dentro del control.

El inconveniente se presenta cuando el modal es mas grande que la ventana y se tiene que hacer scroll del modal, en ese caso no funciona el select2, esto solo sucede en Mozilla Firefox.

La solución a este inconveniente es muy sencilla, pero dificil de encontrar, basta con agregarle una opción al momento de crear el select2.

$('#mySelect2').select2({
        dropdownParent: $('#myModal .modal-body')
    });

Con esto le decimos al control que está dentro de un modal o tamben podemos hacerlo con el siguiente código, antes de llamar al modal:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Con esta última opción se podrá hacer una sola vez y no tener que aplicar el cambio de forma individual, en cualquiera de los casos tendremos funcionando correctamente el select2.

La explicación por parte del motivo por lo que sucede este problema lo pueden encontrar en este enlace.

Leer post completo

Validar complejidad de claves de lado del cliente en ASP .NET

Muchas veces necesitamos en nuestros desarrollos obligar a que el usuario ingrese una clave con cierto nivel de complejidad por razones de seguridad, en este post, detallaré una forma fácil de poder implementar esto en una aplicación ASP .NET de lado del cliente, no solo validando que la clave sea compleja, sino que también indicando el nivel de complejidad mientras va escribiendo.

Introducción

Para poder ejemplificar esto, vamos a crear un formulario de cambio de clave, el cual tendremos estructurado como la imagen anterior, no consideraremos el código para hacer la validación de la clave anterior o el cambio de clave, únicamente nos centraremos en validar la complejidad de la nueva clave e indicarle esto al usuario.

Mostrando el nivel de complejidad

Para realizar esto, recurriremos al control PasswordStrength del Ajax Control Toolkit que nos permitirá establecer algunos parámetros de complejidad que vamos a requerir para la clave y según estos parámetros y criterios definidos nos irá mostrando en pantalla el nivel de complejidad que tiene la clave que estamos escribiendo.

<asp:TextBox runat="server" ID="txtNuevaClave" TextMode="Password" ValidationGroup="Enviar" />

<act:PasswordStrength ID="txtNuevaClave_PasswordStrength" runat="server" 

    Enabled="True" MinimumNumericCharacters="1" PrefixText="Complejidad: " 

    TargetControlID="txtNuevaClave" TextStrengthDescriptions="Baja;Media;Alta" 

    MinimumLowerCaseCharacters="1" PreferredPasswordLength="6" 

    RequiresUpperAndLowerCaseCharacters="True">

</act:PasswordStrength>

Este código nos permitirá ver el efecto que se aprecia en la imagen anterior al momento de digitar la nueva clave, para lo cual necesitamos configurar algunas propiedades:

MinimumNumericCharacters – Esto nos indica como mínimo cuantos caracteres numéricos debe tener la clave.
PrefixText – Es el prefijo que ira al momento de mostrarse la complejidad de la clave.
TargetControlID – Es el control al cual estará asociado esta validación.
TextStrengthDescriptions – Es la descripción que tendrán los distintos niveles de seguridad que consideremos, separados por ponto y coma.
MinimumLowerCaseCharacters – Esto nos indica como mínimo cuantos caracteres en minúscula se debe considerar, pero necesita de la propiedad RequiresUpperAndLowerCaseCharacters para tener efecto.
PreferredPasswordLength – Esto nos indica el tamaño mínimo requerido para considerar la clave en el ultimo nivel de validación, en el caso del ejemplo “Alta”, tener en cuenta que esto solo sirve para evaluar el nivel de complejidad, pero no valida el TextBox que tenga como mínimo esta cantidad de dígitos.
RequiresUpperAndLowerCaseCharacters – Esta propiedad sirve para activar las propiedades de mínimo minúsculas y mayúsculas requeridas.

Con esta configuración mínima, estamos pidiendo una clave que tenga al menos 6 dígitos, con una minúscula y un numero al menos.

Validando el nivel del complejidad

Ya anteriormente hicimos que se muestre el nivel de complejidad de una clave según los parámetros establecidos, pero esto no realiza una validación al momento de enviar estos datos, simplemente nos indica la complejidad que tiene lo que vamos escribiendo.

Entonces para validar la clave, haremos uso del control RegularExpressionValidator que si nos permitirá realizar esta validación con una expresión regular.

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" 

    ControlToValidate="txtNuevaClave" 

    ErrorMessage="La clave debe ser como minimo de 6 digitos y al menos un número" 

    ForeColor="Red" 

    ValidationExpression="(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{6,12})$" 

    ValidationGroup="Enviar">**</asp:RegularExpressionValidator>

<act:ValidatorCalloutExtender ID="RegularExpressionValidator1_ValidatorCalloutExtender" 

    runat="server" Enabled="True" TargetControlID="RegularExpressionValidator1">

</act:ValidatorCalloutExtender>

Aquí tenemos el control con extender del Ajax Control Toolkit agregado para que muestre el mensaje de forma mas amigable.

En este control básicamente configuramos el mensaje que debe mostrarse y la expresión regular que hará la misma validación de mínimo 6 caracteres alfanuméricos.

Con esto logramos exigirle al usuario un cierto nivel de complejidad para su clave y también indicarle el nivel de complejidad que va teniendo el texto que va digitando de una forma muy intuitiva.

Espero les sea de utilidad y si pueden aportar con otras formas alternativas, pues bienvenido.

Leer post completo

Actualizar controles fuera de un UpdatePanel

Nuevamente retomando el blog que últimamente ha estado un poquito de lado, pero a ver si ahora mantenemos la constancia en los posts.

Ahora voy a comentarles sobre algo que es muy común cuando desarrollamos aplicaciones web y trabajamos con controles UpdatePanel, que es tener que actualizar otros controles que se encuentran definidos fuera del UpdatePanel y para lograrlo vamos a plantear un escenario y las formas de hacerlo.

Escenario:

Tenemos algo muy simple, un UpdatePanel con un TextBox y un Button asociado a un evento que enviará el texto a un Label que está fuera del UpdatePanel

protected void btnActualizar_Click(object sender, EventArgs e)
        {
            this.lblMostrar.Text = this.txtEntrada.Text;
        }

Si tal y como está hacemos clic en el botón no pasará nada con el Label, así que para actualizarlo, les mostraré 2 formas de hacer:

Modo 1: Usando ScriptManager.RegisterDataItem

Para lograr esto tenemos vamos a hacer uso del  PageRequestManager  que obtendrá los datos para ponerlos en el Label y tambien con el RegisterDataItem que los enviará como se muestra en el código.

Y también en el evento del botón ponemos esto:

protected void btnActualizar_Click(object sender, EventArgs e)
        {
            scmPrincipal.RegisterDataItem(this.txtEntrada, this.txtEntrada.Text);
        }

Con esto ya podremos actualizar el Label fuera del UpdatePanel cuando presionemos el botón, pero también podemos hacerlo de otra forma, que detallo a continuación.

Modo 2: Usando otro UpdatePanel

Para esto necesitamos cambiar la estructura y poner el Label dentro de otro UpdatePanel pero con la propiedad UpdateMode="Conditional" para actualizarlo desde el botón.

Y en el evento del botón tendríamos lo siguiente:

protected void btnActualizar_Click(object sender, EventArgs e)
        {
            this.lblMostrar.Text = this.txtEntrada.Text;
            this.upnActualizar.Update();
        }

Conclusión

De ambas formas obtendremos la misma funcionalidad, pero ya depende de cada uno como lo usa, dependiendo la estructura de sus formularios y casos.

Espero les sirva de algo y bueno con esto voy retomando el blog, espero ir poniendo mas cosas.

Leer post completo

Editor de Texto en ASP .NET MVC

Cuando se desarrolla una aplicación que va a contender secciones donde se necesita ingresar texto con formato, siempre es muy útil un editor de texto que nos permita esto, estos se usan en diversos tipos de aplicaciones, en esta oportunidad les mostraré como usar el CKEditor con ASP .NET MVC.

Lo primero que hay que hacer es descargarse las librerías, descomprimirlo y copiarlo en el directorio /Content/js/ luego agregar la referencia al archivo ckeditor.js en la vista donde se va a usar o en la masterpage si se desea para toda la aplicación, seria algo similar a esto

<script src="../../Content/js/ckeditor/ckeditor.js" type="text/javascript" ></script>

Con esto ya tenemos la referencia al script a usar, ahora para ponerlo a funcionar agregamos lo siguiente

 

<%= Html.TextArea("Descripcion", "", new { @name = "Descripcion" })%>
<script type="text/javascript">
                //<![CDATA[

                // This call can be placed at any point after the
                // <textarea>, or inside a <head><script> in a
                // window.onload event handler.

                // Replace the <textarea id="editor"> with an CKEditor
                // instance, using default configurations.
                CKEDITOR.replace("Descripcion");

                //]]>
</script>

Con esto podemos logra algo así

Este editor tiene muchas opciones, como mostrar solo algunos comandos, skins, entre otros, los invito a revisarlo, esta muy bueno

Leer post completo