28 de febrero de 2010

jQueryUI Dialogo Modal o Alert (Ventana Flotante)

jQueryUI_thumb En este artículo veremos un ejemplo de como reemplazar la usadísima función alert() de javascript por un dialogo modal, usando el control Dialog de jQuery UI.


En un post que publiqué el año pasado (jQuery UI – Dialog, Mostrar un Dialog Modal), prometí y cito textualmente:

Una idea práctica de uso de este componente es remplazar el usadísimo alert() de javascript por un dialog modal o ventana flotante mucho más elegante. Para lograrlo basta con crearse una función MostrarMensajeModal() y un pequeño código en cada una de las páginas. Más adelante escribiré un artículo sobre este objetivo en concreto.

Pues el objetivo de este artículo es cumplir lo prometido y obtener un resultado como este:

jQueryUI-Dialog-Modal Ventana FlotanteTendremos una página con un botón “Mostrar Dialogo Flotante”, y al hacer click en él, aparecerá una ventana flotante (Dialogo Básico), como la mostrada en la imagen, muy similar al alert de javascript pero con una apariencia mucho más elegante (dialog box).



Ver demo local jQueryUI Dialog Modal

 

Reemplazar alert() por Dialog Modal (Div Flotante)

Últimamente en mi trabajo estamos usando bastante el framework jQuery, y por supuesto también el plugin jQuery UI. Uno de los controles principales de esta biblioteca es el jQuery UI Dialog. Ahora veremos como incorporar un dialogo o ventana flotante en todas nuestras páginas web de una forma simple y rápida.
Pero comentemos cual será la idea:

  1. Lo primero será crear un .js que incluiremos en todas nuestras páginas, este js (Utiles.js) será el que contendrá la función MostrarMensajeModal(mensajeTexto).
  2. Incluir en nuestras páginas la referencia a Utiles.js y la llamada al inicializador PageInit().
  3. Definir una variable global a la página ($dialog) que almacenará el div flotante que mostrará el dialogo jQuery UI con el mensaje.
Pero bien, veamos el código del archivo Utiles.js
//Función donde inicializamos el dialog
function PageInit() {
  $dialog = $('<div></div>')
       .dialog({
         autoOpen: false,
         title: 'Dialogo Básico',
      modal: true
         });
}

//Función que muestra el div flotante con el mensaje
function MostrarMensajeModal(mensajeTexto) {
  $dialog.text(mensajeTexto);
  $dialog.dialog('open');
}
Ahora un ejemplo de lo que tendremos que hacer en cada una de las páginas:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQueryUI Dialog Demo (alert)</title>

  <link type="text/css" href="http://jquery-
     ui.googlecode.com/svn/tags/1.7/themes/redmond/jquery-ui.css" rel="stylesheet" />
  <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  <script src="../Scripts/Utiles.js?ver=1" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function () {
      var $dialog;
      PageInit();
    });   
  </script>

</head>
<body>
  <div>
     <input id="btnDialog" type="button" value="Mostrar Dialog Flotante"
            onclick="MostrarMensajeModal('Mostrar Dialogo Modal Flotante')" />
  </div>
</body>
</html>

Y listo, con esto será muy simple implementar el mostrar mensaje en un dialogo flotante con jQuery UI Dialog.

Nota: Si lo deseamos podemos incluir las 2 funciones contenidas en Utiles.js en la propia página, pero es mejor dejarlo en un .js independiente para su posterior reutilización en otras páginas web.


Artículos Relacionados:

CSS Resumen

Resumen o consejos sobre Hojas de Estilo en Cascada (CSS). En este post resumiré algunas entradas relacionadas con CSS que iré incorporando poco a poco.

Trucos o consejos CSS

  1. Lista con múltiples columnas.
  2. Generador de CSS3.
  3. Centrar un elemento.
  4. Masonry, jQuery Plugin para organizar contenido en columnas.

Resumen CSS Sheet (Chuletas)

  1. CSS2 Chuleta (descargar PDF). Cortesía de http://www.gosquared.com/liquidicity/archives/1010
  2. CSS3 Chuleta (descargar PDF). Cortesía de http://www.gosquared.com/liquidicity/archives/1010

 

Nota: En este post iré incorporando diferentes artículos que me parezcan interesantes y que estén relacionados con hojas de estilo en cascada (CSS).

23 de febrero de 2010

MetaKeywords y MetaDescription en ASP.NET 4 y C#

MetaKeywords y ASP.NET 4.0: Comentaremos rápidamente esta nueva característica incluida con la nueva versión de Visual Studio 2010 y ASP.NET.

Son muchas las novedades que se incluyen y que vamos descubriendo de a poco en la nueva versión de ASP.NET 4.0, hace unos días atrás les comenté sobre la propiedad ClientIDMode de la clase Web.UI.Control. Hoy quiero hablarles de una de las nuevas características incluidas para mejorar el posicionamiento de nuestras páginas (SEO), me refiero a MetaKeywords y MetaDescription.

MetaKeywords y MetaDescription

Antes de la versión 4 de ASP.NET, para incorporar estas etiquetas era necesario hacerlo en el código de la pagina (.aspx), a partir de esta nueva versión ya lo podemos hacer de forma programática (C# codebehind):

if (!Page.IsPostBack)
{
  Page.Title = "Selector de Fecha en ASP.NET con jQuery";
  Page.MetaKeywords = "DatePicker, ASP.NET, jQuery, jQuery UI";
  Page.MetaDescription = "Ejemplo para dotar a nuestra web de un vistoso selector de
                          fecha con jQueryUI.";
}

Y hasta aquí esta pequeña nota…

21 de febrero de 2010

Serializar y Deserializar con C# 3

C# Serializar / Deserializar un objeto: Veamos un ejemplo práctico y sencillo de como serializar un objeto a un documento XML.

Desde hace bastante tiempo la serialización y deserialización de objetos es algo bastante común en mis proyectos. Pero la novedad de este pequeño post de hoy es que implementaremos ambas acciones haciendo uso de los métodos extensores.

No pretendo explicar aquí que es la serialización o deserialización, asumo que el lector ya conoce este concepto, en caso contrario visita este enlace.

Primero pongamos en contexto de lo que queremos lograr. Imaginemos que tenemos un objeto de Tipo Contacto que queremos serializar en un XML (normalmente se usa para enviarlo a un web services o por cualquier otra razón…) y que posteriormente por alguna otra razón necesitáramos deserializarlo (convertir nuevamente el XML en un objeto de tipo contacto) ver código:

//Creo el objContacto de tipo Contacto
Contacto objContacto =
    new Contacto { IdContacto = 1, Nombre = "Pedro", Telefono = "601010101" };
 
//Serializar objContacto a XML
string xmlContacto = objContacto.SerializarToXml();
 
//Deserializar XML a objContacto
Contacto contactoDeserializado = xmlContacto.DeserializarTo<Contacto>();

Según podemos apreciar en el código expuesto la serialización la logramos usando el método extensor SerializarToXml el cual definiremos mas abajo.

Y para la deserialización empleamos el método DeserializarTo<T>. Pero no me enredo más, pasemos a ver el código de creación de ambos métodos extensores:

//Serializar a XML (UTF-16) un objeto cualquiera
public static string SerializarToXml(this object obj)
{
  try
  {
    StringWriter strWriter = new StringWriter();
    XmlSerializer serializer = new XmlSerializer(obj.GetType());
 
    serializer.Serialize(strWriter, obj);
    string resultXml = strWriter.ToString();
    strWriter.Close();
 
    return resultXml;
  }
  catch
  {
      return string.Empty;
  }
}
 
//Deserializar un XML a un objeto T
public static T DeserializarTo<T>(this string xmlSerializado)
{
  try
  {
    XmlSerializer xmlSerz = new XmlSerializer(typeof(T));
 
    using (StringReader strReader = new StringReader(xmlSerializado))
    {
        object obj = xmlSerz.Deserialize(strReader);
        return (T)obj;
    }
  }
  catch { return default(T); }
}

Y hasta aquí el post…

Nota: Este método de serialización nos devuelve el XML con Encoding.UTF16

 

Artículos Relacionados:

17 de febrero de 2010

LINQ to XML, Modificar Archivo XML

Veamos mediante ejemplos prácticos como modificar un árbol XML con .NET (C#).

En este artículo veremos como adicionar, modificar o eliminar elementos y atributos en documentos XML, usando la nueva tecnología LINQ to XML.

Pero antes veamos el fichero XML con que vamos a trabajar:

 

Archivo XML a Leer

<?xml version="1.0" encoding="utf-8"?>
<Contactos>
  <Contacto>
    <Nombre>Juan</Nombre>
    <EMail>juan@gmail.com</EMail>
    <Telefono Tipo="Móvil">666666666</Telefono>
    <Telefono Tipo="Trabajo">911111111</Telefono>
  </Contacto>
  <Contacto>
    <Nombre>Luis</Nombre>
    <EMail>luis@gmail.com</EMail>
    <Telefono Tipo="Móvil">666777777</Telefono>
  </Contacto>
  <Contacto>
    <Nombre>María</Nombre>
    <EMail>maria@gmail.com</EMail>
    <Telefono Tipo="Móvil">666888888</Telefono>
    <Telefono Tipo="Personal">91222222</Telefono>
  </Contacto>
</Contactos>

 

Adicionar un elemento con LINQ to XML

Existen varias formas en .NET C# para crear un nuevo elemento en un árbol XML, acá expondremos 2 formas distintas:

  1. XElement.Add: Se describe por si solo, adiciona un nuevo elemento.
  2. XElement.SetElementValue: Modifica, agrega o elimina un elemento.

Como vemos en el contenido del archivo XML de arriba, nuestro segundo contacto (Luis) tiene un elemento EMail asociado, imaginemos que queremos modificar el Email. Veamos las 2 variantes de código para obtener dicho resultado:

Método XElement.Add

// Código para adicionar un elemento usando Add (LINQ 2 XML)
private static void Linq2XmlAddEmailUsandoAdd()
{
  XElement xmlContactos = XElement.Load("Contactos.xml");
 
  //Obtener el contacto con nombre Luis
  var contactoLuis =
     (from c in xmlContactos.Descendants("Contacto")
      where c.Element("Nombre").Value.ToUpper() == "LUIS"
      select c).FirstOrDefault();
 
  if (contactoLuis != null)
  {
    string strXml = @"<EMail>luis1@gmail.com</EMail>";
    contactoLuis.Add(XElement.Parse(strXml));
  }
 
}

Si usamos el código que hemos expuesto, en realidad no estamos modificando el Email, sino que estamos adicionando un nuevo Email, es decir para Luis tendríamos ahora 2 Mail, el que tenia anteriormente (luis@gmail.com) y el que recién acabamos de adicionar (luis1@gmail.com). Es decir que no logramos el resultado esperado. Para lograrlo teníamos que haber eliminado el nodo y crearlo nuevamente con el valor correcto.

Veamos ahora el código usando el segundo método:

Método XElement.SetElementValue

// Código para adicionar un elemento usando SetElementValue (LINQ 2 XML)
private static void Linq2XmlAddEmailUsandoSetElementValue()
{
  XElement xmlContactos = XElement.Load("Contactos.xml");
 
  //Obtener el contacto con nombre Luis
  var contactoLuis =
     (from c in xmlContactos.Descendants("Contacto")
      where c.Element("Nombre").Value.ToUpper() == "LUIS"
      select c).FirstOrDefault();
 
  if (contactoLuis != null)
    contactoLuis.SetElementValue("EMail", luis2@gmail.com);
}

Usando este segundo código, sí logramos el resultado esperado, porque el método SetElementValue lo que hace es buscar dentro del elemento contactoLuis, el nodo o elemento EMail y si existe modifica su valor, en caso contrario lo adiciona.

Si nuestro objetivo hubiese sido eliminar el nodo Email, podríamos haber usado el método  SetElementValue  con el segundo parámetro en null:

contactoLuis.SetElementValue("EMail", null);

 

XElement.SetAttributeValue

Al igual que el método SetElementValue, existe un método SetAttributeValue que establece, agrega o elimina un atributo de un elemento. Pero veamos un ejemplo donde le cambiemos el atributo del teléfono que tiene Luis (cambiarlo de Móvil a Trabajo):

// Código para modificar atributo usando SetAttributeValue (LINQ 2 XML)
private static void Linq2XmlSetAttributeValue()
{
  XElement xmlContactos = XElement.Load("Contactos.xml");
 
  //Obtener el contacto con nombre Luis
  var contactoLuis =
     (from c in xmlContactos.Descendants("Contacto")
      where c.Element("Nombre").Value.ToUpper() == "LUIS"
         && c.Element("Telefono").HasAttributes
      select c).FirstOrDefault();
 
  if (contactoLuis != null)
    contactoLuis.Element("Telefono").SetAttributeValue("Tipo", "Trabajo");
}

Nota: En el código anterior, en la consulta hemos preguntado por la propiedad HasAttributes, en realidad carece de sentido en nuestro ejemplo preguntar por dicha propiedad, porque si el elemento Telefono no tuviese atributos igual crearía el atributo Tipo. De todas formas me pareció interesante incorporar la propiedad para que el lector sepa de su existencia, en ocasiones suele ser de utilidad.

De similar manera que sucede con el SetElementValue, si quisiéramos eliminar un atributo usaríamos el método SetAttributeValue con el segundo parámetro nulo (null).

 

Artículos Relacionados:

10 de febrero de 2010

jQuery AJAX y JSON Array

En este post veremos el código de ejemplo de una petición AJAX (usando jQuery) que nos devolverá una colección de objetos complejos.

Hace varios meses escribí un articulo (AJAX jQuery en ASP.Net) donde comentaba las bases del uso de AJAX con jQuery, pero en aquel artículo usamos un ejemplo bien sencillo para una mejor comprensión.
En este post intento ser un poco mas práctico y explicaremos un ejemplo de petición AJAX más parecido a lo que nos encontramos en la vida real, aunque eso sí, un poco más complejo (pero solo un poco, muy poco…)

Ejemplo jQuery AJAX con Array JSON

En nuestro ejemplo de hoy, la página hará una petición AJAX a un PageMethod que devolverá como resultado una colección de la clase Contacto. No devolverá ni un string, ni int, ni DateTime … sino una lista de objetos que veremos como tratarlos en el lado del cliente (AJAX JSON Array).
jQuery Ajax JSON Array
Nuestra página (.aspx) inicialmente solo tendrá un botón (Obtener Contactos). Al hacer clic en este se lanzará la petición jQuery AJAX que retornará una lista de objetos del tipo Contacto. La lista de contactos la transformaremos en un Array JSON que podremos manipular perfectamente en el lado del cliente.

Pero pasemos a ver el código de este ejemplo AJAX.

Ejemplo jQuery AJAX, ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQAjaxArrayJSon.aspx.cs" 
         Inherits="jQuery_Ajax_JQAjaxArrayJSon" %>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head id="Head1" runat="server">   
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" ></script>

    <script type = "text/javascript">
      jQuery(document).ready(function() {
        $('#btnObtContactos').click(getContactos);
      });

      function getContactos() {
        $.ajax({
          type: "POST",
          url: "JQAjaxArrayJSon.aspx/ObtenerContactos",
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {
            var contactos = (typeof response.d) == 'string' ?
                               eval('(' + response.d + ')') :
                               response.d;

            $('#tablaContactos').empty();
            $('#tablaContactos').append('<tr>
                                           <td><b>ID</b></td><td><b>Nombre</b></td>
                                           <td><b>Telefono</b></td><td><b>EMail</b></td>
                                         </tr>');
           
            for (var i = 0; i < contactos.length; i++) {
              $('#tablaContactos').append('<tr>' +
                                    '<td>' + contactos[i].IdContacto + '</td>' +
                                    '<td>' + contactos[i].Nombre + '</td>' +
                                    '<td>' + contactos[i].Telefono + '</td>' +
                                    '<td>' + contactos[i].Email + '</td>' +
                                  '</tr>');
            }
          },
          error: function (result) {
            alert('ERROR ' + result.status + ' ' + result.statusText);
          }
        });
      }
    </script>
  </head>
  <body>
    <form id="form1" runat="server">
    <input type="button" id="btnObtContactos" value="Obtener Contactos" /> <br/><br/>

    <table id='tablaContactos'></table>
    </form>
  </body>
</html>

 

Ejemplo jQuery AJAX, Código C#

public partial class jQuery_Ajax_JQAjaxArrayJSon : System.Web.UI.Page
{
  protected void Page_Load(object sender, EventArgs e) {}

  [WebMethod]
  public static List<Contacto> ObtenerContactos()
  {
    return new List<Contacto>
            {
                new Contacto { IdContacto=14, Nombre="Pedro", Telefono="601 01 01 01",
                               Email = "pedrog@gmail.com" },
                new Contacto { IdContacto=15, Nombre="Maria", Telefono="601 01 01 02",
                               Email = "maria69@gmail.com"  },
                new Contacto { IdContacto=16, Nombre="Juana", Telefono="601 01 01 03",
                               Email = "juana33@gmail.com"  }
            };
  }
}

public class Contacto
{
  public int IdContacto { get; set; }
  public string Nombre { get; set; }
  public string Telefono { get; set; }
  public string Email { get; set; }
}

Pero comentemos un poco el ejemplo AJAX ASP.NET que hemos expuesto:

Lo primero que hicimos en el ASPX fue asociar al evento click del botón btnObtContactos, la función getContactos().

  $('#btnObtContactos').click(getContactos);

Esta función es la que hace la llamada jQuery AJAX, pero detallemos más en las opciones usadas en esta llamada AJAX:

$.ajax() Opciones

  • type: "POST": Con esto estamos especificando el tipo de petición AJAX (HTTP Verb) que haremos al servidor (GET o POST). En nuestro caso hemos usado el método POST.
  • url: "JQAjaxArrayJSon.aspx/ObtenerContactos": Esta propiedad contiene la dirección url del método donde está alojado nuestro servicio web (url / método a invocar). En nuestro caso es un PageMethod (ObtenerContactos) que hemos definido en la propia pagina (JQAjaxArrayJSon.aspx) por simplicidad.
  • data: "{}": Esta propiedad contiene los datos que serán enviados al servidor. En nuestro caso como el PageMethod (ObtenerContactos) no necesita ningún parámetro, pues no enviamos dato alguno. Si por ejemplo, quisiéramos enviar algún dato en la petición AJAX, podríamos hacer algo como esto:
    data: "{'nombre': 'Derbis', 'apellidos': 'Corrales Varela'}"
  • contentType: "application/json; charset=utf-8": Esta propiedad contiene el formato en el que estamos pasando nuestro parámetros al servidor.
  • dataType: "json": Esta propiedad contiene el tipo de dato que esperamos recibir desde el servicio invocado. En nuestro caso JSON evalúa la respuesta y nos retorna un objeto javascript.
  • Por último seteamos success y error, asociándole las funciones que deben ejecutarse al terminarse de procesar la petición AJAX, si todo fue bien se ejecutará la función success, de lo contrario ejecutará la asociada a error. En la función anónima asociada a success lo que hacemos es obtener el Array JSON y llenar la tabla tablaContactos, pero no comentaré más de esto pues no es el objetivo de este artículo.

Luego de esto solo queda comentar el código C#, donde está el PageMethod ObtenerContactos, que no hace nada complicado, solo crea una lista de contactos (List<Contacto>) que devuelve.

Nota: En este ejemplo utilizamos un  PageMethod para hacer la llamada jQuery AJAX, pero también podríamos haber usado un Web Services, WCF, o una simple página. 

 

 

Artículos Relacionados: