August 2010 - Artículos
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.
Existen muchas formas de emitir un mensaje al usuario luego de que se registra una acción, la mas común es mostrar el mensaje en un Label.
Aquí les mostrare dos formas con un mismo método, 
es decir, el primer método es mostrar el tipo alert de javascript y la segunda es usando el Dialog de JQuery UI.
Antes de empezar necesitamos una pagina vacía con un TextBox para escribir el mensaje y dos Buttons:
El primero en la propiedad Text le colocaremos “Mensaje con Javascript” y el Segundo “Mensaje con JQuery”, seria algo así:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtMensaje" runat="server" Width="380px"></asp:TextBox>
<br />
<asp:Button ID="btnMensajeJavascript" runat="server"
Text="Mensaje con Javascript" onclick="btnMensajeJavascript_Click" />
<asp:Button ID="btnMensajeJQuery" runat="server" Text="Mensaje con JQuery"
onclick="btnMensajeJQuery_Click" />
</div>
</form>
</body>
La primera:
Le damos dobleclick al primer botón y escribiremos lo siguiente:
protected void btnMensajeJavascript_Click(object sender, EventArgs e)
{
//Declaramos un StringBuilder para almacenar el alert que queremos mostrar
StringBuilder sbMensaje = new StringBuilder();
//Aperturamos la escritura de Javascript
sbMensaje.Append("<script type='text/javascript'>");
//Le indicamos al alert que mensaje va mostrar
sbMensaje.AppendFormat("alert('{0}');",txtMensaje.Text);
//Cerramos el Script
sbMensaje.Append("</script>");
//Registramos el Script escrito en el StringBuilder
ClientScript.RegisterClientScriptBlock(this.GetType(), "mensaje", sbMensaje.ToString());
}
La segunda:
Para esta ocasión registraremos en el Head de la pagina las referencias a JQuery y JQuery UI (Pueden descargar el que mas le agrade o usar CDN de Google)
<head runat="server">
<title>Mostrar Mensajes</title>
<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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" />
</head>
Le daremos dobleclick al segundo botón y escribiremos el siguiente código:
protected void btnMensajeJQuery_Click(object sender, EventArgs e)
{
//En esta ocasión agregaremos un literal que a su vez agregaremos un div que nos servira de Dialog
//O si prefieren pueden crear el div directamente en el HTML
Literal li = new Literal();
StringBuilder sbMensaje = new StringBuilder();
//Creamos el Div
sbMensaje.Append("<div id='dialog' title='Mensaje Prueba'>");
//Le indicamos el mensaje a mostrar
sbMensaje.Append(txtMensaje.Text);
//cerramos el div
sbMensaje.Append("</div>");
//Aperturamos la escritura de Javascript
sbMensaje.Append("<script type='text/javascript'>");
sbMensaje.Append("$(document).ready(function () {");
//Destrimos cualquier rastro de dialogo abierto
sbMensaje.Append("$('#dialog').dialog('destroy');");
//le indicamos que muestre el dialogo en modo Modal
sbMensaje.Append(" $('#dialog').dialog({ modal: true });");
//Si quieres que muestre un boton para cerrar el mensaje seria esta linea que dejare en comentario
//sbMensaje.Append(" $('#dialog').dialog({ modal: true, buttons: { 'Ok': function() { $(this).dialog('close'); } } });");
sbMensaje.Append("});");
sbMensaje.Append("</script>");
//Agremamos el texto del stringbuilder al literal
li.Text = sbMensaje.ToString();
//Agregamos el literal a la pagina
Page.Controls.Add(li);
}
Espero que lo mostrado aquí les sea de mucha utilidad.