Hola a tod@s
A veces deseamos que el texto que escribe el usuario en un TextBox este de una ves en mayúscula, es por ello que les traigo este Behavior muy sencillo para que lo puedan usar.
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interactivity;
namespace MiProyectoSilverLight.Behaviors
{
public class UpperCaseAction : TriggerAction<TextBox>
{
protected override void Invoke(object parameter)
{
//Detectamos la posicion del cursor
var selectionStart = AssociatedObject.SelectionStart;
var selectionLenght = AssociatedObject.SelectionLength;
//Colocamos el Texto en Mayuscula
AssociatedObject.Text = AssociatedObject.Text.ToUpper();
//Colocamos el Cursor al final
AssociatedObject.SelectionStart = selectionStart;
AssociatedObject.SelectionLength = selectionLenght;
}
}
}
Espero que le sea de ayuda.
Existen ocasiones que deseamos acceder a una Cookie o sencillamente guardar algo de información de poco relevancia, en mi caso no lo uso prefiero el Almacenamiento Aislado (Isolated Storage) pero en su momento alguien me pregunto sobre este punto y pues aquí les dejo los métodos de extensión.
public static class ExtensionCookie
{
/// <summary>
/// Obtener una cookie por su nombre
/// </summary>
/// <param name="document">El <c>HtmlDocument</c></param>
/// <param name="cookieName">Nombre de la Cookie</param>
/// <returns>El contenido de la cookie</returns>
public static string GetCookie(this HtmlDocument document, string cookieName)
{
// Obtener token de cookie
string cookies = document.Cookies;
int idx = cookies.IndexOf(cookieName + "=");
string val = "";
if (idx == 0 || (idx > 0 && (cookies[idx - 1] == ';'
|| cookies[idx - 1] == ' ')))
{
int lastIdx = cookies.IndexOf(';', idx);
if (lastIdx == -1)
{
lastIdx = cookies.Length;
}
int start = idx + cookieName.Length + 1;
val = cookies.Substring(start, lastIdx - start);
return HttpUtility.UrlDecode(val);
}
else
{
return string.Empty;
}
}
/// <summary>
/// Asignar valor a la cookie.
/// </summary>
/// <param name="document">El <c>HtmlDocument</c></param>
/// <param name="cookieName">nombre de la cookie</param>
/// <param name="value">El valor de la Cookie</param>
/// <param name="expireDays">Dias de Expiracion</param>
public static void SetCookie(this HtmlDocument document, string cookieName
, string value, int? expireDays)
{
StringBuilder cookieDefinition = new StringBuilder(cookieName);
cookieDefinition.Append('=');
cookieDefinition.Append(HttpUtility.UrlEncode(value));
if (expireDays.HasValue)
{
cookieDefinition.AppendFormat(";expires={0:R}"
, DateTime.Now.AddDays(expireDays.Value).ToUniversalTime());
}
document.Cookies = cookieDefinition.ToString();
}
}
Aquí les dejo un ejemplo de como usar este código.
void btnSetCookie_Click(object sender, RoutedEventArgs e)
{
TextBox txtCookie = new TextBox();
txtCookie.Text = "Prueba de Asignar Valor a una Cookie";
System.Windows.Browser.HtmlDocument doc = new HtmlDocument();
doc.SetCookie("PruebaCookie", txtCookie.Text, 2);
//doc.SetCookie("PruebaCookie", txtCookie.Text, null);
}
void btnGetCookie_Click(object sender, RoutedEventArgs e)
{
System.Windows.Browser.HtmlDocument doc = new HtmlDocument();
TextBox txtCookie = new TextBox();
txtCookie.Text = doc.GetCookie("PruebaCookie");
}
Espero que le sea de mucha utilidad.
Aquí les dejo unos métodos de extensión simples para la encriptación y des encriptación:
public static class ExtensionesSeguridad
{
public static string EncrytedString(this string _stringToEncrypt)
{
string result = string.Empty;
byte[] encryted = System.Text.Encoding.Unicode.GetBytes(_stringToEncrypt);
result = Convert.ToBase64String(encryted);
return result;
}
public static string DecrytedString(this string _stringToDecrypt)
{
string result = string.Empty;
byte[] decryted = Convert.FromBase64String(_stringToDecrypt);
result = System.Text.Encoding.Unicode.GetString(decryted, 0, decryted.ToArray().Length);
return result;
}
}
Espero que le sea de mucha utilidad.
Nota: aquí les dejo un Enlace de encriptación mas avanzado: http://www.esasp.net/2010/08/encriptar-y-desencriptar-con-c-metodo.html
En ocasiones me he encontrado con personas que me preguntan si existe una manera de tener un AddRange en un ObservableCollection así como lo tiene el List<T>, pues mi respuesta siempre ha sido este código. Quizás no sea el mas optimo o quizás hay mejores truco pero hasta ahora me ha funcionado muy bien, además que me he ahorrado muchos ForEach 
.
public static class ExtensionesColecciones
{
public static void AddRange<T>(this ObservableCollection<T> listOriginal
, IEnumerable<T> collection)
{
if (listOriginal == null)
listOriginal = new ObservableCollection<T>();//En caso de que aun no tenga una instancia
//Verificamos que sea diferente de null o vacio
if (!collection.IsNullOrEmpty<T>())
{
foreach (var item in collection)
listOriginal.Add(item);
}
}
}
Espero que les sea de mucha ayuda.
Nota: El Método de Extensión IsNullOrEmpty esta en este Link: Tips SilverLight: Comprobar si una Coleccion esta vacia o Nula
Existen momentos que queremos saber si una Colección sea un ObservableCollection<T> o un List<T> o cualquiera que herede de una interface IEnumerable<T> puede usar este método de extensión.
public static class ExtensionesColecciones
{
public static bool IsNullOrEmpty<T>(this IEnumerable<T> collection)
{
if (collection == null) //null
return true;
if (collection.Count() < 1) //empty
return true;
return false;
}
}
Espero que le sea de Ayuda.
Existen ocasiones que se desea validar si el texto introducido en un TextBox o que viene de la base de datos tienen el formato valido y es por ello que les traigo estos métodos de extensión para facilitar un poco mas la vida, espero que les sea de mucha utilidad.
public static class ExtensionesValidacion
{
public static bool IsValidUrl(this string text)
{
return Regex.IsMatch(text, @"http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?");
}
public static bool IsValidEmailAddress(this string test)
{
return Regex.IsMatch(test, @"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$");
}
public static bool IsValidIPAddress(this string test)
{
return Regex.IsMatch(test,
@"\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\
.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\
.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\
.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b");
}
}
Ejemplo de como lo pueden usar:
TextBox txt=new TextBox();
string url="http://ajdev.net";
if (url.IsValidUrl())
{
txt.Text = url;
}
else
{
txt.Text = string.Empty;
}
Muchas ocasiones nos encontramos que tenemos una fecha y queremos obtener el primer y el ultimo día del Mes, pues aquí les dejo estos simple ejemplos que muy probablemente alguien lo hizo mejor, pero igual se los dejo para facilitarles un poco la búsqueda.
public static class ExtensionesFecha
{
public static string PrimerDiaMes(this DateTime date)
{
return new DateTime(date.Year, date.Month, 1).ToString("dd");
}
public static string UltimoDiaMes(this DateTime date)
{
return new DateTime(date.Year, date.Month + 1, 1).AddDays(-1).ToString("dd");
}
}
Ejemplo de como Aplicarlo:
string primerDia = DateTime.Now.PrimerDiaMes();
string ultimoDia = DateTime.Now.UltimoDiaMes();
Con este simple ejemplo que a su imaginación de como quieren obtener el dato, es decir, si quieren que le diga hasta que día de la semana cae ese primer o ultimo di del mes eso lo pueden complementar con el formateo de la fecha: http://www.csharp-examples.net/string-format-datetime/
Como les dije es un ejemplo simple y espero que les sea de mucha utilidad.
En el articulo anterior les mostré como asignar un String a Color pero en esta ocasión queremos extraer el String de ese color para guardarlo en la Base de Datos como haríamos esto? pues simple aquí les dejo el método:
public static string ToHexStringFromColor(this Color c)
{
return string.Format("#{0}{1}{2}{3}",
c.A.ToString("X2"),
c.R.ToString("X2"),
c.G.ToString("X2"),
c.B.ToString("X2"));
}
Ahora le dejo el ejemplo de como usar este método de extensión, además lo usare con el mismo ejemplo que usamos en el articulo anterior.
TextBlock textBlock = new TextBlock();
textBlock.Foreground = new SolidColorBrush("#FF7277FE".ToColor());
Color c = (textBlock.Foreground as SolidColorBrush).Color;
textBlock.Text = string.Format("Color: {0}", c.ToHexStringFromColor());
Muchas veces estamos creando un control desde código y no tenemos el color de manera directo si no un valor proveniente de la base de datos algo así como el siguiente ejemplo:
TextBlock textBlock = new TextBlock();
textBlock.Text="Prueba de Foreground";
textBlock.Foreground = new SolidColorBrush("#FF7277FE"); //Esto esta Mal
Donde el código anterior esta mal por que el SolidColorBrush recibe como parámetro un dato de tipo Color, es por ello que se debe tener el siguiente código que lo declare en una clase estática para así tener mi método de extensión.
public static class ExtensionesColores
{
public static Color ToColorFromHex(this string s)
{
if (s.StartsWith("#"))
{
s = s.Substring(1);
}
byte a = System.Convert.ToByte(s.Substring(0, 2), 16);
byte r = System.Convert.ToByte(s.Substring(2, 2), 16);
byte g = System.Convert.ToByte(s.Substring(4, 2), 16);
byte b = System.Convert.ToByte(s.Substring(6, 2), 16);
return Color.FromArgb(a, r, g, b);
}
public static Color ToColorFromString(this string colorString)
{
Type colorType = (typeof(Colors));
if (colorType.GetProperty(colorString) != null)
{
object color = colorType.InvokeMember(colorString
, BindingFlags.GetProperty, null, null, null);
if (color != null)
{
return (Color)color;
}
}
else
{
try
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<Line xmlns=\http://schemas.microsoft.com/winfx/2006/xaml/presentation\");
sb.Append(" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" ");
sb.AppendFormat(" Fill=\"{0}\" />", colorString);
Line lne = (Line)XamlReader.Load(sb.ToString());
return (Color)lne.Fill.GetValue(SolidColorBrush.ColorProperty);
}
catch { }
}
throw new InvalidCastException("Color no definido");
}
Lo que en corrección al código que mostramos al inicio de declarar un control quedaría de esta manera:
TextBlock textBlock = new TextBlock();
textBlock.Text = "Prueba de Foreground";
textBlock.Foreground = new SolidColorBrush("#FF7277FE".ToColorFromHex());
Espero que le sea de mucha ayuda.
Hola a tod@s
Después de 2 años de ausencia en el mundo bloguero he vuelto y con ganas de seguir posteando buenos artículos basándome en la experiencia para ayudar a quienes estén comenzando o que ya tengan tiempo en el mundo de la programación.
Han pasado muchas cosas desde la ultima ves que publique algo, lanzamiento de productos nuevos y muy novedosos, Grandes anuncios en las diferentes áreas tecnológicas y hasta una hermosa bebita tengo 
Espero seguir siendo de apoyo y que mis futuros artículos le sean de muchísima ayuda. Quiero agradecer a las personas que han visitado mi blog en los últimos 3 años, no quiero ponerme sentimental ni mucho menos extenderme con tanto bla bla bla así que hasta pronto.
Este es el cuarto de una serie WebCasts donde estaremos utilizando esta fantástica tecnología para desarrollar una aplicación de tipo Album de Fotos.
Estos WebCast están dirigidos para personas que recién empiezan a desarrollar aplicaciones con SilverLight o los que aun no tienen idea de que es, como le comente anteriormente la idea es fomentar el uso de esta tecnología creando un álbum de fotos que es lo que mas les agrada a los estudiantes o a empresarios para visualizar sus productos.
A medida que se realicen los WebCast estaré colocando las demos y las ppts mostradas.
Contenido
1. Introducción a SilverLight, Arquitectura, Evolución, Controles ( PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: miércoles, 01 de septiembre de 2010 02:00 p.m. Bogotá
2. Animación, Suavización, StoryBoard, Comportamientos, Plantillas de Controles, Pantalla Completa (Demo,PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: lunes, 13 de septiembre de 2010 02:00 p.m. Bogotá
3. Uso de Datos de Prueba, Descarga bajo demanda, Enlace de Datos entre Controles (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: viernes, 17 de septiembre de 2010 02:00 p.m. Bogotá
4. WCF Ria Services, Datos XML, JSON. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: miércoles, 29 de septiembre de 2010 10:00 a.m. Bogotá
5. Hospedar Silverlight (ASP.net, PHP, HTML), Acceso al HTML (DOM), Aplicaciones fuera del Navegador. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
Este es el tercero de una serie WebCasts donde estaremos utilizando esta fantástica tecnología para desarrollar una aplicación de tipo Album de Fotos.
Estos WebCast están dirigidos para personas que recién empiezan a desarrollar aplicaciones con SilverLight o los que aun no tienen idea de que es, como le comente anteriormente la idea es fomentar el uso de esta tecnología creando un álbum de fotos que es lo que mas les agrada a los estudiantes o a empresarios para visualizar sus productos.
A medida que se realicen los WebCast estaré colocando las demos y las ppts mostradas.
Contenido
1. Introducción a SilverLight, Arquitectura, Evolución, Controles ( PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: miércoles, 01 de septiembre de 2010 02:00 p.m. Bogotá
2. Animación, Suavización, StoryBoard, Comportamientos, Plantillas de Controles, Pantalla Completa (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: lunes, 13 de septiembre de 2010 02:00 p.m. Bogotá
3. Uso de Datos de Prueba, Descarga bajo demanda, Enlace de Datos entre Controles (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: viernes, 17 de septiembre de 2010 02:00 p.m. Bogotá
4. WCF Ria Services, Datos XML, JSON. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: miércoles, 29 de septiembre de 2010 10:00 a.m. Bogotá
5. Hospedar Silverlight (ASP.net, PHP, HTML), Acceso al HTML (DOM), Aplicaciones fuera del Navegador. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
Este es el segundo de una serie WebCasts donde estaremos utilizando esta fantástica tecnología para desarrollar una aplicación de tipo Album de Fotos.
Estos WebCast están dirigidos para personas que recién empiezan a desarrollar aplicaciones con SilverLight o los que aun no tienen idea de que es, como le comente anteriormente la idea es fomentar el uso de esta tecnología creando un álbum de fotos que es lo que mas les agrada a los estudiantes o a empresarios para visualizar sus productos.
A medida que se realicen los WebCast estaré colocando las demos y las ppts mostradas.
Contenido
1. Introducción a SilverLight, Arquitectura, Evolución, Controles ( PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: miércoles, 01 de septiembre de 2010 02:00 p.m. Bogotá
2. Animación, Suavización, StoryBoard, Comportamientos, Plantillas de Controles, Pantalla Completa (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: lunes, 13 de septiembre de 2010 02:00 p.m. Bogotá
3. Uso de Datos de Prueba, Descarga bajo demanda, Enlace de Datos entre Controles (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: viernes, 17 de septiembre de 2010 02:00 p.m. Bogotá
4. WCF Ria Services, Datos XML, JSON. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
5. Hospedar Silverlight (ASP.net, PHP, HTML), Acceso al HTML (DOM), Aplicaciones fuera del Navegador. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
Hace un tiempo, algún estudiante de uno de los cursos me pregunto como se podía agregar campos de manera dinámica y que estos pueda enviar los datos al servidor ya sea mediante QueryString o mediante AJAX.
Así que haremos comencemos con la demostración.
1. Vamos a crear un nuevo proyecto o tomar un proyecto ya existente (sea una MVC o WebSite o Aplicación web)
Para ello vamos al menú Archivo->Nuevo->WebSite
2. Agregaremos la referencia a la librería de JQuery en la cabecera (HEAD del html).
<head runat="server">
<title>Demo Agregar textbox dinámico</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
</head>
3. Ahora agregaremos un enlace que invocara a la función de JavaScript que agregara los Campos y otro que enviara los datos por QueryString, adicionalmente un DIV donde se mostraran los campos.
<body>
<form id="form1" runat="server">
<div >
<a href="#" onclick="AgregarCampos();">Agregar Campo</a>
<a href="#" onclick="EnviarDatos();">EnviarDatos</a>
<div id="campos">
</div>
</div>
</form>
</body>
4. Ahora las dos funciones que nos permitirán hacer lo que sea ha planteado desde el inicio de este articulo.
<head runat="server">
<title>Demo Agregar textbox dinámico</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//Consecutivo de campos a agregar
campoNuevo = 0;
//Funcion de agregar campos
function AgregarCampos() {
campoNuevo = campoNuevo + 1;
campo = '<li><label>Campo ' + campoNuevo + ':</label><input type="text" size="20" name="campo' + campoNuevo + '" /></li>';
$("#campos").append(campo);
}
//Pasar los valores txt por QueryString
function EnviarDatos() {
var query = "";
$('input[type=text][name!=""]').each(function (index, domEle) {
//alert(index + ': ' + $(domEle).val());
query = query + "&campo" + index + "=" + $(domEle).val();
});
window.location.href = "/CamposAdicionales.aspx?" + query;
}
</script>
</head>
5. Y ahora en la hoja de código de la pagina capturaremos la información proveniente del querystring
protected void Page_Load(object sender, EventArgs e)
{
//Contamos cuantos valores vienen por QueryString
int iCount = Request.QueryString.Count;
//Recorremos cada uno de los valores recibidos
for (int i = 1; i <= iCount; i++)
{
//Mandamos a escribir los valores a la pagina
Response.Write(Request.QueryString[i-1]);
}
}
Ya con esto ustedes pueden reinventar la rueda
, pueden ver esta demo en el
siguiente link
A mas de uno nos agrada la idea de tener en nuestra aplicación un TextBox que se autocomplete con la información que el usuario va escribiendo. Existen muchos plugins de JQuery que permite realizar esta funcionalidad y que a su ves le agregan un efecto adicional como por ejemplo el autocomplete de FaceBook.
En esta ocasión le mostrare como realizar su propio autocomplete con JQuery 1.4.2 y Jquery UI que nos permite hacer lo que deseamos sin plugins adicionales, y la data la vamos a obtener de un JsonResult de nuestra aplicación MVC (aunque también lo pueden hacer con un WebServices o un WebForms que maneje WebMethods).
1. Crearemos un Proyecto de tipo MVC 2 (Menú Archivo->Nuevo->Proyecto)
2. En nuestra carpeta Models vamos agregar una nueva clase: Esta nueva clase vamos a simular algunos datos, o si prefieren pueden enlazar la información a un Entity Framework.
Le damos botón derecho sobre la carpeta Models y seleccionaremos la opción Agregar->Nuevo elemento->Clase, y la llamaremos MPersona.cs (la M adelante es para darnos la idea de que es una clase Models)
3. Agregar Propiedades a la clase.
Agregaremos las propiedades básicas de una persona que son:
Nombre
Apellido
y una ultima propiedad que mostrara la informa completa de las 2 propiedades anteriores al que llamaremos NombreCompleto.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcDemosBlog.Models
{
public class MPersonas
{
public string Nombre { get; set; }
public string Apellido { get; set; }
public string NombreCompleto {
get
{
return string.Format("{0} {1}", Nombre, Apellido);
}
}
}
}
4. Agregar funcionamiento a la Clase.
Ahora lo que queremos es que esto nos devuelva un colección de nombres el cual mostraremos en el textbox a medida que el usuario escriba, para debajo de las propiedades agregadas arriba vamos a crear un método que retorna una lista genérica de la clase persona. El método lo llamaremos ObtenerPersonas() y será estático y publico para solo enfocarnos en retornar la información sin tener que declarar nuevas instancias para acceder al método.
public static List<MPersonas> ObtenerPersona()
{
//Agregamos valores aleatorios
//Este metodo puedes agregar tu propia logica :-)
List<MPersonas> lista = new List<MPersonas>
{
new MPersonas{ Nombre="Alex", Apellido="Jimenez"},
new MPersonas{ Nombre="Pedrito", Apellido="Perez"},
new MPersonas{ Nombre="Jacinta", Apellido="Juarez"},
new MPersonas{ Nombre="Teodoro", Apellido="Finito"},
new MPersonas{ Nombre="Mengano", Apellido="Rojas"},
new MPersonas{ Nombre="Sutano", Apellido="White"}
};
return lista;
}
5. Crear un JsonResult.
Ahora en nuestro HomeController ubicado en la carpeta Controller vamos agregar la siguiente acción que devolverá la información en Formato Json.
/// <summary>
/// Metodo que retorna en formato json el resultado de la busquedad
/// </summary>
/// <param name="term">Termino de busquedad</param>
/// <returns>JSON</returns>
public JsonResult Personas(string term)
{
if (string.IsNullOrWhiteSpace(term))
{
//Si viene el parametro term vacio o con espacio o null
//este devolvera todos los valores del metodo
return this.Json(Models.MPersonas.ObtenerPersona(), JsonRequestBehavior.AllowGet);
}
else
{
//si viene con valor este filtrara la información correspondiente
//a la primera letra del campo NombreCompleto
var query = from p in Models.MPersonas.ObtenerPersona()
where p.NombreCompleto.ToUpper().StartsWith(term.ToUpper())
select p;
return this.Json(query, JsonRequestBehavior.AllowGet);
}
}
Ya con esto podemos hacer nuestra primera prueba que es darle F5 y escribir en la barra de dirección lo siguiente:
http://localhost:mipuerto/home/personas
6. Referencia a las Librerías de JQuery.
Abrimos la MasterPage que se encuentra dentro de la carpeta Views->Shared y en el head le colocaremos los enlaces a las librerías de JQuery 1.4.2 y al JQuery UI 1.8.4 (tanto css y js)
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"
type="text/javascript">
</script>
</head>
7. Agregar los controles al html.
Ahora vamos a la carpeta View luego a HOME y abrimos Index.aspx para agregar un textbox (o input de tipo Text) y div.
<input id="txtAutocomplete" type="text" />
<div id="log" style="overflow: auto;"></div>
8. El AutoComplete;
Ahora debajo de los controles arrojado en la pagina
Index.aspx colocaremos lo siguiente:
<script type="text/javascript">
$(document).ready(function () {
//Para escribir el valor seleccionado en el DIV
function log(message) {
$("<div/>").text(message).prependTo("#log");
$("#log").attr("scrollTop", 0);
};
//Invocacion a la funcion autocomplete
$("#txtAutocomplete").autocomplete({
//Los datos, que son invocado mediante JQuery ajax
source: function (request, response) {
$.ajax({
//Ruta donde buscar los datos
url: "/home/personas",
//Parametros con sus valores a pasar a la url
data: { term: $("#txtAutocomplete").val() },
//Tipo de Dato devuelto
dataType: "json",
//Si todo esta ok, construye los datos a mostrar en el textbox
success: function (data) {
response($.map(data, function (item) {
return {
//Indicamos el Valor
value: item.NombreCompleto,
//el Label si lo desean
// label: item.Nombre,
//y el ID
id: item.Nombre
}
}))
}
})
},
//Minima letra permitida para mostrar la lista de resultado
minLength: 1,
//Cuando seleccione un valor muestra su resultado
select: function (event, ui) {
log("Selecciono Valor: " + ui.item.value + ", id: " + ui.item.id );
}
});
});
</script>
Ya esto con esto es todo.. puedes ver la demo
presionando aquí y el
código fuente de aquíArchivado en: C#,LINQ,Tips,Csharp,ASP.net,Codigo,Principiante,AJAX,Web,JQuery UI,JQuery
Este es el primer de una serie WebCasts donde estaremos utilizando esta fantástica tecnología para desarrollar una aplicación de tipo Album de Fotos.
Estos WebCast están dirigidos para personas que recién empiezan a desarrollar aplicaciones con SilverLight o los que aun no tienen idea de que es, como le comente anteriormente la idea es fomentar el uso de esta tecnología creando un álbum de fotos que es lo que mas les agrada a los estudiantes o a empresarios para visualizar sus productos.
A medida que se realicen los WebCast estaré colocando las demos y las ppts mostradas.
Contenido
1. Introducción a SilverLight, Arquitectura, Evolución, Controles (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: miércoles, 01 de septiembre de 2010 02:00 p.m. Bogotá
2. Animación, Suavización, StoryBoard, Comportamientos, Plantillas de Controles, Pantalla Completa (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
3. Uso de Datos de Prueba, Descarga bajo demanda, Enlace de Datos entre Controles (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin definir
4. WCF Ria Services, Datos XML, JSON. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
5. Hospedar Silverlight (ASP.net, PHP, HTML), Acceso al HTML (DOM), Aplicaciones fuera del Navegador. (Demo, PPT)
Moderador(es): Alexander Jiménez
Duración: 60 Minutos
Fecha de inicio: Sin Definir
Serie de cursos o Guías básicas basados en el Entity Framework 4 que nuestro buen amigo Fernando Loera encontró y publico en su twitter 
. Aquí le dejo los enlaces:
Nuestro buen amigo Miguel Muñoz Serafín, pode a disposición de todos uno mas de sus excelentes cursos de .NET, aquí el detalle:
Guía básica al Entity Framework 4
Entity Framework 4
Para desarrolladores de plataformas distintas a .NET:
Saludos
Fernando García Loera (MVP Lead – Latin America Region)
Archivado en: VB,Tutorial,C#,LINQ,ADO.net,WPF,ASP.net,Codigo,Cursos,Visual Studio,Entity Framework
Hace unos días publique varios artículos con respecto a la invocación de un reporte construido en reporting services (ver el mini-tutorial Parte I, Parte II y Parte III y también el articulo Pasar Parametros) pero lo enfocamos a las aplicaciones web de ASP.net específicamente a los WebForms y en ellos podíamos utilizar un control llamado ReportViewer que nos facilitaba mucho la invocación del reporte.
Ahora la idea es intentar hacer lo mismo con MVC, pero como extraña un bendito pero, en MVC no tenemos el dichoso control y la forma de invocarlo es construyendo una URL con toda la información necesario para ver el reporte (Ver http://technet.microsoft.com/es-ve/library/ms152835.aspx ) por ello quiero mostrarle una forma de hacerlo con JsonResult y JQuery que me permita verlo desde mi aplicación, aunque el código lo pueden usar de manera directa, es decir, sin jquery (este punto se lo mostrare al final).
1. Crear nuestro proyecto MVC
En esta ocasión crearemos un nuevo proyecto de tipo MVC con nuestro Visual Studio 2010 yéndonos al menú Archivo –>Nuevo Proyecto seleccionaremos Aplicación Web de ASP.net MVC 2.
2. Crear un Controlador
Ahora nos ubicamos en la carpeta Controllers y le damos botón derecho al mouse y seleccionamos la opción Agregar->Controlador y lo llamaremos ReporteController.
3. Código en el ReporteController
En el ReporteController agregaremos en siguiente Código:
/// <summary>
/// Método que devuelve la información en formato JSON
/// </summary>
/// <param name="id">Parámetro que permitirá filtrar el reporte</param>
/// <returns>Retorna el iframe construido en el stringbuilder en formato json</returns>
public JsonResult VerReporte(string id)
{
//URL Visor del Servidor de Reporting Services
string sServidor = "http://localhost/ReportServerSQL2008";
//Carpeta donde tenemos los reportes
string sCarpeta = "DemoRS";
//Nombre del Reporte
string sReporte = "Contacto";
//Los parámetros con sus respectivos valores
string sParametroValor = "&ContactID=" + id.Trim();
//Comandos a pasar al Visor de Reporting Services
//Esos comandos los consigue en: http://technet.microsoft.com/es-ve/library/ms152835.aspx
string sComandosRS = "&rs:Command=Render&rs:Format=HTML4.0&rc:Parameters=false";
//StringBuilder para crear un iFrame
StringBuilder sb = new StringBuilder();
sb.Append("<iframe id='ifReporte' width='100%' style='height: 480px' frameborder='0'");
sb.AppendFormat("src='{0}?/{1}/{2}{3}{4}'",sServidor,sCarpeta,sReporte,sParametroValor,sComandosRS);
sb.Append("></iframe>");
//Retorna el stringBuilder en JSON y se permite todas las peticiones GET
return this.Json(sb.ToString(),JsonRequestBehavior.AllowGet);
}
4. Diseño de la pagina.
Nos ubicaremos en la carpeta Views dentro de ella entraremos a la carpeta Home y abriremos la pagina Index.aspx y agregaremos el siguiente código HTML
<%--Una caja de texto para escribir el Codigo a buscar--%>
<input type="text" name="txtContactID" id="txtContactID" />
<%--Boton que invoca a la funcion para visualizar el reporte--%>
<input id="btnVerReporte" type="button" value="Ver Reporte" onclick="InvocarReporte();" />
<br />
<%--span para que dibuje el iframe generado en el ReporteController--%>
<span id="reporte"></span>
5. Invocar el resultado de JSON a través de JQuery.
Para poder invocar el resultado del JsonResult desde JQuery vamos a utilizar el Metodo $.getJSON (http://api.jquery.com/jQuery.getJSON/) que nos permitirá cargar los datos a través de una petición GET, y el código que le mostrare a continuación lo pueden colocar debajo del <span id=’reporte’></span>.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
function InvocarReporte() {
//Almacenamos el valor en una variable
var id = $('#txtContactID').val();
//Verificamos que sea diferente de vacio
if (id != '')
//Invocamos al getJSON
$.getJSON("/Reporte/VerReporte/" + id, function (data) {
//Muestra el iframe
$('#reporte').html(data);
});
};
</script>
Hasta allí todo debería funcionarles perfectamente.. como verán no fue tan complicado y pueden hacer la misma filosofía sin JQuery y sin el JSON y seria de la siguiente manera.
En el ReporteController notaran que también hay un método llamado Index y le agregaremos un parámetro de entrada de tipo string.
public ActionResult Index(string id)
{
//Verificamos que venga un valor
if (id != null)
{
//URL Visor del Servidor de Reporting Services
string sServidor = "http://localhost/ReportServerSQL2008";
//Carpeta donde tenemos los reportes
string sCarpeta = "DemoRS";
//Nombre del Reporte
string sReporte = "Contacto";
//Los parámetros con sus respectivos valores
string sParametroValor = "&ContactID=" + id.Trim();
//Comandos a pasar al Visor de Reporting Services
//Esos comandos los consigue en: http://technet.microsoft.com/es-ve/library/ms152835.aspx
string sComandosRS = "&rs:Command=Render&rs:Format=HTML4.0&rc:Parameters=false";
//StringBuilder para crear un iFrame
StringBuilder sb = new StringBuilder();
sb.Append("<iframe id='ifReporte' width='100%' style='height: 480px' frameborder='0'");
sb.AppendFormat("src='{0}?/{1}/{2}{3}{4}'", sServidor, sCarpeta, sReporte, sParametroValor, sComandosRS);
sb.Append("></iframe>");
//Guardamos el StringBuilder en un diccionario de Datos
ViewData["Reporte"] = sb.ToString();
}
else
{
//Si no se recibe parámetro este almacenara un valor vacío.
ViewData["Reporte"] = string.Empty;
}
//Retorna a la Vista Index
return View();
}
Ahora estando dentro de este código le daremos botón derecho del mouse y crearemos una nueva Vista.
Ahora en este abrirá la pagina Index.aspx de Reporte y en el HTML agregaremos lo siguiente.
<h2>Index</h2>
<%: Html.ActionLink("Ver Reportes","Index",new { id=3 } )%>
<%= HttpUtility.HtmlDecode( ViewData["Reporte"].ToString()) %>
Para probar este ultimo basta con entrar a la URL “http://localhost:tupuerto/Reporte”.
Espero que esto le sea de utilidad, nos vemos hasta una próxima publicación…
Luego de crear el reporte (ver el mini-tutorial Parte I, Parte II y Parte III) vamos agregar un parámetro al reporte y luego desde Visual Studio le pasamos el valor a ese parámetro.
1. Lo primero es revisar las partes del mini-tutorial y luego en el reporte creado en la parte II vamos abrirlo y nos dirigimos a la pestaña de Datos:
2. Modificamos el Query que allí creamos, agregándole una sentencia where para filtrar la información por el ContactID
Select ContactID, FirstName, LastName, EmailAddress, Phone from Person.Contact
Where ContactID=@ContactID
3. Ejecutamos la consulta para probar y que a su vez Reporting Services genere este parámetro dentro del reporte.
4. Para visualizar el parámetro generado en el reporte solo basta con ir al menú Informe-> Parámetros del Informe este le mostrara un cuadro de dialogo como este:
En esta ventana podrán visualizar la lista de todos los parámetros agregados a la consulta y pueden asignarles propiedades especificas como que valores permite, si el campo será visible, si es el resultado que viene de otra consulta, etc, etc. Además si lo prefieren pueden agregar mas parámetros y luego se lo asocian a la consulta de la siguiente forma.
En la sección de datos verán tres puntos suspensivos “…” allí les aparecerá un cuadro de dialogo y se ubicaran en el tab de parámetros, en ese lugar le dirán a que parámetro le pasaran el valor agregado en el parámetro del informe.
Y ateniendo esto listo, le damos al proyecto o directamente al reporte botón derecho y seleccionamos la opción “Implementar o Deploy”.
Ahora desde Visual Studio exactamente en nuestro proyecto (me estoy basando en el proyecto creado en la parte III del mini-tutorial) escribiremos lo siguiente:
Al código mostrado en el articulo anterior le agregamos esto:
//Definimos los parámetros
ReportParameter parametro = new ReportParameter();
parametro.Name = "ContactID";
parametro.Values.Add("2");//txtContactID.Text
//Aquí le indicaremos si queremos que el parámetro
//sea visible para el usuario o no
parametro.Visible = false;
//Crearemos un arreglo de parametros
ReportParameter[] rp = { parametro };
//Ahora agregamos el parámetro en al reporte
ReportViewer1.ServerReport.SetParameters(rp);
ReportViewer1.ServerReport.Refresh();
y el código completo seria:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Reporting.WebForms;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//Le indicamos al Control que la invocación del reporte será de modo remoto
ReportViewer1.ProcessingMode = ProcessingMode.Remote;
//Le indicamos la URL donde se encuentra hospedado Reporting Services
ReportViewer1.ServerReport.ReportServerUrl = new Uri("http://localhost/ReportServer");
//Le indicamos la carpeta y el Reporte que deseamos Ver
ReportViewer1.ServerReport.ReportPath = "/DemoRS/Contacto";
//Definimos los parámetros
ReportParameter parametro = new ReportParameter();
parametro.Name = "ContactID";
parametro.Values.Add("2");//txtContactID.Text
//Aqui le indicaremos si queremos que el parámetro
//sea visible para el usuario o no
parametro.Visible = false;
//Crearemos un arreglo de parámetros
ReportParameter[] rp = { parametro };
//Ahora agregamos el parámetro en al reporte
ReportViewer1.ServerReport.SetParameters(rp);
ReportViewer1.ServerReport.Refresh();
}
}
Este código aplica por si lo estas haciendo desde Visual Studio 2005, 2008 o 2010.
Más artículos
Página siguiente >