![]()
Hola que tal, seguimos con estos tips de ASP.NET Web API, esta vez veremos como restringir por IP el acceso a nuestra API, para esto vamos a crear una lista de IP permitidas, luego crearemos un Filtro global , pero primero vamos por parte, en la carpeta Model, voy a crear la siguiente clase:
public class AutorizacionModel
{
public static Boolean ObtIPAutorizadas(String ip)
{
var ips = new List<string>();
ips.Add("127.0.0.1");
ips.Add("::1");
return ips.Contains(ip);
}
}
Como puedes ver, esta función devuelve verdadero o falso si es que la IP que entra como argumento está dentro de la lista de IPs, en este caso agrego la dirección loopback 127.0.0.1 (IPV4) y ::1 que es la loopback de IPv6.
Luego creamos un Filtro que herede de ActionFilterAtribute:
public class FiltroIPAttribute: ActionFilterAttribute
{
public override void OnActionExecuting(HttpActionContext actionContext)
{
var context = actionContext.Request.Properties["MS_HttpContext"] as
System.Web.HttpContextBase;
string ip = context.Request.UserHostAddress;
if (!AutorizacionModel.ObtIPAutorizadas(ip)){
actionContext.Response = new HttpResponseMessage
(System.Net.HttpStatusCode.Forbidden)
{
Content = new StringContent("IP NO AUTORIZADA")
};
return;
}
}
}
En este filtro obtenemos la IP del cliente que esta haciendo la petición en el Web API, luego vamos a poder determinar si la IP está dentro de la lista llamando al método del Modelo que habíamos comentado anteriormente. En el caso que no exista dentro de la lista, enviamos un mensaje HttpStatusCode.Forbidden (Prohibido).
Luego lo único que nos falta es agregar el Filtro en el Global.asax
GlobalConfiguration.Configuration.Filters.Add(new FiltroIPAttribute());
Y estamos listos, vamos a probar ahora , con una IP que no está en la lista, y veremos:
Tenemos el mensaje IP NO AUTORIZADA y el código de error 403 de prohibido, es decir, funcionando como queríamos.
Espero que te sea de utilidad
@chalalo
Hola, vamos a ver rápidamente un tip que encuentro de bastante utilidad para determinar si nuestra web api se está ejecutando en un entorno seguro, al menos a nivel de https. Lo anterior lo vamos a lograr mediantes los customfilters, puedes ver un tutorial de Stephen Walther acá http://stephenwalther.com/archive/2012/03/05/introduction-to-the-asp-net-web-api.aspx para revisar el tema de los filtros.
Entonces vamos a crear el Filtro , al que he llamado VerificaHttpsAttribute:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Web;
using System.Web.Http.Controllers;
using System.Web.Http.Filters;
namespace WebAPITest
{
public class VerificaHttpsAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(HttpActionContext actionContext)
{
if (!String.Equals(actionContext.Request.RequestUri.Scheme, "https",
StringComparison.OrdinalIgnoreCase))
{
actionContext.Response = new HttpResponseMessage
(System.Net.HttpStatusCode.BadRequest)
{
Content = new StringContent("Se requiere HTTPS")
};
return;
}
}
}
Como vez, se hace la comparación sobre el string https que viene en el RequestURI.Scheme para determinar si se está ejecutando la Web API en una conexión segura.
Luego hay que agregar este filtro global al global.asax , de manera de no agregarlo por contraolador, por lo que vamos agregar:
GlobalConfiguration.Configuration.Filters.Add(new VerificaHttpsAttribute());
Y listo, ahora si ejecutamos la aplicación:
Y como no estamos en un ambiente https, nos envía la información 
Eso!, nos vemos en el siguiente articulo.
Saludos,
@chalalo
Esta es una muy buena noticia, algo que otros editores ya incluían nativamente o como plugin, tales como Notepad++ o Sublime entre otros, que es el Zend Coding, que es una sintaxis que nos permite generar de mucho más rápido código HTML/XML/XSL. Puedes revisar más documentación sobre Zend Coding acá http://code.google.com/p/zen-coding/.
Y ahora es el turno de Visual Studio 2012, en el cual podemos instalarle esta característica como parte del Web Essentials 2012 desde acá http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
Una vez instalado podemos probarlo, voy a crear una nueva página HTML, y vamos a generar una lista no ordenada:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- Escribe esto y apreta Tab al final -->
ul[data-bind="foreach:personas"]>li*4>span{Persona $$}
<!-- Obtienes esto -->
<ul data-bind="foreach:personas">
<li><span>Persona 01</span></li>
<li><span>Persona 02</span></li>
<li><span>Persona 03</span></li>
<li><span>Persona 04</span></li>
</ul>
</body>
</html>
Podemos concatenar algunas combinaciones interesantes que si las dominamos, pueden acelerar nuestra escritura de código, por ejemplo si necesito un botón con Id, clase css, values y con un atributo customizado, podemos escribir (recuerda presionar la tecla tab al final):
button[data-icon="gear"]#IdBoton.clase{Titulo Boton}
y obtendremos lo siguiente:
<button id="IdBoton" data-icon="gear" class="clase">Titulo Boton</button>
Sigamos con los ejemplos, si necesitamos crear un elemento input con ciertas propiedades, dentro de un div que se llama datos, dentro de un footer, escribimos:
footer>div#datos>input[placeholder="IngreseNombre" type="text" required=true].csstexto
Obtenemos:
<footer>
<div id="datos">
<input type="text" value="" placeholder="IngreseNombre"
required="true" class="csstexto" />
</div>
</footer>
Muy bueno!, pero hay muchos más ejemplos que podemos revisar, mira está página para que veas posibilidades interesantes.
http://www.johnpapa.net/zen-coding-in-visual-studio-2012/
Puedes buscar más información en :
Saludos
@chalalo
Hola, este es un post que quería escribir hace bastante tiempo, pero el ajetreo del día a día en estos últimos meses ha sido intenso. Pero bueno, quiero hablar un poco de WebMatrix y el por que deberíamos considerarlo como una herramienta seria al momento de desarrollar.
Veamos un poco las características de WebMatrix 2 que lo destacan y que hacen que sea más que solo un pequeño editor de código (como algunos piensan).
Totalmente Gratuito
 |
Primero que nada WebMatrix es totalmente gratis, no tienes que pagar nada por él, tampoco debes pagar cuando liberas algo a producción, no hay versiones de prueba, ni límites en el periodo de uso o cualquier desembolso de tu parte. Lo puedes decargar desde www.asp.net/webmatrix con el universal installer, así de fácil. |
Soporte HTML, CSS y Javascript
Mucho más que un simple editor de texto vas a tener una completo soporte de intellisense, outlining de código, validación de sintaxis, formateo del mismo. También tenemos un editor JavaScript con soporte para el autoformato e IntelliSense.
En el caso que quieras activar la autocompletación de código jquery puedes ver este post http://geeks.ms/blogs/gperez/archive/2011/11/11/tips-activar-autocompletaci-243-n-de-c-243-digo-jquery-en-webmatrix-beta-2.aspx
Además el editor CSS tiene mejores facilidades para su desarrollo, por ejemplo tenemos la ayuda cuando vamos a seleccionar un color:
Puedes ver estos videos relacionados con estas características de WebMatrix
How to use the Color Picker in WebMatrix
How to use LESS CSS inside of WebMatrix
How to use the Sass editor inside of WebMatrix
Soporte para varios lenguajes
Podemos seleccionar una amplia gama de lenguajes, programas en PHP? Perfecto!, lo puedes utilizar , HTML? CSS? JavaScript, JSON, CoffeScript, tienes una completa lista para seleccionar.
Un punto importante son las ASP.NET Web Pages, que no es lo mismo que las ASP.NET Web Forms, las primeras se desarrollan con una sintáxis llamada Razor, la cual es muy cómoda de utilizar, puedes ver más sobre razor en:
http://www.asp.net/web-pages/overview/whats-new/top-features-in-web-pages-2
Por ejemplo, si necesitas utilizar PHP y piensa que ahora necesitas instalar Apache, el servidor IIS Express que viene con WebMatrix de puede ayudar, en la configuración del sitio puedes seleccionar la opción “Habilitar PHP” y de inmediato, si no lo tienes ya instalado, WebMatrix va a instalar por ti PHP para IIS Express
Bases de datos
Sin duda, esto es algo que destaca a WebMatrix de otros “editores”, ya que WebMatrix tiene la capacidad de conectarse a SQL Server, MySQL y también agregar Bases de Datos SQL Server CE (Base de datos basada en archivos que no necesita un motor corriendo)
Obviamente luego tendrás que crear las tablas, y en este sentido WebMatrix nos provee de una interfaz limpia y simplificada para agregarlas junto a la definición de campos.
Puedes ver que también podemos crear consulta sobre los datos y tenemos la posibilidad de migrar desde SQL Server CE a SQL Server.
También tenemos Mejoras visuales en el manejador de datos, cuando copiamos los datos, quedan tabulados en el cortapapeles de manera de que al pegarlos en Excel, se respete la organización de los mismos (disculpen los datos, puse cualquier cosa )
En Webmatrix, copiamos….
y Pegamos en Excel!
Informes de Rendimiento
Una de las tareas importantes que tenemos hoy en día es de asegurarnos que nuestro sitio Web tenga una “Calidad” Aceptable , pero esta calidad se puede descomponer en varias ítems, como lo son optimización de tiempo de carga, mejoramiento de tags , meta y características de la página para los SEO, eliminar fallas como links rotos , etc. WebMAtrix te provee una muy buena herramienta para automatizar en parte este análisis, y te sugiere posibles soluciones, puedes ir guardando estos informes, y exportarlos para enviárselo a tus clientes.
Extendiendo WebMatrix
Una de las características interesantes de WebMatrix es la posibilidad de incorporar nuevas funcionalidades, y esto lo podemos hacer mediante la Galería de Extensiones, en donde vamos a tener variadas herramientas muy útiles en el desarrollo:
Hoy en día, como ya lo sabrás si tu sitio no soporta una correcta visualización en dispositivos móviles, estás en problemas, cada vez son más los usuarios que tienen smartphones en los cuales navegan tanto o más tiempo que en un laptop. Entonces se hace necesario el testear las páginas en ambientes algo más parecidos al los reales. WebMatrix te permite instalar emuladores de IPad , IPhone y Windows Phone (bueno,los de IOS no son lo mismo que el emulador que viene en XCode, pero de todas maneras nos sirve).
Para tener el Emulador de Windows Phone incorporado con Webmatrix debes tener el SDK De Windows Phone instalado que puedes descargar desde acá:
https://dev.windowsphone.com/en-us/downloadsdk
Y puedes ver además una excelente variación de Tema de Jquerymobile, para dar un aspecto METRO a tus web apps cuando se naveguen desde un Windows Phone, échale un vistazo acá:
http://geeks.ms/blogs/gperez/archive/2012/05/16/listview-de-jquerymobile-metro-theme-con-webmatrix.aspx
y por ejemplo si vamos a utilizar el emulador de IPhone, tenemos la opción de elegirlo dentro de la opción ejecutar de la barra de herramientas ( y de paso vemos que podemos ejecutar además nuestras páginas en los browsers que tengamos instalado)
Emulador IPhone Corriendo:
Otra herramienta útil es el minificador y optimizador de JavaScript ,CSS e imágenes:
Una vez instalado podemos seleccionar un archivo de javascript y seleccionar Minify, con esto automáticamente nuestro script será optimizado.
Verás que ahora hay dos archivos, el normal y el minificado 
Y como puedes ver el nivel de compresión es más que aceptable.
Además puedo obtener el Base64 ,con la opción Copy DATA URI ,de la imagen o también optimizarla
Sitio a partir de Galería
Si lo que necesitas es instalar un sitio administrable como Wordpress, Umbraco o Joomla entre otros, WebMatrix te permite hacerlo fácilmente, resolviendo dependencias e integrando opciones al barra de menú según el CMS que se instale , un buen ejemplo de esto es la integración que se logra con Umbraco.
En el caso de Wordpress , existe intellisense de las funciones propias de la API de Wordpress
Por ejemplo si seleccionamos UMBRACO , vamos a tener que decidir si vamos a utilizar SQL Server CE o SQL Server, luego aceptamos el CLUF y listo!
En el Caso de Wordpress que trabaja bajo MySQL y PHP, me va a pedir que instale las dependencias, la descarga e instalación la hace WebMatrix por mi
Publicar el sitio web
Por último, cuando queremos publicar un sitio, tenemos distintas opciones, como importar el perfil de publicación (si es que ya tenemos uno)
Por otro lado podemos especificar la configuración, y podemos utilizar Web Deploy o FTP como protocolo:
Y si andamos buscando un Hosting, también nos va sugerir un listado de hosting con soporte para las ASP.NET Web Pages, puedes ver acá la lista que se despliega:
http://www.microsoft.com/web/Hosting/Home?spotlight=true¬ify=true&technology=ASPNET4.0%3bMSSQL%3b&appId=&language=es-ES
Como ves, muchas razones para ocupar WebMatrix, en mi caso, ya es una herramienta fundamental de desarrollo
Nos vemos!!
@chalalo
Así es, estoy invitado a Inacap de Puerto Montt a dar las siguientes charlas en el ámbito de la semana de la Carrera de Ingeniería Informática.
Fecha 5 de Noviembre
14:00 Charla de Desarrollo para MVC y ASP.NET con NoSQL
En esta sesión revisaremos técnicas y patrones para la creación de sitios Web dinámicos en ASP.NET, utilizando los modelos de WebForms y el nuevo framework MVC 4 en la construcción de aplicaciones que adoptan las mejores prácticas de la industria. Adicionalmente, mostraremos de que forma podemos incluir almacenamiento NoSQL -como MongoDB para dar aun más agilidad y performance nuestras aplicaciones.
15:45 Como iniciarme en el desarrollo para Apps Móviles, Android, Windows Phone 7 e IPhone
En esta charla veremos las características fundamentales en el desarrollo para distintas plataformas móviles, revisaremos los requerimientos para comenzar a programar para Android, IPhone y Windows Phone y como subir las apps a los distintos markets.
Realmente estoy muy agradecido de la organización quien amablemente me invitó y espero que podamos conversar un buen rato sobre tecnología y desarrollo.
Saludos!
@chalalo
Hola, últimamente he estado involucrado en desarrollos para IOS, Android y Windows Phone, y realmente esta última plataforma me sorprende por la facilidad que nos brinda a los desarrolladores para crear aplicaciones. Quiero comentar algunas herramientas que me sirvieron mucho a la hora de desarrollar y mostrar la app.
Windows Phone 7 Emulator Skin Switcher
Esto quizás no es muy importante, pero me gusta ver la app. tal cual quedaría en el dispositivo, para esto necesitaba cambiar el skin del emulador, y para eso nada mejor que Windows Phone 7 Emulator Skin Switcher, bastante cool!
Por ejemplo, selecciono el Nokia Lumia 800 White y al momento de lanzar el emulador:
Silverlight Toolkit
Es una excelente suite de controles, seguramente los controles por defecto no serán suficientes para ti, es por eso que puedes elegir de esta librería, liberada hace poco, la versión de septiembre 2012 viene con las siguientes novedades:
- Nuevo Control CustomMessageBox
- Nuevo control Rating
- Nuevos efectos de transiciones
- Mejoras en el uso de los templates
- Mejor suporte Nuget
- 24 Bugs arreglados
Descárgalo desde acá http://silverlight.codeplex.com/releases/view/94435
Windows Phone Power Tools
La aplicación que desarrollé utiliza el almacenamiento aislado del teléfono para guardar el cache de las noticias de la app, haciendo debug necesita acceder a ese almacenamiento entre otras cosas, como desinstalar la app del emulador, navegar entre los archivos etc. En android tenia la herramienta en el SDK, acá busqué y encontré esta excelente aplicación que solucionó el problema:
Agrego la tabla que nos permite ver las diferencias y ventajas de utilizar esta herramienta en comparación con lo que provee el SDK
Descárgalo de acá:
http://wptools.codeplex.com/
Siempre optimizar los PNG – PNGGaunlet
Siempre debemos optimizar las imágenes que agregamos como recurso dentro de nuestra app, si tenemos muchas imágenes el peso de app puede aumentar bastante, imagina 10 imágenes png a 400k, ya tenemos 4mb que puede ser excesivo. Esta aplicación es bastante buena, necesita el Fx4 y combina varias técnicas para la compresión de los png
Descárgala acá:
http://pnggauntlet.com/
Coding4Fun Windows Phone Toolkit
Esta Suite de controles, nos permiten extender más las posibilidades de nuestras aplicaciones, indispensable si quieres utilizar un “DateTimePicker” o notificaciones entre otros, la lista de controles que existen es la siguiente:
Te dejo acá un link de blog de Javier Suarez mostrando la mayoría de los controles (incluye video)
http://javiersuarezruiz.wordpress.com/2012/05/01/windows-phone-intro
Iconos y recursos
Hay una enorme cantidad de recursos sobre íconos e imágenes para windows phone, está página será de mucha ayuda al momento de buscar templates e íconos.
http://www.windowsphonegeek.com/Resources/UX
Eso!, espero que te sirva!
Hola, este es un tip bastante simple y que nos puede ayudar a mejorar el look de nuestras páginas, y es que CSS3 nos permite cambiar el color por defecto del texto seleccionado de una manera muy sencilla.
Actualmente Firefox, Chrome, Opera, Safari y IE10 soportan esta funcionalidad, obviamente como sabemos , si la versión del browser no soporta esta característica, simplemente la ignora, la forma básica es la siguiente:
<style type="text/css">
::selection {
background:#00ff21;
color:#990000;
}
::-webkit-selection {
background:#00ff21;
color:#990000;
}
::-moz-selection {
background:#00ff21;
color:#990000;
}
</style>
Como te puedes dar cuenta podemos cambiar el background y el color de la letra dentro del estilo.
Sin embargo también podemos definir por selector el color que queremos al seleccionar un texto:
<style type="text/css">
p.verde::selection {
background:#3e9d16;
color:#fff;
}
p.verde::-moz-selection {
background:#c2660d;
color:#fff;
}
p.verde::-webkit-selection {
background:#3e9d16;
color:#fff;
}
p.negro::selection {
background:#000;
color:#fff;
}
p.negro::-moz-selection {
background:#000;
color:#fff;
}
p.negro::-webkit-selection {
background:#000;
color:#fff;
}
</style>
<p class="verde">
La primera parte se imprimió en Madrid, en casa de Juan de la Cuesta,
a finales de 1604.
</p>
<p class="negro">
Salió a la venta en enero de 1605 con numerosas erratas, por culpa de la celeridad
que imponía el contrato de edición.
</p>
Como vez, mega fácil, así que necesitas personalizar hasta el texto seleccionado aplicando un color distinto al por defecto, ya sabes que existe un estilo para ello.
Saludos!
@chalalo.
Hola, quería compartir este tip, quizás ya muchos lo saben, pero me ha sacado mucho de apuros, ya que tengo que migrar una app que la hice con CP a RTM, y hay un montón de características que por lo menos en mi caso, cambiaron. Me estaba rompiendo la cabeza por que estoy contra el tiempo y me encontré con este documento:
Lo puedes descargar desde acá:
http://go.microsoft.com/fwlink/?LinkId=251943
En mi caso, entre varias cosas me sucedía que los recursos estáticos ya no estaban o ya no se llamaban como en la versión CP
Entonces a buscar en este documento, y te indica de inmediato por cual nombre de recurso debes remplazar el ítem que ya no existe (Current Value por el New Value)
Y estamos ok, bueno, igual un par de horas, pero al menos tenemos una guía 
-
@chalalo
Hola!, continuamos con la serie de tutoriales, este en realidad es una anexo del tutorial anterior, en donde conectabamos el ViewModel con el Modelo con ASP.NET Web API, la cual provee una gran facilidad para manejar las peticiones a las acciones con parámetros con notación JSON. Pero, ¿qué pasa con WebMatrix y Razor? como se hace para recibir JSON? Se puede trabajar con Clases?, este post intenta responder estas preguntas.
PD: Si quieres revisar los otros post de esta serie, revisa:
Parte 4
http://geeks.ms/blogs/gperez/archive/2012/09/12/tutorial-comenzado-con-mvvm-y-knockout-js-parte-4-conectar-el-viewmodel-con-el-model-mediante-asp-net-webapi-y-propiedades-condicionales.aspx
Parte 3
http://geeks.ms/blogs/gperez/archive/2012/09/06/tutorial-comenzado-con-mvvm-y-knockout-js-parte-3-agregar-y-remover-de-arreglos-observables.aspx
Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx
Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx
Volvamos a lo nuestro, el ViewModel y su funcionamiento será el mismo que puedes ver en la Parte 4, solo que ahora nos vamos a conectar a una ASP.NET Web Page, veamos la estructura del proyecto en WebMatrix:
Página test.cshtml
@{
var reader = new StreamReader(Request.InputStream);
var json = reader.ReadToEnd();
var respuesta =WSTest.guardaPersona(json);
Response.Write(respuesta);
}
Puedes notar que se va leer todo el contenido de lo enviado hacia esta página con el Request.InputStream, a diferencia de ASP.NET Web API, en donde podemos recibir directamente un objeto. Luego se lee todo el Stream y lo paso como parámetro a la función guardaPersona de la página WSTest.cshtml, recuerda que debe estar en la carpeta App_Code para que las funciones que esta contenga sean visibles a las demás páginas.
Página WSTest.cshtml
@functions {
public static string guardaPersona(String obj) {
var p = Json.Decode(obj);
Persona persona = new Persona();
persona = Json.Decode<Persona>(obj);
return "Se Registro: " + persona.nombre +" con "
+ persona.telefonos.Count + " Telefonos ";
}
public class Persona {
public string nombre {get; set; }
public string apellidos {get; set; }
public int edad {get; set; }
public ICollection<Telefono> telefonos {get; set; }
}
public class Telefono{
public string numero{get; set; }
public string tieneAcargo{get; set; }
public string Acargo{get; set; }
}
}
La función guardaPersona obtiene el parámetro de tipo String, que si vemos que lo que contiene verás:
Las clases con las mismas con las que trabajamos anteriormente, así que instanciamos un objeto Persona y utilizamos el helper Json.Decode con el tipo <Persona> y le pasamos como parámetro el argumento de la función, que corresponde al String que contiene el formato json de lo enviado por Knockout.js. Ahora el objeto persona ya está contiene los datos enviados desde el cliente y estamos listos para guardar el objeto. En mi caso solo devuelvo un string para demostrar que ya podemos utilizar el objeto instanciado.
El ViewModel Solo cambia en la llamada, ahora no es una acción de ASP.NET Web API, es una página por lo que el modelo queda de la siguiente manera:
var PersonaViewModel = {
nombre: ko.observable("Juan Pablo"),
apellidos: ko.observable("Pérez Nuñez"),
edad: ko.observable(1),
telefonos: ko.observableArray([new telefono(234234), new telefono(565345)]),
addTelefono: function () {
this.telefonos.push(new telefono(document.getElementById("tx_telefono").value));
alert("Cantidad de Telefonos:" + this.telefonos().length);
},
grabar: function () {
alert("Preparado para Guardar...");
$.ajax({
url: "test.cshtml",
type: "POST",
data: ko.toJSON(this),
contentType: "application/json",
success: function (result) { alert(result) }
});
}
};
Como vez, casi no hay cambios y funciona muy bien 
.Si quieres descargar el ejemplo:
Descarga la parte 5 del Tutorial
Saludos!
@chalalo
Hola, seguimos con nuestro proceso de aprendizaje sobre Knockout.js, esta vez veremos la posibilidad de condicionar ciertas propiedades del DOM según el valor del atributo del ViewModel y finalmente, enviaremos nuestro viewmodel serializado en json a un servicio REST de ASP.NET WEB API.
Te dejo el link de los tutoriales anteriores:
Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx
Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx
Parte 3
http://geeks.ms/blogs/gperez/archive/2012/09/06/tutorial-comenzado-con-mvvm-y-knockout-js-parte-3-agregar-y-remover-de-arreglos-observables.aspx
Desarrollo en el Cliente
Veamos el primer comportamiento deseado, en donde tenemos podemos asignar la persona que esta a cargo de un teléfono (quizas no tiene mucho sentido, pero es para efectos de ejemplo), como vez, al momento de presionar el check mostramos una caja de texto en donde podemos ingresar el nombre del encargado.
Veamos primero cual es el código HTML asociado a la lista de telefonos, puedes ver que el input type=”checkbox” tiene asociado una nueva propiedad del viewmodel que se llama tieneAcargo que es boolean, la misma propiedad se une al atributo visible del input text, de manera que lo que sucede en ese momento es:
- Se hace presiona sobre el check
- El check esta unido a una propiedad del viewmodel, por lo que por del binding bidireccional el viewmodel cambia el valor de la propiedad
- Nuevamente por el binding bidireccional la propiedad visible del input text obtiene el valor del viewmodel y se setea visible o invisible según el caso.
<ul data-bind="foreach: telefonos">
<li>
<span data-bind="text: numero"></span>
<button data-bind="click: borrar" >Borrar</button>
<input type="checkbox" data-bind="checked: tieneAcargo"/>Tiene A Cargo
<input type="text" data-bind="value:Acargo, visible:tieneAcargo" />
</li>
</ul>
Lo anterior se soporta en algunos cambios que hice el viewmodel, en la “clase” telefono, puedes ver que hay dos atributos observables, el tieneAcargo que es boolean y el Acargo, que contendrá la información escrita dentro de los input text.
<script type="text/javascript">
function telefono(numero) {
return {
numero: ko.observable(numero),
tieneAcargo: ko.observable(false),
Acargo: ko.observable(),
borrar: function () {
PersonaViewModel.telefonos.remove(this);
}
};
}
var PersonaViewModel = {
nombre: ko.observable("Juan Pablo"),
apellidos: ko.observable("Pérez Nuñez"),
edad: ko.observable(1),
telefonos: ko.observableArray([new telefono(234234),
new telefono(565345)]),
addTelefono: function () {
this.telefonos.push(new telefono(document.getElementById
("tx_telefono").value));
alert("Cantidad de Telefonos:" + this.telefonos().length);
},
grabar: function () {
alert("Preparado para Guardar...");
$.ajax({
url: "http://localhost:11590/Api/Default1",
type: "POST",
data: ko.toJSON(this),
contentType: "application/json",
success: function (result) { alert(result) }
});
}
};
PersonaViewModel.nombreCompleto = ko.dependentObservable(function () {
return this.nombre() + " " + this.apellidos();
}, PersonaViewModel)
ko.applyBindings(PersonaViewModel);
</script>
El siguiente paso es enviar nuestro viewModel a ASP.NET Web API, para esto vamos a utilizar Jquery, notar que dentro del mismo modelo está la función de grabar, lo que garantiza que el concepto de que el viewmodel es responsable por sus propias acciones se mantenga.
Veamos un poco más la función de Ajax, como ya mencioné, estoy utilizando jquery, luego hago referencia a la url en donde esta el servicio que aceptará peticiones por POST. Luego el type POST que indicará cual acción se ejecutara del API Controller, luego ocupo la función toJSON, recuerda que enconding nativo a json solo lo soportan las últimas versiones de los navegadores, y Knockout da soporte desde IE6, de todas formas, es muy útil este método de Knockout, luego recibimos y procesamos el mensaje de resultado de la acción.
Para llamar a la función grabar utilizamos un botón html simple:
<button data-bind="click:grabar">Guardar</button>
Desarrollo ASP.NET WEB API
No voy en entrar en detalle de como crear un proyecto con ASP.NET WEB API, si necesitas más información te recomiendo que leas los artículos anteriores:
Voy a mostrar el controlador y el modelo asociado. El modelo tiene las mismas características que nuestro viewmodel:
public class Persona
{
public string nombre { get; set; }
public string apellidos { get; set; }
public int edad { get; set; }
public ICollection<Telefono> telefonos { get; set; }
}
public class Telefono
{
public string numero { get; set; }
public string tieneAcargo { get; set; }
public string Acargo { get; set; }
}
Luego el controlador que contiene la acción:
public class Default1Controller : ApiController
{
// POST api/default1
public String Post([FromBody] Persona persona)
{
String mensaje = string.Format("Guardado {0} {1} telefonos:{2}",
persona.nombre, persona.apellidos, persona.telefonos.Count);
return mensaje;
}
Cuando se presiona el botón guardar veremos que se llama a nuestra acción con los parametros serializados con JSON:
Luego envío la respuesta al cliente, que consiste en un mensaje para este ejemplo, que me indica que todo esta ok. Ahora bien, luego se puede guardar en una BD, etc et.
Y Listo!, Te dejo el código por si quieres descargar este ejemplo:
Saludos!
@chalalo
Hola que tal? continuamos con este tutorial, esta vez con un pequeño ejemplo sobre las como agregar y remover objetos desde una colección observable, además veremos el como bindear atributos del DOM, como por ejemplo, el atributo Enable del botón para solo aceptar hasta 5 teléfonos.
Si no has visto los tutoriales anteriores, te aconsejo que los visites antes de seguir:
Parte 1
http://geeks.ms/blogs/gperez/archive/2012/08/13/tutorial-comenzado-con-mvvm-y-knockout-js.aspx
Parte 2
http://geeks.ms/blogs/gperez/archive/2012/08/22/tutorial-comenzado-con-mvvm-y-knockout-js-parte-2-propiedades-observables-e-iteraciones.aspx
En la siguiente animación podrás ver el comportamiento que vamos a logra. Lo nuevo en este ejemplo , como mencionábamos es:
- Agregar un input type=”number” para ingresar un nuevo teléfono a la colección
- Posibilidad de borrar estos teléfonos del ViewModel
- Mostrar la cantidad de teléfonos ingresados
- Inhabilitar el botón agregar cuando lleguemos a la cantidad de 5 teléfonos.
Veamos entonces el código que hace posible este funcionamiento. Primero que nada , en “clase” teléfono agregé un metodo que remueve de la colección de teléfonos del ViewModel a el objeto. Luego como puedes ver en el ViewModel hacemos un método addTelefono,que agregar un objeto teléfono obteniendo del valor desde el input tx_telefono, además y solo por un tema de demostración, envío una alerta con la cantidad de elementos de la colección
<script type="text/javascript">
function telefono(numero) {
return {
numero: ko.observable(numero),
borrar: function() {
PersonaViewModel.telefonos.remove(this);
}
};
}
var PersonaViewModel = {
nombre: ko.observable("Juan Pablo"),
apellidos: ko.observable("Pérez Nuñez"),
edad: ko.observable(1),
telefonos: ko.observableArray([new telefono(234234),
new telefono(565345)]),
addTelefono: function() {
this.telefonos.push(
new telefono(document.getElementById("tx_telefono").value));
alert("Cantidad de Telefonos:" + this.telefonos().length);
}
};
PersonaViewModel.nombreCompleto = ko.dependentObservable(function() {
return this.nombre() + " " + this.apellidos();
}, PersonaViewModel)
ko.applyBindings(PersonaViewModel);
</script>
Veamos el código html que da soporte al comportamiento:
<label for="tx_telefono">Telefono</label>
<input type="number" id="tx_telefono" />
<button data-bind="click: addTelefono, enable: telefonos().length<5">Agregar</button> Maximo 5 telefonos!
<h4>Telefonos (<span data-bind="text: telefonos().length" ></span>)</h4>
<ul data-bind="foreach: telefonos">
<li>
<span data-bind="text: numero"></span>
<button data-bind="click: borrar" >Borrar</button>
</li>
</ul>
Podemos ver que el botón para agregar nuevos teléfonos tiene dos binding de comportamientos, 1 que liga el click con el método addTelefono, otro binding con el atributo enable, en el cual podemos utilizar directamente una condición sobre el ViewModel, en este caso, mientras sean menor a 5 (4 elementos) el largo de la colección el botón permanecerá activo, obviamente esto se logra ya que la condición va a retornar verdadero o falso y se asignará al atributo enable.
Para borrar, se hace algo muy parecido, se hace el binding con la función borrar simplemente, recordemos que estamos bajo el contexto de cada elemento de la colección de teléfonos mediante el foreach, por lo que al presionar borrar se entiende que estamos llamando a la función con el argumento que contiene propio objeto en cuestión, por eso es que podemos hacer remove(this).
Y por último, que ya se me olvidaba, creamos un span en donde al igual que el mensaje, muestro la cantidad de teléfonos que se han ingresado, haciendo binding de la propiedad text.
Como ves, bastante interesante este nuevo esquema, voy a seguir posteando tutoriales y luego unirlo con ASP.NET WEB API.
Por último te dejo el link de descarga:
https://dl.dropbox.com/u/1303802/MVVM1.zip
Saludos!
@chalalo
Hola, este es un tip para todos los que no tenemos interfaces touch y que tenemos Windows 8 RTM y que tenemos nostalgia por el botón inicio. StarDock , empresa con experiencia en personalizaciones de Windows, nos trae un pequeño software beta que nos va a permitir tener el botón inicio con las opciones a las cuales ya estábamos acostumbrados, además permite bootear directamente en el escritorio clásico y muchas cosas más.
Visita la página, solo tienes que ingresar tu correo y te llega al mail en link de descarga:
http://www.stardock.com/products/start8/
también se puede personalizar:
Eso!, por lo menos, para mí es de gran utilidad.
@chalalo
Hola, acá les dejo los documentos y demos sobre ASP.NET API y MongoDB.
Los ejemplos que vimos en la charla disponibles para la descarga:
También el articulo que les nombré, sobre MongoDB vs SQL Server, muy interesante para revisar, de la mano de dos maestros:
http://geeks.ms/blogs/palvarez/archive/2011/11/17/hot-inserciones-masivas-en-mongodb-vs-sql-server.aspx
Saludos!
@Chalalo
Hola, vamos a continuar con el aprendizaje sobre MVVVM, si es primera vez que estas viendo este blog, te recomiendo ver primero el articulo introductorio de esta serie.
Hoy vamos a seguir revisando esta nueva forma de construir aplicaciones Web, revisaremos más posibilidades.
Si recordamos, ya teníamos creado nuevo viewmodel, ahora vamos revisar como crear propiedades observables, además de como crear colecciones y bindearlas a nuestro DOM.
Como seguimos del ejemplo anterior, quiero mostrar una captura de como va a quedar finalmente esta parte del ejemplo, luego seguiremos con más características.
Primero que nada, vamos a unir tal cual el ejemplo anterior , los campos input a los atributos del ViewModel. Para esto , hacemos “observable” todas los atributos del ViewModel.
Luego vamos a crear una propiedad que concatene el atributo nombre y el atributo apellido en una sola “nombreCompleto”, la cual también será de tipo “dependentObservable”, y que como puedes ver , pasa a ser una propiedad del PersonaViewModel.
Por ultimo tendremos una teléfonos, que va a ser un array también observable, más adelante veremos como agregar y eliminar objetos de la colección. Esta colección de teléfonos, es una función que hace de clase y tiene su propiedad numero también observable.
<script type="text/javascript">
function telefono(numero) {
return {
numero: ko.observable(numero)
};
}
var PersonaViewModel = {
nombre: ko.observable("Juan Pablo"),
apellidos: ko.observable("Pérez Nuñez"),
edad: ko.observable(1),
telefonos: ko.observableArray([new telefono(234234),new telefono(565345)])
};
PersonaViewModel.nombreCompleto = ko.dependentObservable(function() {
return this.nombre() + " " + this.apellidos();
}, PersonaViewModel)
ko.applyBindings(PersonaViewModel);
</script>
Veamos ahora el HTML necesario para dar soporte a este ModelView.
<ul>
<li>El nombre es <span data-bind="text:nombre"></span></li>
<li>El apellido es <span data-bind="text:apellidos"></span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
</ul>
<label for="tx_nombre">Nombre:</label>
<input type="text" id="tx_nombre" data-bind="value:nombre" >
<label for="tx_apellidos">Apellidos:</label>
<input type="text" id="tx_apellidos" data-bind="value:apellidos" >
<label for="tx_edad">Edad:</label>
<input id="tx_edad" type="number" data-bind="value:edad">
<p>
Nombre Completo :<span data-bind="text:nombreCompleto"></span>
</p>
<h4>Telefonos</h4>
<ul data-bind="foreach: telefonos">
<li><span data-bind="text: numero"></span></li>
</ul>
Podemos ver que el binding se ha hecho en los input del formulario (le agregué un css con display:block para que en el despliegue se viera el input bajo el label). Como ya sabemos si cambiamos el campo en los textos vamos a ver de forma inmediata el cambio en el MV y también en el span del nombreCompleto. El Foreach de Knockout.js cambia desde las versión 2.0 y simplifica bastante las cosas, com ves, solo se indica el data-binding, la acción “foreach” y la colección, luego dentro, se hace el binding sobre el elemento a iterar y listo!
El Siguiente Gif Animado indica el funcionamiento:
Obviamente utilicé WebMatrix 2 (RC) para este ejemplo, excelente herramienta, si hasta tiene autocompletación de código para Knockout.js
Espero que te sirva el ejemplo y continuamos con más prontamente 
Saludos!
@chalalo
Hola que tal? Desde hace un tiempo ya tenía ganas de escribir sobre MVVM, no soy para nada un experto, simplemente quiero compartir mi proceso de aprendizaje.
Existen excelente artículos excelente sobre MVVM, espero que los puedas ver:
http://geeks.ms/blogs/etomas/archive/2012/07/31/y-el-combate-se-decidi-243-por-ko-i.aspx
¿Cómo funciona MVVM?
La idea es simple y buena, tener un modelo exclusivo para la capa de presentación, quizás sin quererlo ya habías hecho en algún momento algo parecido. El viewModel es “ModeloVista” que se adapta a las necesidades de la capa de presentación, muchas veces, existe un ViewModel específico para cada vista. Por otro lado vamos a tener el modelo que nos provee desde alguna fuente, los datos necesarios para “alimentar” nuestro viewModel.
Un elemento importante en este modelo es el binding, que permite unir uni o bidireccionalmente ciertos atributos y/o métodos del viewmodel a elementos del DOM, de esta manera, y utilizando el patrón observador, podemos tener sincronizado la vista con el viewModel con un mínimo esfuerzo.
¿Donde entra Knockout.js en todo esto?
Knockout.js es una biblioteca javascript, que nos ayuda a implementar este modelo MVVM. Dentro de las características especiales, tal cual indica en su página, nos permite:
- Realizar Binding Declarativos
- Resfresco automático de los elementos del UI, como decía, cuando se actualiza el modelovista, nuestra UI se actualiza automáticamente
- Tracking de Dependencias, detecta los cambios realizados en la vista o en el modelo y es capaz de propagarlos .
- Plantillas, permite generar rapidamente plantillas en función de los datos del modelovista.
Además, tal como indica la página es totalmente libre, open source, totalmente construido sobre javascript, funciona con cualquier framework adicional, es bastante liviano, solo 40k minimizado, no tiene dependencias , soporte para IE6+, Firefox 2+.Chrome, Opera y Safari (versión móvil y de escritorio) y totalmente documentada.
Veamos nuestro primer ejemplo, siguiendo la documentación en: http://knockoutjs.com/documentation/observables.html#mvvm_and_view_models
Para el ejemplo voy a utilizar WebMatrix, para mi uno de los mejores editores de código grátis disponible, entonces voy a descargar la biblioteca y manos a la obra
Código del Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
</head>
<body>
<h1>Ejemplo MVVM</h1>
<ul>
<li>El nombre es <span data-bind="text:nombre"></span></li>
<li>El apellido es <span data-bind="text:apellidos"></span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
</ul>
<script type="text/javascript">
var PersonaViewModel = {
nombre: "Juan Pablo
apellidos: "Pérez Nuñez",
edad: 1
};
ko.applyBindings(PersonaViewModel);
</script>
</body>
</html>
Revisemos un poco el código antes de continuar, puedes ver que construimos un objeto javascript que tiene 3 atributos, estos atributos se van a bindear a los elementos span que tienen el tag data-bind , el cual, si bien no es nativo de html5, es compatible con él.
Luego, y para realizar el binding, debemos invocar el metodo applyBindings de la biblioteca, pasandole como argumento nuestro ViewModel.
Algo muy bueno es que al momento de escribir nuestro código javascript con WebMatrix podemos ver que nos sugiere que propiedades enlazar:
Y listo!, el resultado es:
Como puedes ver se ha hecho el render en tags span con el atributo data-bind, ahora veamos un ejemplo con binding bidireccional, para eso vamos a incluir un input text, de manera que al escribir y/o cambiar la edad sobre este elemento, se modifique de manera inmediata el ViewModel.
Para esto tenemos que hacer la propiedad del ViewModel observable, esto lo logramos modificando la propiedad edad y agregando en input type con el data-bind:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/knockout-2.1.0.js"></script>
</head>
<body>
<h1>Ejemplo MVVM</h1>
<ul>
<li>El nombre es <span data-bind="text:nombre"></span></li>
<li>El apellido es <span data-bind="text:apellidos"></span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
</ul>
<input data-bind="value:edad" type="number">
<script type="text/javascript">
var PersonaViewModel = {
nombre: "Juan Pablo",
apellidos: "Pérez Nuñez",
edad: ko.observable(1)
};
ko.applyBindings(PersonaViewModel);
</script>
</body>
</html>
Y todo funcionando tal cual queremos, cada vez que aumentas o disminuyes la edad, automáticamente se está actualizando al información del viewModel.
Bueno, ese ha sido nuestra pequeña introducción, voy a ir agregando nuevos tutoriales, que forman parte de mi proceso de aprendizaje 
Nos vemos en otro artículo!,
Saludos,
@chalalo
Hola colegas!, los quiero invitar al siguiente evento que se va a desarrollar en las oficinas de Microsoft Chile, evento en el que tengo la misión de ser el orador 
, acá estan los datos:
En esta sesión revisaremos técnicas y patrones para la creación de sitios Web dinámicos en ASP.NET, utilizando los modelos de WebForms y el nuevo framework MVC 4 en la construcción de aplicaciones que adoptan las mejores prácticas de la industria. Adicionalmente, mostraremos de que forma podemos incluir almacenamiento NoSQL -como MongoDB para dar aun más agilidad y responsividad a nuestras aplicaciones. Finalizaremos la sesión discutiendo como podríamos aprovechar la escalabilidad de las plataformas Cloud Computing en este tipo de arquitecturas.
Lugar: Microsoft Chile - Sala Farellones y Colorado
Mariano Sanchez Fontecilla 310 Piso 6
Las Condes Santiago Región Metropolitana Chile
Fecha: 30 de agosto de 2012
Horario: 18:30 a 21:30 hrs.
Orador: Gonzalo Pérez C.
Registrate acá:
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032522380&Culture=es-CL&community=0
Agéndalo!
https://msevents.microsoft.com/cui/AddToOulook.aspx?EventID=1032522380&culture=es-CL
INFORMACIÓN IMPORTANTE:
- Si es primera vez que asistes a un evento en las oficinas de Microsoft se te solicitará el Carnet de Identidad al ingresar al edificio.
- Microsoft se reserva el derecho de utilizar los espacios disponibles en la sala, una vez comenzado el evento.
- Este evento no incluye el pago de estacionamiento.
Nos vemos allá!
Saludos,
@chalalo
Hola, ya que la tendencia está por el lado de Javascript no intrusivo, vamos a revisar como utilizar jQueryUI con esta misma técnica. Primero que nada debemos descargar jQueryUI y la correspondiente liberría que nos permitirá esta funcionalidad. Luego la librería específica para trabajar con jQuery no intrusivo.
Vamos a desarrollar un pequeño ejemplo con visual studio 2010.Primero que nada, vamos a constuir un website:
Luego escribimos en el Package Manager Console:
Install-Package jquery.ui.combined:
PM> Install-Package jquery.ui.combined
Intentando resolver la dependencia 'jQuery (≥ 1.4.4)'.
'jQuery 1.4.4' se instaló correctamente.
'jQuery.UI.Combined 1.8.22' se instaló correctamente.
'jQuery 1.4.4' se agregó correctamente a WebSite1.
'jQuery.UI.Combined 1.8.22' se agregó correctamente a WebSite1.
Luego instalamos el Package que realizará la magia:
Install-Package unobtrusive.jquery.ui
PM> Install-Package unobtrusive.jquery.ui
Intentando resolver la dependencia 'jquery (≥ 1.6.1)'.
'jQuery 1.6.4' se instaló correctamente.
'unobtrusive.jquery.ui 0.2' se instaló correctamente.
'jQuery 1.4.4' se quitó correctamente de WebSite1.
'jQuery 1.6.4' se agregó correctamente a WebSite1.
'unobtrusive.jquery.ui 0.2' se agregó correctamente a WebSite1.
'jQuery 1.4.4' se desinstaló correctamente.
Como puedes ver , la dependencia que resuelve de jquery es 1.6.1, que se agrega al proyecto, así que luego la podemos eliminar.
Ahora veamos el código, y es que acá esta lo entretenido, ya que generalemente lo que hacíamos para agregar funcionalidad a un control existente con jqueryui hacíamos, por ejemplo:
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.22.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#<%= fecha.ClientID %>").datepicker({});
});
</script>
En donde del campo al que le vamos a asignar el datapicker es un Textbox:
<asp:TextBox ID="fecha" runat="server"></asp:TextBox>
Ahora con la librería de no-intrusivo, podemos definir tag compatibles con HTML5 que van a indicar cual es el comportamiento que debería tener un control. Para esto vamos a incluir también la librería que descargamos hace unos momentos.
<script src="Scripts/jquery-ui.onobtrusive.min.js" type="text/javascript"></script>
Y ahora agregamos los atributos a cada control para indicarcale cual va será su comportamiento, al mismo estilo de jQueryMobile.
Voy a agregar tambien un Slider para que veamos que hay bastantes posiblidades a la hora de personalizar un control.
<h2>Slider</h2>
<div>
Current value: <span id="slider-value">47</span>
<div data-ui-fn="slider" data-ui-slider-animate="true"
data-ui-slider-value="47"
data-ui-slider-slide="function (event, ui) { $('#slider-value').text(ui.value); }">
</div>
</div>
<p>
<asp:TextBox data-ui-fn="datepicker"
data-ui-datepicker-show-button-panel="true"
ID="fecha" runat="server"></asp:TextBox>
</p>
El resultado es el siguiente:
Como puedes apreciar, no hay código Javascript involucrado (solo para el evento slide). Es interesante el enfoque en donde vamos separando aún más las responsabilidades de los componentes de nuestra aplicación.
Saludos!
@chalalo.
![wijmo_juice1[1]](http://geeks.ms/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/gperez/wijmo_5F00_juice11_5F00_thumb_5F00_1B7A378E.png "wijmo_juice1[1]")
Hola que tal? En este post voy a hablar un poco más de JuiceUI un plugin para Webforms que dar nuevos aires a tus formularios, encapsulando funcionalidad de jqueryUI y permitiendonos utilizar de manera sencilla en nuestras páginas.
Los componentes de jqueryUI que se incluyen en Juice son:
- Accordion
- Autocomplete
- Button
- Datepicker
- Dialog
- Draggable
- Droppable
|
- ProgressBar
- Resizable
- Selectable
- Slider
- Sortable
- Tabs
- Position
|
La url del proyecto es http://juiceui.com/
Veamos un ejemplo, de inicio a fin utilizando JUICE, vamos a crear un nuevo sitio web, para esto voy a utilizar Visual Studio 2010, una vez creado vamos a utilizar el instalador de paquetes NuGet:
Escribimos JuiceUI en el buscador para obtener la librería y le damos Install.
Luego veremos instaladas las referencias, archivos javascript y css en nuestro proyecto.
En el web.config veremos que se agregó al referencia al ensamblado y nos indica cual es el prefijo para la utilización de los controles en las páginas.
<pages>
<controls>
<add assembly="JuiceUI" namespace="Juice" tagPrefix="juice" />
</controls>
</pages>
Ahora voy a incluir en la página de default.aspx un control Juice , el datapicker
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Prueba con JUICEUI
</h2>
<p>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:TextBox runat="server" ID="TextBox1" />
<juice:Datepicker ID="Datepicker1" runat="server" MinDate="-20" MaxDate="+1M +10D" TargetControlID="TextBox1" />
</p>
</asp:Content>
Vemos el resultado al ejecutar el proyecto:
Sigamos viendo algunos controles , como por ejemplo el botón, que funciona algo parecido al de jquerymobile, en donde puedes definir un href y luego decorarlo con css para que tenga la apariencia de un botón, de esta manera puedes hacer lo siguiente
<a href="http://www.chalalo.cl" id="link" runat="server">
Ir a Chalalo.cl</a>
<Juice:button ID="Button1" TargetControlID="link" runat="server" />
Como te mencionaba existe una buena cantidad de controles, con excelente documentación para llegar y utilizar, muy fáciles de implementar con lo que le puedes dar un nuevo aire a tus formularios, te invito a revisarlos en http://juiceui.com/controls
Espero que te sirva!
Nos vemos!!
@chalalo
Este tiempo se han presentado grandes novedades por parte del Team ASP.NET, hay muchas nuevas características que harán mucho más simples tus desarrollos, especialmente en lo que es SignalR, ASP.NET Web API y su interacción con el client-side, esta buenísima.
Pero hay más y todo lo puedes revisar en esta excelente colección de videos de la aspConf 2012, recomiendo verlos todos! (si es que tienes tiempo), por que te van a dar una clara visón de como se viene el futuro de ASP.NET
Corto el post, he tenido bastante laburo, espero ponerme al día con varios tutoriales que tengo en mente, como el de SignalR.
Saludos!
G.
Hola, este es un tip que a algunos les puede gustar y a otros no, en mi caso no me es muy cómodo que aparezca al inicio de Windows 8 la interface metro, quizás cuando tenga un tablet si me va a servir, pero por mientras no la quiero, espero que Microsoft incorpore la opción de elegir con que escritorio partir en la versión final.
Bueno, acá va la forma de hacerlo:
Paso 1 , Crear el archivo SCF
Abrimos el notepad y escribimos los siguientes comandos, luego guardamos el archivo con extensión scf.
[Shell]
Command=2
IconFile=Explorer.exe,3
[Taskbar]
Command=ToggleDesktop
En mi caso lo guarde en mi carpeta de usuario:
Paso 2 Crear tarea en el programador de Tareas
Luego vamos a programador de tareas, que esta en el panel de control:
O puedes ir más rapido utilizando el buscador de aplicaciones apretando Tecla Windows + W y escribiendo “Administrador de Tareas”. (Creo que hay que arreglar esta diferencia de nombres)
Pinchamos en crear nueva tarea, le asignamos un nombre a la tarea, luego vamos a desencadenadores y por ultimo a Acciones.
Ahora en Desencadenadores vamos a pinchar en Nuevo y luego seleccionar al Iniciar la Sesión:
Por Ultimo nos vamos a acciones y presionamos sobre Nueva y seleccionamos en acción “iniciar un programa”, luego seleccionamos el script que hicimos en el paso 1:
Y Listo, cierras el administrador de tareas, reinicias la sesión y ahora verás el escritorio clásico 
Espero que te sirva!
@chalalo.
Más artículos
< Página anterior -
Página siguiente >