Entity Framework: Guías Básicas y el Enfoque

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 Sonrisa. 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)

MVC: Invocar Reporte de Reporting Services con JQuery y JsonResult (Modo Remoto)

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.

image

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.

image

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.

image

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…

ASP.net: Pasar parámetros a un reporte de Reporting Services (Modo Remoto)

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:

image

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.

image

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:

image

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.

image

image

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.

Tips & Trucos: Mostrar Alerta o Dialog desde el Servidor ASP.net (JavaScript y JQuery UI)

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, Sonrisa 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.