Demo de datos!

Demo de lo que subí anteayer.

Perdón por las demoras

Y segunda parte

MVC3 - Introducción al Entity Framework y datos.

Primera parte.

Mañana pongo la clase del sábado y termino de armar la ensalada!


Saludos

MVC3 - Clase 2. Parte 2 - Acciones

Bueno, esta viene más divertida:
Primero la teórica:

Y luego la práctica, que se pone interesantííííííísima!

¿Comentarios? ¿Sugerencias?

MVC3 - Clase 2. Controladores. Parte 1.

Estimados Amigos, vamos a ir por partes porque esta clase se va a hacer larga.
Parte 1. Controladores

Parte 2: Parámetros

El UpdateProgress y finale ma non troppo

Jóvenes: perdón por la demora, final del módulo de AJAX.

Saludos a todos y gracias por la paciencia!

El Update Panel en ASP.Net Ajax

El update panel y dos entregas por el precio de una.

La demo para usarlo, que está buenísima!

¡Disfruten, muchachos, que la vida es corta!

ASP.Net AJAX. El ScriptManager y con qué se come

Segunda parte.

Ajax y Javascript Parte I - Introducción

Gente, va el primer video de la clase prometida: AJAX y JavaScript.

Acceso a datos - El objectDataSource - Parte 2

Lo prometido es deuda: Segunda parte.

Acceso a datos - El objectDataSource - Parte 1

Seguimos ahora con los tutoriales de Datos.

Para bajar las bases de datos, sigan este tutorial.

Y aquí está el tutoriald de datos:

A la noche, la segunda parte!

Saludos!

Controles en ASP.Net - Validadores

¡Me cansé de escribir! Ahora vamos a seguir con los tutoriales en formato de video.

¡Cuéntenme qué les parece!

Controles en ASP.Net

Hoy vamos a hacer una pequeña práctica sobre el uso de controles en ASP.Net. Nuestras aplicaciones muestran datos, y, para mostrarlas, se valen de controles.
Vamos entonces a crear un nuevo proyecto en VWD, que se llame "Controles" (por poner un nombre creativo) ;)
La plantilla que vamos a seleccionar es la de "Aplicación Web Vacía" dentro de las plantillas instaladas de Visual C# para Web

Vamos a agregar entonces un nuevo elemento (un nuevo formulario web) donde vamos a comenzar a trabajar con los controles de la caja de herramientas. Al nuevo formulario le pondremos como nombre Default.Aspx. Siempre que agreguemos un formulario nuevo a nuestra solución vacía, ese será el formulario de inicio del proyecto, así que no va a hacer falta setearlo como formulario de inicio. Además, casi todas las aplicaciones web tienen default.aspx como formulario de inicio, así que menos vamos a necesitar setearlo como formulario de inicio.

En este nuevo formulario que acabamos de agregar, vamos a agregar una nueva tabla.Presionamos F7 para que nos quede el formulario en modo "Diseño", posicionamos el cursor en el "div" que está dibujado y vamos al menú "Tabla", y de allí a "Insertar Tabla". Nos aparece el siguiente cuadro de diálogo:

Nuestra tabla tiene que tener 4 filas por dos columnas, de momento. Presionamos "Aceptar" y la tabla se inserta. Tomamos ahora con el cursor el divisor de las columnas y hacemos click y deslizamos hasta dejar de 160 píxeles de ancho. Luego ponemos en las filas las palabras "Nombre", "Apellido", y "Fecha de Nacimiento" y nuestro formulario quedará así:

Bien, ahora, en los casilleros de la derecha, agregaremos algunos controles: en primer lugar, vamos a agregar un Textbox en la primer fila, y vamos a cambiar su ID por "NombreTextBox", copiamos este textbox a la fila inmediata inferior y cambiamos su ID por "ApellidoTextBox". por último vamos a agregar un DropDownList (un combo desplegable) al que vamos a poner por ID ProvinciasDropDownList. Ahora, hacemos click en el smarttag (el signo de mayor a la derecha) del ProvinciasDropDownList y hacemos click en "Editar Items"

Usando el cuadro de diálogo, vamos a agregar varias provincias, las que más simpáticas les caigan:

Para comprender como funcionan cada uno de los listitems que se agregaron, vamos a poner en el texto Seleccionar, Salta, Buenos Aires, San Luis, San Juan, Mendoza, La Pampa, Córdoba y La Rioja y en el valor, para seleccionar queda vacío, y para las provincias, la letra del código postal de la provincia, respectivamente A, B, D, J, M, L, X, y F.
Ahora, vamos a ver un problemita que tiene el framework, una pavada, pero mejor arreglarlo: vamos a pasar a la vista de diseño, y ver los listitems que se generaron a partir de este cuadro de diálogo:

Nos queda precioso: pero cuando se genera el HTML el primer listitem (que no tiene Value) nos va a generar un option HTML que va a tener el mismo valor que el texto. Una pavada, pero para evitarlo, tenemos que poner en la definición asp:listitem Value="" dentro del signo mayor y menor.
Agregamos un label debajo de la tabla, y le cambiamos el ID por "ResultadoEtiqueta". Ya sé que los nombres quedan espantosos, pero hay que seguir la convención que agarramos al principio...
Bien: vamos a dar los últimos toques: seleccionamos las dos celdas de la última fila, hacemos click derecho con el mouse sobre las celdas ya seleccionadas y seleccionamos modificar>Fusionar Celdas. Teniendo esa celda única que se fusionó, vamos al menú de formato y ponemos "Centrar" en alineación ( o en propiedades de la celda, en Align "Center".
Ahora, a esta celda nueva, agregamos un botón, y a ese botón le vamos a poner como ID "BotonEnviar", y como Texto "Enviar".
Hacemos doble click en el botón, y nos vamos a la vista de CodeBehind donde vamos a escribir el código para que se ejecute en el servidor cada vez que hagamos click en el botón del lado del cliente (los botones por default generan un postback al servidor)
Agregamos el siguiente código:

¿Qué es lo que hace este código? Le asigna al texto ResultadosEtiqueta el valor del textbox de nombre, el de apellidos y el del item seleccionado del provinciasdropdownlist, concatenándolos con un espacio para separar nombre y apellidos y la provincia a la que pertenece.
Compilamos y corremos nuestro sitio, presionando Ctrl + F5, o en su defecto Ctrl + Shift + W.
Aparece nuestra página, escribimos nuestro nombre, apellido y provincia, y presionamos el botón y Voilá! tenemos una página funcional.

Tutorial: Crear un sitio seguro en ASP.Net Web Forms. (Parte III)

Seguimos, luego de estas "cortitas vacaciones" con la configuración de seguridad del sitio.
¿Recuerdan que en la clase vimos un sitio web que nos servía para Configurar la seguridad? Podemos acceder a ese sitio de configuración desde la barra de herramientas del explorador de soluciones, así:

Hacemos click en ese botón y nos aparece el famoso sitio de configuración:

Vamos a hacer click en la pestaña de seguridad, para acceder a las opciones de configuración de seguridad.
Como nuestra aplicación no tiene seteada ninguna configuración de seguridad, nos da un mensaje que dice que la configuración de autenticación de nuestra aplicación es la de Windows (es la configuración por default, como vimos, la aplicación le cede al Internet Information Server la administración de permisos):

 Si hacemos click en "seleccionar tipo de autenticación (o directamente en la pestaña "Proveedor" en el menú superior, vamos a acceder a la pantalla para seleccionar el tipo de proveedor:

En esta pantalla tenemos que seleccionar la opción "desde internet", porque la idea es que tengamos acceso a formularios web que nos permitan pasar nuestras credenciales de autenticación. Seleccionamos esa opción, presionamos el botón "Listo" y ya casi estamos.
Volvamos a la pantalla de seguridad: vamos a hacer click en la sección "Funciones", donde dice "Habilitar Roles" (no se pusieron de acuerdo con el nombre).

una vez que están habilitadas, queda así

Hacemos click, en "Crear o administrar funciones" y creamos un rol "administradores"

Vamos ahora a crear un nuevo usuario llamado "Administrador" con todas sus características, y tildamos en "funciones" la "función" "Administradores":

Hacemos click en "Crear Usuario" y volvemos a nuestro proyecto.
Veamos ahora qué pasó con nuestra aplicación con todas estas "modificaciones" que hicimos:
Hagamos click en el botón de "Ver todos los archivos" y luego en "Actualizar" (están arriba del explorador de soluciones)

Hagamos click derecho en la carpeta "App_Data" y luego click en la opción "Incluir en el proyecto". Luego, si hacemos doble click en el archivo "ASPNETDB.MDF", vamos a acceder al explorador de base de datos, y veremos el contenido de la base de datos. Hagamos Click derecho en la tabla "aspnet_Users" y veremos los datos (algunos encriptados) de nuestro usuario administrador recientemente creado:

Vamos por último al archivo web.config que está en la raíz de la aplicación:

¡Epa, epa, epa, ch'amigo, compadre! ¿Dónde está toda nuestra configuración de seguridad? Pasa que la aplicación toma la configuración de seguridad por defecto. Si la base de datos está dentro de App_data y se llama ASPNETDB.MDF, no hace falta definir una cadena de conexión. Pero además, el tag <authentication mode="forms"< está tomando todos los valores por defecto que tiene ese tag, que explícitamente serían:

<forms cookieless="UseDeviceProfile" defaulturl="default.aspx" domain="" enablecrossappredirects="false" loginurl="login.aspx" name=".ASPXAUTH" path="/" protection="All" requiressl="false" slidingexpiration="true" timeout="30">
   <credentials passwordformat="SHA1">
</credentials></forms>

En la próxima entrega vamos a desmenuzar un poquito estos valores, y a agregar todos los controles para agregar usuarios a nuestra aplicación.

Tutorial: Crear un sitio seguro en ASP.Net Web Forms. (Parte II)

En la parte anterior del tutorial, quedó pendiente el tema de la estructura del sitio web.
Vamos a hacerlo lo más sencillo posible, con una cabecera, un menú lateral de navegación y el resto para contenido.
Agregamos a nuestro proyecto una carpeta que llamaremos "css", y en esa carpeta agregaremos un nuevo item "hoja de estilo" que llamaremos web.css.
En el archivo nuevamente creado, vamos a crear primero la sección de la cabecera. Para ello, agregaremos otra carpeta, llamada "img" en la raíz del proyecto, y en esa carpeta agregamos el siguiente archivo:

Primero definimos la sección body, que es la que nos define toda la página
body
{
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Arial,Verdana;
}

Sencillo: 0 de márgen y relleno. Blanco como color de fondo, y la familia de fuentes, Arial, o si no existe verdana.

Listo. Seguimos con la sección headercontent, que va a ser la que nos de formato a nuestra cabecera:

#headercontent
{
    border-style: solid;
    width: 100%;
    height: 70px;
    margin: 0;
    border-color: #333;
    border-width: 0 0 1px 0;
    background-image: url('../img/logo.PNG');
    background-repeat: no-repeat;
    background-position: right center;
    }
Bien. Nótese que cuando vamos a utilizar un estilo CSS y queremos que identifique al elemento que lo lleve por el nombre, tenemos que anticipar el nombre de la sección con un "#" Lo que estamos haciendo es  darle un formato general a la cabecera, va a tener un ancho del 100%,  alto de70 píxeles, sin margen, un borde inferior de 1 pixel y de un color gris oscuro, y va a tener la imagen sin repetir a la derecha y centrado.
Luego, creamos la sección que va a tener el menú, en el lateral izquierdo.

#leftcontent
{
    float: left;
    width: 20%;
    padding: 20px;
}

Este es más fácil, lo único que le decimos es que ocupa el 20% que flota a la izquierda (es decir que se pone en primer lugar a la izquierda) y le dejamos un relleno (padding) de 20 píxeles.

Algo parecido es el contenedor que va a tener nuestro contenido principal:

#rightcontent

{

    width: 75%;

    float: right;

    color: #000;

    padding: 5px;

}

Casi lo mismo que el otro, con una aclaración extra que es el color de la letra, que va a ser negro (#000).

Bien. Podemos seguir.

Ahora volvemos a editar la página maestra, para que incluya los estilos que creamos

Bien, lo primero que hay que ver es que agregamos el link al archivo CSS que acabamos de crear. esto lo hacemos con la siguiente línea:

Pasamos a la vista diseño, y arrastramos, desde la pestaña de navegación un control Treeview, al que le vamos a hacer click en el triangulito que tiene en la parte superior derecha, y del menú desplegable vamos a elegir el origen de datos y seleccionamos "" como se ve en la figura:

Nos aparece entonces el siguiente diálogo:

Seleccionamos "Mapa del sitio", presionamos aceptar y ¡Listo! ya tenemos la estructura del sitio lista para arrancar con seguridad.
El sitio nos queda entonces así:

Mañana continuamos con la configuración de seguridad.

Tutorial: Crear un sitio seguro en ASP.Net Web Forms.

En esta primer entrega vamos a crear un nuevo proyecto, generar la estructura del sitio, la presentación visual y poner en funcionamiento todos los controles necesarios para hacer que nuestro sitio tenga áreas protegidas por contraseña, y extender la funcionalidad de seguridad para agregar algunos datos personales del usuario, como nombre, apellido, etc.
Comenzamos entonces con un nuevo sitio vacío, seleccionando del menú del Visual Studio 2010 Express "Crear Nuevo Proyecto" y de las plantillas instaladas en "Visual C#", "Web", seleccionamos "Aplicación Web Vacía de ASP.Net. Cambiamos el nombre del proyecto a WebSegura, y dejamos el resto de las opciones tal como están.

(Click para ampliar la imagen)

Una vez creada la solución con el proyecto, vamos a empezar por agregar la Master Page. Recordemos que la master page nos va a servir como "plantilla" de todas las otras páginas que la usen más tarde, así que vamos a poner un poco de empeño en el diseño de esta.

Vamos a ponerle como nombre "web.master", así nos queda luego en la solución junto con todas las páginas de configuración del sitio (web.config, web.sitemap, web.css, que iremos creando a lo largo del ejercicio)
En la Master Page, vamos a dejar todo como está, lo único que vamos a cambiar es el nombre de los ContentPlaceHolders, llamando "Cabecera" al que se llama "Head" y "Principal" al que se llama ContentPlaceHolder1, luego trabajaremos sobre los contenidos generales, estilos, etc.
El código nos quedaría así, entonces:

Por ahora vamos a agregar las páginas que nos hagan falta para esta primer parte de la aplicación:
Agregamos seis nuevas páginas, seleccionando "Formulario Web Forms que utiliza una página maestra" (por estrafalario que suene el nombre), y nombramos a estas páginas: Default.aspx, CambiarPassword.aspx, CrearCuenta.aspx, OlvidePassword.aspx, Ingresar.aspx y AdministrarCuentas.aspx. Cada vez que agregamos uno, Visual Studio nos pide que seleccionemos nuestra página Maestra, lo que haremos seleccionando la única página maestra que tenemos en la solución:

(Click para ampliar la imagen)

Agregaremos ahora un archivo especial, que nos va a servir para administrar el menú de nuestra aplicación. Este archivo se llama web.sitemap, 

(Click para ampliar la imagen)

Terminado el agregado de páginas, nuestro proyecto quedará así:
Con esto ya tenemos bastante para trabajar.
Modificamos el web.Sitemap para que refleje nuestra estructura de páginas:

Terminamos con esto. Mañana vamos a configurar la seguridad.

Saludos cordiales