Crear un botón de ASP NET con Glyphicon

Si con Bootstrap queremos utilizar un botón que tenga un icono de Glyphicon tenemos que olvidarnos del clásico asp:button y utilizar asp:linkbutton de la siguiente manera:

<asp:LinkButton runat="server" Text="<span class='glyphicon glyphicon-remove'></span>" CssClass="btn btn-default btn-xs" />

Lo que hacemos es darle una clase al linkbutton de Boostrap y dentro del text (innerhtml) la etiqueta span y su contenido.

No olvides que debes de tener los ficheros de css necesarios para que esto funcione, o sea bootstrap.css o bootstrap.min.css.

Crear un botón de ASP NET con Glyphicon

Dar estilo a un control asp dropdownlist con bootstrap

Para dar estilo básico a un control asp con boostrap:

<asp:DropDownList runat="server" ID="ddl" CssClass="form-control" >

Dar estilo a un control asp dropdownlist con bootstrap

Modelo y Base de Datos con Identity en ASP NET

Con la versión 4.5 de .NET Framework se ha incorporado la autenticación basada en Identity. Esto ya lo hablamos en pasadas entradas, ahora vamos a verlo un poquito más a fondo.

Con Identity se crean las siguientes tablas:

• AspNetRoles


• AspNetUserClaims


• AspNetUserLogins


• AspNetUserRoles


• AspNetUsers

En estas tablas se guarda toda la información relacionada con los usuarios. Es en la tabla AspNetUsersr donde  se guardan los siguientes campos:

• Id


• UserName


• PasswordHash


• SecurityStamp


• Discriminator

En la siguiente imagen se muestra la estructura de tablas y los campos de la tabla AspNetUsers:

Ya entrando en el código, si has generado el proyecto web con una de las plantillas que ofrece Visual Studio 2013 verás que en la carpeta “Models” se ha creado un archivo llamado “IdentityModels.cs”. En este fichero existen varias clases que definen la funcionalidad de Identity en la aplicación. Las clases son:

• ApplicationUser. Es la entidad Usuario de aplicación. Hereda de “IdentityUser” e inicialmente está vacía aunque podemos meterle las propiedades que deseemos para personalizar nuestro modelo de usuario (http://go.microsoft.com/fwlink/?LinkID=317594). Si nos fijamos en la clase de la que hereda contiene las siguientes propiedades que se mapean a la base de datos: Id, PasswordHash, SecurityStamp, UserName así como las colecciones que relacionan con las demás tablas.

• ApplicationDbContext. Es la clase que maneja el contexto Entity Framework con la base de datos. De hecho en su constructor coge el connectionstring del web.config para su conexión con la base de datos en este caso “DefaultConnection”.

• UserManager. Es una clase que gestiona operaciones típicas de usuarios con la base de datos. Hereda de “UserStore” y tiene diversos métodos de creación y borrado de usuarios, adicción y eliminación de roles por usuario, búsqueda por nombre o id y muchos más. También tiene gran parte de estos métodos en su modalidad asíncrona. Sin embargo desde aquí no es posible obtener todos los usuarios.


• IdentityHelper. Esta clase estática situada fuera del espacio de nombres “Models”se encarga de sincronizar la base de datos en los registros de usuarios con el comportamiento de la aplicación en lo que se refiere a la autenticación. Cada vez que un registro de un usuario se efectúa correctamente pasará por IdentityHelper para insertarlo en la base de datos y posteriormente autenticarlo en la aplicación.

Después de analizar todo este rollo vamos a ver como podríamos obtener todos los usuarios con Identity. Si utilizamos directamente el contexto “ApplicationDbContext” accederemos a todos los usuarios mediante su propiedad “Users”:

IList<ApplicationUser> users = context.Users.ToList();

Modelo y Base de Datos con Identity en ASP NET

Unobtrusive validation en ASP NET 4.5

Unobstrusive validation (algo así como validación no obstrusiva) es una nueva característica introducida en ASP.NET 4.5. En un escenario normal cuando usamos un validador para validar cualquier control en el lado cliente se genera cierto código javascript automáticamente que se encarga de realizar esa funcionalidad.

Con la característica Unobstrusive Validation no se genera este código javascript pero para realizar la validación utiliza los atributos HTML5 data-*.

Cuando se crea un nuevo proyecto web con Visual Studio 2013 esta característica está por defecto habilitada.

Para manejar el valor en el que se establecerá esta característica podremos hacerlo de dos formas:

• Dentro de <appSettings> en web.config:

Habilitado:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>

Deshabilitado:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>

• En Application_Start dentro del global.asax:

void Application_Start(object sender, EventArgs e)

//Habilitar característica Unobtrusive Validation
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
//Deshabilitar característica Unobtrusive Validation
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

Unobtrusive validation en ASP NET 4.5

Cambiar idioma a Firefox

Para cambiar el idioma a Firefox debemos ir a:

Herramientas -> Opciones -> Contenido

Abajo aparece la opción de idiomas donde podemos gestionar fácilmente los idiomas aceptados por el navegador.

Cambiar idioma a Firefox u otros navegadores es útil para desarrolladores que quieren probar webs que utilicen un idioma u otro en función del idioma del usuario.

Cambiar idioma a Firefox

Key o clave en Entity Framework Code First

Al crear un proyecto con visual studio 2013 que utilice Entity Framework Code First me asaltó la duda de por qué en el modelo no existía en casi ninguna clase la DataAnnotation [Key] que establece que propiedad será la encargada de guardar la clave de la tabla.

Primero hay que indicar que en Entity Framework es absolutamente necesario que cada entidad contenga una clave primaria. En el caso de que no se establezca ninguna clave el generador de la base de datos dará un error en tiempo de ejecución.

Sin embargo si Entity Framework no encuentra la DataAnnotation [Key] irá a buscar una propiedad de la clase que contenga la palabra “Id” (no es case-sensitive) y la asignará automáticamente.

public class Movie
 

[Required, StringLength(100), Display(Name = "Name")]
 public string MovieName get; set; 
 public int Id get; set; 
 

En el ejemplo anterior a la hora de generar la tabla Movie, Entity Framework entenderá que la propiedad “Id” será la encargada de ser la clave.

Key o clave en Entity Framework Code First

Entity Framework Code First

Entre las muchas sorpresas que Microsoft nos viene dando con .NET 4.5 está el progreso que ha hecho la tecnología de Entity Framework esforzándose para que el desarrollador se olvide cada vez más de SQLServer y se pueda centrar en lo que es puramente su trabajo: programar (que no es poco).

Esta última versión (Entity Framework 6) permite utilizar el paradigma de programación Code First (Primero el código). Es cierto que en anteriores versiones se podía utilizar esta técnica pero puedo asegurar que era bastante más complicado que ahora.

¿En qué consiste code first?

Code First te permite primero crear el modelo de datos como clases para posteriormente migrarlo a un sistema de gestión de base de datos. Las clases que se definen para crear el esquema de datos se llaman Entidades o Entity Classes.

Cada propiedad de una clase le corresponde una columna en una tabla equivalente de la base de datos. A estas entidades también se les pueden añadir métodos y funciones.

Entity Framework Code First

Aplicaciones web contra Sitios Web en visual studio

Desde que recuerdo en Visual Studio siempre ha habido dos maneras de crear webs llamadas:

• Aplicaciones Web


• Sitios Web

En Visual Studio 2013 sigue existiendo está filosofía pero… ¿en qué se diferencian las aplicaciones web de los sitios web?

Existen ventajas y desventajas en cada una de las dos implementaciones.

En aplicaciones web:

• Permite utilizar la característica “Editar y continuar” del depurador. Esta característica es un problema en Visual Studio 2010 instalado en Sistemas Operativos de 64 bits ya que no funcionaba correctamente. En Visual Studio 2013 funciona correctamente.


• Permite ejecutar pruebas unitarias en los codebehind de los aspx.


• Puedes crear referencias a todos los archivos de código de la aplicación.


• Es posible crear dependencias de proyecto entre varios proyectos web.


• El compilador puede crear un ensamblado único para todo el sitio.


• Puedes controlar la versión y nombre de ensamblado.


• Es posible evitar situar código fuente en producción.

En sitios web:

• No es necesario compilar el proyecto para implementarlo.


• Es posible actualizar los archivos en producción editándolos directamente.


• No existe un archivo de proyecto (.csproj o .vbproj).


• La ejecución de una página individual no requiere la compilación correcta de todo el sitio web al completo. (En un proyecto de aplicación Web, no pueden existir errores de compilación en cualquier parte del sitio ya que de esta manera no generaría el ensamblado)

Resumiendo y desde mi punto de vista, los sitios web se utilizan para proyectos simples que no requieren de una gran infraestructura de código ni un gran número de dependencias. En cambio para proyectos de gran envergadura y que necesiten cierta arquitectura (3 capas por ejemplo) es mejor utilizar una implementación de proyecto Web.

Aplicaciones web contra Sitios Web en visual studio

Bundling y Minification en ASP.NET 4.5

Bundling es una nueva característica dentro de ASP.NET 4.5 que hace fácil combinar diversos ficheros en un único fichero. Esto es muy recomendable porque acelera sustancialmente la carga de la página y con ello mejora el rendimiento de la aplicación.

No hay que confundir bundling con minification, pero… ¿qué signfica Minification? Seguro que os habéis preguntado en alguna ocasión por qué en muchos ficheros que os descargáis por la red existen dos ficheros uno con extensión min.css o min.js y otro sin él. El fichero min es básicamente el mismo pero en él se eliminan los espacios en blanco no significativos, comentarios y se acortan los nombres de las variables. El objetivo final de esto es acortar el tiempo de carga de estos ficheros.

Los ficheros donde se utilizan estas técnicas son archivos javascript y css.

Bundling y minification se habilitan o deshabilitan en base al valor de la propiedad debug dentro del elemento compilation del web.config.

Si debug=”true” entonces el agrupamiento y la minificación estarán deshabilitadas. Es lógico, si queremos depurar la aplicación y queremos que el código sea legible necesitaremos distintos archivos y líneas de código, no un “tocho” de código dentro de una misma línea.

Si debug=”false” entonces se habilitarán estas dos características.

En un proyecto web creado con plantilla con Visual Studio podremos observar que existe un fichero llamado startup.cs gestionado por OWIN que se ejecuta al iniciar la aplicación.En este fichero se llama a un fichero de configuración de bundling llamado BundleConfig.cs (dentro del directorio App_Start) que se encarga de asignar los Bundling y Minification.

 

 

 

Bundling y Minification en ASP.NET 4.5

Autenticación en Visual Studio 2013

En Visual Studio 2013 han introducido una manera sencilla para establecer el tipo de autenticación que usará la aplicación web.

Estos son los métodos de autenticación en Visual Studio 2013

• Sin autenticación


• Cuentas de usuario individuales: usuarios guardados en base de datos, o cuentas de Facebook, Twitter, Google, Microsoft o de otros proveedores.


• Cuentas profesionales: Active Directory, Windows Azure Active Directory y Office 365.


• Autenticación de Windows

Como podemos comprobar la autenticación de aplicaciones de Visual Studio 2013 ha cambiado notablemente, este aspecto está influido por la nueva filosofía que ha tomado Microsoft para su integración de aplicaciones web en un entorno más actual y no completamente atado a tecnologías propias de Microsoft.

Autenticación en Visual Studio 2013

OWIN: Otra novedad en Visual Studio 2013

Open Web Interface for .NET (OWIN) define una nueva capa de abstración entre el servidor web y una aplicación web. De este modo OWIN permite a las aplicaciones que no les importe en que host esté hospedado. Por ejemplo una aplicación web se puede hospedar en IIS o en un proceso personalizado.

Esta tecnología se conoce también como el proyecto Katana y se inspira en otras tecnologías del estilo node.js.

El problema que intenta solucionar OWIN es desacoplar la dependencia que tenían las aplicaciones ASP.Net con el servidor IIS introduciendo una capa que maneje las peticiones Http.

Sin Open Web Interface for .Net:

Con Open Web Interface for .Net:

OWIN: Otra novedad en Visual Studio 2013

Razor en ASP NET

Desde la aparición de Visual Studio 2010 en las aplicaciones MVC se utiliza Razor pero… ¿qué es Razor en ASP Net?

Razor no es un lenguaje de programación sino que es un código insertado en ficheros .cshtml (c#) o .vbhtml (visual basic) que interpreta el servidor. Es decir, Razor es un marcado que “escapa” el código html para utilizar el que es en realidad el verdadero lenguaje de programación (C# o Visual Basic). El caracter con el que “escapa” el código html es @.

Cuando conocí Razor la primera idea que me vino a la cabeza fue que esto llevaba inventado mucho tiempo pero con otros nombres: asp clásico, php incluso en asp.net se puede “escapar” el código con las etiquetas <%%>. Todo esto es cierto pero la ventaja fundamental que ofrece Razor es su simplicidad que se traduce posteriormente en una mayor legibilidad del código.

Un ejemplo:

ASP.Net Sin Razor:

ASP.Net con Razor:

En mi opinión es muy fácil de aprender, se mejora la legibilidad y más sencillo de escribir. Además en Visual Studio funciona el Intellisense.

Razor en ASP NET

Visual Studio 2013 apuesta por Bootstrap

Del mismo modo que Microsoft se decantó por dar soporte a jquery dentro de sus plantillas de proyectos de Visual Studio 2010 ahora podemos comprobar que con Visual Studio 2013 existen plantillas para desarrollar con bootstrap.

Creo que se han dado cuenta de que no podían prescindir de un framework que hiciera más fácil el diseño web adaptable (responsive design) indispensable hoy en día como todos bien sabemos.

Siempre podemos utilizar Foundation (el gran competidor de bootstrap) aunque yo no lo recomendaría por dos razones. La primera razón es que considero que hay que confiar en las decisiones de Microsoft, ellos son los que mejor conocen su framework y seguro que lo han valorado en su día. La segunda razón, sufrida en mis propias carnes, es que he comprobado que algunos controles asp no se llevan muy bien con Foundation.

Visual Studio 2013 apuesta por Bootstrap

Menús con scroll

En este post explicaré la forma de hacer menús con scroll típicos en sitios web de una sola página.

Antes de nada decir que existen unos cuantos plugins de jquery para realizar webs de una sola página en el que viene implementado ya un menú de este tipo. Por ejemplo son muy conocidos Smint y CoolKitten. En el ejemplo de este post utlizaremos jquery waypoints.

Lo primero que debemos hacer es crear las distintas secciones a los que se dirigirán los enlaces del menú.

...

<div id="seccion_1">...</div>

<div id="seccion_2">...</div>

<div id="seccion_3">...</div>

...

Posteriormente implementaremos el menú con enlaces a cada uno de las secciones establecidas anteriormente.

<div id="menu">

<ul>

<li><a id="menu_seccion1" href="#seccion_1">ir a seccion 1</a></li>

<li><a id="menu_seccion2" href="#seccion_2">ir a seccion 2</a></li>

<li><a id="menu_seccion3" href="#seccion_3">ir a seccion 3</a></li>

</ul>

</div>

Este menú necesitamos dejarlo fijo en algún punto para que sea visible durante todo el scroll de la página. Por ejemplo en nuestro caso lo situaremos debajo de la pantalla. Para ello usaremos css y la propiedad position fixed:

#menu



position:fixed;

bottom:0;

Con todo esto y utilizando únicamente html y css podemos crear un menú con scroll. El problema es si queremos que los elementos del menú se activen o desactiven dependiendo de que sección nos encontremos. Para hacerlo ya necesitaremos javascript. Con jquery y jquery waypoints podemos manejar eventos que se produzcan cuando el usuario se encuentre en una u otra sección de la página. No olvideis importarlo a vuestra página.

$('#seccion_1') .waypoint(function(direction) 

//esto se ejecutará cuando el usurio esté dentro de la sección 1

alert('esto se ejecutará cuando el usurio esté dentro de la sección 1');

Con esto, jquery y un poco de imaginación podemos hacer casi todo. Entre otras cosas cambiar la clase css de cualquier elemento del menú cuando se llegue a la sección indicada.

$('#seccion_1') .waypoint(function(direction) 

$('#menu_seccion1').addClass('menu_active');

Menús con scroll

Imagen en un input type submit

Si queremos poner una imagen en un input type submit es tan sencillo como no poner type=”submit” sino type=”image”. El form donde esté metido el input lo tomará como un botón de enviado del formulario.

<form action="enviar_form.php">

<input type="text" name="nombre"/>

<input title="boton enviar" alt="boton enviar" src="img/mi_imagen.jpg" type="image" />

</form>

</form>

Imagen en un input type submit

Ajustar background image con css

Es posible ajustar background image con css 3 gracias a la propiedad background-size.

El problema que existe con la propiedad background-image de css es que la resolución de la imagen no se adapta al tamaño de la capa y por tanto tampoco de cualquier otro elemento heredando el problema de las diversas resoluciones de pantalla para todos los tipos de dispositivos.

La propiedad background-size pretende solucionar este problema. Como gran parte de las propiedades de css3 cada navegador usa su propia etiqueta para aplicarlo en su renderizado.

.capa_imagen_ajustada



background-image: url('img/fondo.jpg');

-moz-background-size: 100% 100%; /*Firefox 3.6*/

-o-background-size: 100% 100%; /*opera*/

-webkit-background-size: 100% 100%; /*Safari*/

background-size: 100% 100%; /*estandar css3*/

-moz-border-image: url('img/fondo.jpg') 0; /*Firefox 3.5*/

Ajustar background image con css

Bancos de imagenes gratuitos

En este post iré actualizando aquellas webs que sirvan como bancos de imagenes gratuitos.

• Unsplash, es una web con fotografías de una altísima calidad. En esta web no busques iconos o algo por el estilo ya que son fotografías tomadas por profesionales de la imagen.


• Foter, web con  un poco de todo. Incorpora un buscador que a veces no sirve ya que no encuentras lo que necesitas. Imagenes de buena, mediana y mala calidad.

Iré metiendo más según vaya probando por internet.. por favor si conoces alguno que sea interesante no dudes en dejar tu comentario.

Gracias.

Bancos de imagenes gratuitos

Bancos de imagenes gratuitos

En este post iré actualizando aquellas webs que sirvan como bancos de imagenes gratuitos.

• Unsplash, es una web con fotografías de una altísima calidad. En esta web no busques iconos o algo por el estilo ya que son fotografías tomadas por profesionales de la imagen.


• Foter, web con  un poco de todo. Incorpora un buscador que a veces no sirve ya que no encuentras lo que necesitas. Imagenes de buena, mediana y mala calidad.

Iré metiendo más según vaya probando por internet.. por favor si conoces alguno que sea interesante no dudes en dejar tu comentario.

Gracias.

Bancos de imagenes gratuitos

Cambiar src de imagen con jquery

Supongamos que tenemos una imagen como está en nuestro html

<img id="mi_imagen"  src="img/origen_1.jpg"/>

Si queremos cambiar el origen de donde toma la imagen nuestro elemento img podemos utilizar jquery:

$("#mi_imagen").attr("src","img/origen_2.jpg");

Cambiar src de imagen con jquery

Opacidad con css

En este post explicaremos las dos maneras de dar transparencia u opacidad con css.

La manera a utilizar la opacidad dependerá de cómo quieres que se comporten los elementos secundarios. Los elementos secundarios que se encuentren anidados dentro un elemento padre pueden heredar o no esa opacidad.

• Heredar transparencia a elementos secundarios:

#parent



opacity: .5;
-moz-opacity: .5;
filter:alpha(opacity=5);

• No heredar la opacidad a elementos secundarios:

#parent



background:rgba(0,0,10,0.5);

Opacidad con css

Scroll lento a secciones de una página mediante enlaces

Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.

<br /><br />...<br /><br />&lt;div id="seccion_1"&gt;contenido 1&lt;/div&gt;<br /><br />&lt;div id="seccion_2"&gt;contenido 2&lt;/div&gt;<br /><br />...<br /><br />&lt;a href="#seccion_1"&gt;ir a sección 1&lt;/a&gt;<br /><br />&lt;a href="#seccion_2"&gt;ir a sección 2&lt;/a&gt;<br /><br />
La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.
Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.
Después para cada elemento que queramos el efecto de animación usaremos este código:
<br /><br />$('a[href=#seccion_1]').click(function (event) <br /><br />event.stopPropagation();<br /><br />var Position = jQuery('[id="seccion_1"]').offset().top;<br />jQuery('html, body').animate( scrollTop: Position , 1100);<br /><br />return false;<br /><br />);<br /><br />
Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.
Con este valor podemos establecer un scroll lento a secciones de una página.
 
Scroll lento a secciones de una página mediante enlaces

Ajustar una capa a la altura de la pantalla con css

Para ajustar una capa a la altura de la pantalla con css es necesario especificar lo primero las alturas a las etiquetas html y body del documento. Y después ajustarle a la capa que queremos establecer el alto.

<html style="height: 100%;">
 <body style="height: 100%;">
 <div style="height: 100%;">
 <p>
 Make this division 100% height.
 </p>
 </div>
 </body>
</html> 

Ajustar una capa a la altura de la pantalla con css