sábado, 22 de septiembre de 2012

Como evitar el uso del switch (1/2)

 

Introducción


Suele suceder que muchas veces se tiene una lista de opciones y por cada una cierta lógica por ejecutar, para resolver el problema lo primero que se viene a la mente es usar un switch (c#), o un Select Case (vb.net), pero no se evalúa que existen algunas técnicas para evitar esto usando el poder de POO (Programación Orientada a Objetos)

Imaginamos una aplicación que debe calcular las cuotas basado en ciertos parámetros, siendo el plazo de cada pago el factor que afecta la formula

imagen1

Lo que primero viene a la mente seria realizar un switch por cada plazo de pago y allí realizar el calculo en cada caso, pero como evitarlo, bien ese será el objetivo del articulo.

 

Cargar combo opciones


El primer paso será la carga del combo, tarea que se realizara haciendo uso de clases y listas, es por eso que asignaremos

private void frmPrincipal_Load(object sender, EventArgs e)
{
    cmdPlazo.ValueMember = "Id";
    cmdPlazo.DisplayMember = "Desc";
    cmdPlazo.DataSource = PlazosHelper.ObtenerPlazosConItemOpcional();

}

para lo cual solo se necesitara de la definición de la clase

public class Plazo
{
    public int Id { get; set; }
    public string Desc { get; set; }
}

También se contara con la ayuda de una clase responsable (definida como static para que sea fácilmente accesible) que cargue los ítems

public static class PlazosHelper
{

    public static List<Plazo> ObtenerPlazos()
    {
        return new List<Plazo>()
        {
            new Plazo() { Id=1, Desc="Un solo pago" },
            new Plazo() { Id=2, Desc="Semanal" },
            new Plazo() { Id=3, Desc="Quincenal" },
            new Plazo() { Id=4, Desc="Mensual" },
            new Plazo() { Id=5, Desc="Bimestral" },
            new Plazo() { Id=6, Desc="Trimestral" },
            new Plazo() { Id=7, Desc="Semestral" },
            new Plazo() { Id=8, Desc="Anual" }
        };
    }

    public static List<Plazo> ObtenerPlazosConItemOpcional()
    {
        List<Plazo> plazos = ObtenerPlazos();
        plazos.Insert(0, new Plazo() { Id = 0, Desc = "<<<Seleccione>>>" });
        return plazos;
    }

}

 

Resolver Calculo


Para resolver el calculo se crea un método que podrá ser invocado desde dos eventos, el cual además proporcionara validaciones básicas

private void cmdPlazo_SelectionChangeCommitted(object sender, EventArgs e)
{
    Calcular();
}

private void cmdCalcular_Click(object sender, EventArgs e)
{
    Calcular();
}

private void Calcular()
{
    errorProv.Clear();

    decimal monto = 0;
    if (!decimal.TryParse(txtMonto.Text, out monto))
    {
        errorProv.SetError(txtMonto, "Debe ingresar un valor numerico");
        return;
    }

    decimal montoporcuota = 0;
    if (!decimal.TryParse(txtMontoPorCuota.Text, out montoporcuota))
    {
        errorProv.SetError(txtMontoPorCuota, "Debe ingresar un valor numerico");
        return;
    }

    PazoPagoResult result = PlazosHelper.CalcularPlazo(Convert.ToInt32(cmdPlazo.SelectedValue), 
                                                        dtpFechaInicio.Value,
                                                        monto,
                                                        montoporcuota);

    txtResultado.Text = result.FechaFin.ToShortDateString();

    dgvListaPagos.DataSource = result.ListaPagos;

}

Pero para llegar al calculo haremos uso de la potencia que provee las interfaces

public interface IResolverPlazo
{
    PazoPagoResult Calcular(DateTime fechainicio, decimal monto, decimal montocuota);
}

La interfaz defina una entidad compleja para devolver la info del calculo

public class PazoPagoResult
{
    public PazoPagoResult()
    {
        this.ListaPagos = new List<ItemPago>();
    }
    public DateTime FechaFin { get; set; }
    public List<ItemPago> ListaPagos { get; set; }
}

public class ItemPago
{
    public DateTime Fecha { get; set; }
    public decimal Monto { get; set; }
}

cada implementación define como se resuelve la lógica, por supuesto aquí solo pondré algunas, pero en el código que descarguen están todas las clases implementadas

public class SinPlazoPago : IResolverPlazo
{
    public PazoPagoResult Calcular(DateTime fechainicio, decimal monto, decimal montocuota)
    {
        return new PazoPagoResult()
        {
            FechaFin = fechainicio,
            ListaPagos = null
        };
    }
}

public class UnSoloPago : IResolverPlazo
{
    public PazoPagoResult Calcular(DateTime fechainicio, decimal monto, decimal montocuota)
    {
        return new PazoPagoResult()
        {
            FechaFin = fechainicio,
            ListaPagos = new List<ItemPago>()
            {
                new ItemPago(){ Fecha = fechainicio, Monto = monto }
            }
        };
    }
}

public class Semanal : IResolverPlazo
{
    public PazoPagoResult Calcular(DateTime fechainicio, decimal monto, decimal montocuota)
    {
        //
        //Se calculan la cantidad de cuotas
        //
        int cantcuotas = Convert.ToInt32(Math.Floor(monto / montocuota));

        //
        // Se define la entidad de respuesta
        //
        PazoPagoResult result = new PazoPagoResult()
        {
            FechaFin = fechainicio.AddDays(7 * cantcuotas)
        };

        //
        //crea la lista de Pagos
        //
        for (int cuota = 1; cantcuotas >= cuota; cuota++)
        {
            ItemPago item = new ItemPago()
            {
                Fecha = fechainicio.AddDays(7 * cuota),
                Monto = montocuota * cuota
            };

            result.ListaPagos.Add(item);
        }

        return result;
    }
}


public class Bimestral : IResolverPlazo
{
    public PazoPagoResult Calcular(DateTime fechainicio, decimal monto, decimal montocuota)
    {
        int cantcuotas = Convert.ToInt32(Math.Floor(monto / montocuota));

        PazoPagoResult result = new PazoPagoResult()
        {
            FechaFin = fechainicio.AddMonths(2 * cantcuotas)
        };


        for (int cuota = 1; cantcuotas >= cuota; cuota++)
        {
            ItemPago item = new ItemPago()
            {
                Fecha = fechainicio.AddMonths(2 * cuota),
                Monto = montocuota * cuota
            };

            result.ListaPagos.Add(item);
        }

        return result;
    }
}

La clase helper solo define el diccionario que mapea el id de la opción con la implementación que resuelve el calculo

public static class PlazosHelper
{

    public static PazoPagoResult CalcularPlazo(int plazo, DateTime fechainicio, decimal monto, decimal montocuota)
    {
        Dictionary<int, IResolverPlazo> resolverPlazos = new Dictionary<int, IResolverPlazo>()
        {
            {0, new SinPlazoPago()},
            {1, new UnSoloPago()},
            {2, new Semanal()},
            {3, new Quincenal()},
            {4, new Mensual()},
            {5, new Bimestral()},
            {6, new Trimestral()},
            {7, new Semestral()},
            {8, new Anual()},
        };

        return resolverPlazos[plazo].Calcular(fechainicio, monto, montocuota);
    }


}

Se usa el id del plazo para determinar la posición del Dictionary<> y poder así determinar que instancia hacer uso para lanzar el calculo, como todas las clase implementan la misma interfaz se puede invocar sin problemas

Conclusión


La ventaja de usar clases por sobre un simple switch se ve reflejada en la posibilidad de extender el código con el solo hecho de definir nuevas implementaciones de las clases que heredan de la interfaz definida.

En este caso no se implemento, pero podría llevarse el código de las clases que resuelven el calculo a una assembly (dll) separado y poder de forma dinámica alterar la lógica según sea necesario, sin afectar por ello al código core de la aplicación, por configuración se podría indicar que librería cargar en cada momento.

 

Código


[C#]
 

[ASP.NET] Master Page - Referencia relativa a elementos de la página

 

Introducción


Durante el diseño de un sitio web la referencia a los elementos dentro de la página es un aspecto que genera errores en el desarrollo.

Este problema se potencia aun mas si se hace uso de Master Page, pues el diseño del master contendrá objetos que aplicaran con diferentes url relativas según donde se encuentre la página web desarrollada.

Recordemos que al final quien determina la url final es la pagina aspx y no el master page.

 

Detección de problema


Imaginemos que tenemos un desarrollo simple de solo dos paginas y una master page, como ser:

imagen1

Como se observa en la estructura del ejemplo tenemos el master page se encuentra en el raíz del sitio junto con una pagina de inicio, pero también observamos una carpeta que contendrá paginas pertenecientes a un modulo de administración, ambos aspx observados implementaran el mismo MasterPage.

Un diseño lógicamente nos indicaría que aseguráramos que la vista del master page en el Visual Studio este correcta, por lo que si usáramos:

imagen2

En el diseñador del Visual Studio veríamos que parece ir todo sobre ruedas.

Al aplicar el master page a la pagina Default.aspx, no notaríamos mayor problema ya que al igual que la master están ambos al mismo nivel.

imagen3

Pero que sucede si vamos a la pagina que se encuentra dentro de la carpeta Admin

imagen4

Rápidamente se observa que la imagen que define la master no puede ser resuelta adecuadamente, aquí no se observa pero esto mismo que claramente se aprecia con la imagen sucederá con los archivo .js, si se ejecuta la pagina el código cliente fallara porque las librerías de jquery no podrán encontrarse.

 

Resolver el problema


Existen algunas técnicas que pueden ser usadas para resolver el problema de la url relativa.

Una forma simple de lograrlo es por medio del ResolveClientUrl(), si bien en tiempo de diseño no se podrá apreciar el recurso de forma visual en el diseñador del Visual Studio

imagen5

se podrá asegurar con esta técnica que sin importar en que nivel se encuentre la pagina que implementa la master las url generada resolverán de manera correcta.

Ahora al acceder al código de la pagina que se encuentra dentro de la carpeta a un nivel diferente

imagen6

se ha creado la ruta relativa correcta desde la master.

Desde la pagina Default.aspx por encontrarse al mismo nivel la url es distinta pero sigue resolviendo de forma adecuada

imagen7

 

Otras técnicas


Existen otras técnicas que implican código, se podría usar

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterClientScriptInclude(Page, typeof(Page), "jquery", ResolveClientUrl(@"~/Scripts/jquery-1.4.1.js"));
    ScriptManager.RegisterClientScriptInclude(Page, typeof(Page), "jquery.validate", ResolveClientUrl(@"~/Scripts/jquery.validate.js"));
}

El tema es que el ScriptManager.RegisterClientScriptInclude() crea la definición del <script> dentro del tag <form> por lo que el código que podríamos definir en el <head> causaría error.

También se podría intentar usar

protected void Page_Load(object sender, EventArgs e)
{

    HtmlGenericControl jqueryctrl = new HtmlGenericControl("script");
    jqueryctrl.Attributes.Add("type", "text/javascript");
    jqueryctrl.Attributes.Add("src", ResolveClientUrl(@"~/Scripts/jquery-1.4.1.js"));
    this.Page.Header.Controls.Add(jqueryctrl);

    HtmlGenericControl jqvalidatectrl = new HtmlGenericControl("script");
    jqvalidatectrl.Attributes.Add("type", "text/javascript");
    jqvalidatectrl.Attributes.Add("src", ResolveClientUrl(@"~/Scripts/jquery.validate.js"));
    this.Page.Header.Controls.Add(jqvalidatectrl);


}

Esto resolvería el problema anterior colocando el tag <script> dentro del <head>, pero aun así lo ubica por debajo de la sección del ContentPlaceHolder que se define como lugar donde colocar el script de la pagina requiere

Es por eso que lo mas acertado seria definir el html donde se necesita utilizando el ResolveClientUrl()

 

Código


 

jueves, 30 de agosto de 2012

MailMessage – Adjuntar Imagen en el cuerpo del Mail (3/3)

 

Introducción


En la creación de un mail cuyo cuerpo sea HTML se puede requerir que una imagen forme parte del mismo, pero ubicarla como parte del mail será necesario no solo embeberla dentro del contenido sino poder referenciarla para ubicarla en una posición concreta

 

Imagen como recurso


En el archivo embebido como recurso dentro del assembly se define el html del cuerpo del mail

<html>
	<body>
		<h2> Documento con imagen adjunta</h2>
		<br/>
		<img src="cid:estadistica">
	</body>
</html>

en este se usa el cid junto a un nombre para ubicar el recurso de la imagen que se asocia al mail

La definición del recurso se debe realizar en una vista alternativa del mail

AlternateView htmlView = AlternateView.CreateAlternateViewFromString(htmlBody, null, MediaTypeNames.Text.Html);

string imagePath = Path.Combine(TestContext.DeploymentDirectory, "estadistica.jpg");
LinkedResource logo = new LinkedResource(imagePath);
logo.ContentId = "estadistica";
htmlView.LinkedResources.Add(logo);

mail.AlternateViews.Add(htmlView);

es allí donde se define el id del resource de la vista html

El test completo además de la vista html se incluye una vista en texto plano en caso de quien reciba el correo lo este visualizando desde un cliente que no soporta html

[TestMethod]
public void SendMailBodyImage()
{

    //
    // se define la lista de destinatarios
    //
    List<string> destinatarios = new List<string>()
    {
        "xx@gmail.com",
        "xx@hotmail.com"
    };


    MailMessage mail = new MailMessage()
    { 
        Subject = "Mail Test con formato html",
        IsBodyHtml = true
    };


    //
    // se asignan los destinatarios
    //
    foreach (string item in destinatarios)
    {
        mail.To.Add(new MailAddress(item));
    }

    //
    // se crea el mensaje como texto plano
    //
    string plaintextBody = "";

    using (Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("MailSendTest.MailPlainTextBody.txt"))
    using (StreamReader reader = new StreamReader(stream))
    {
        plaintextBody = reader.ReadToEnd();
    }

    AlternateView plainTextView = AlternateView.CreateAlternateViewFromString(plaintextBody, null, MediaTypeNames.Text.Plain);
    mail.AlternateViews.Add(plainTextView);


    //
    // se crea el mensaje html
    //
    string htmlBody = "";

    using (Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("MailSendTest.MailHtmlBody.txt"))
    using (StreamReader reader = new StreamReader(stream))
    {
        htmlBody = reader.ReadToEnd();
    }

    AlternateView htmlView = AlternateView.CreateAlternateViewFromString(htmlBody, null, MediaTypeNames.Text.Html);
   
    string imagePath = Path.Combine(TestContext.DeploymentDirectory, "estadistica.jpg");
    LinkedResource logo = new LinkedResource(imagePath);
    logo.ContentId = "estadistica";
    htmlView.LinkedResources.Add(logo);

    mail.AlternateViews.Add(htmlView);


    //
    // se define el smtp
    //
    SmtpClient smtp = new SmtpClient();
    smtp.Send(mail);


}

Definir la imagen en la carpeta output del Test


Para que el proyecto de test funcione será necesario que la imagen que se adjunta al mail sea ubicada en la carpeta donde el test compila.

Para automatizar esta acción se definir un Test Setting, para ello en la sección “Solution Items” se agrega un nuevo ítem

imagen1

imagen2

Una vez que se crea, solo se hace doble click en el archivo de extensión .testsettings y se define la carpeta que contiene la imagen

imagen3

Esto hará que se copie el imagen que se adjunta en el test, y se pueda localizar dinámicamente usando: TestContext.DeploymentDirectory

Código


Se utiliza VS 2010 para desarrollar el ejemplo

[C#]
 

lunes, 27 de agosto de 2012

MailMessage–Adjuntar Archivo sin bloquearlo (2/3)

 

Introducción


Cuando se necesita enviar un mail que adjunte un documento se suele proporcionando directamente la ruta directa al archivo, la librería smtp que proporciona .net realizara correctamente el attach pero lo mantendrá bloqueado, es por eso que una operación posterior que requiera eliminarlo generara un mensaje como ser

imagen1

 

Adjuntar Archivo sin bloquearlo


Para adjuntar un archivo sin bloquearlo la clave esta en asignar un stream al attach del mail y no directamente el archivos indicando su ruta física.

En este caso se crea un método que ayudara en esta tarea, tomando la ruta del archivo y devolviendo el Stream:

public Stream GetStreamFile(string filePath)
{
    using (FileStream fileStream = File.OpenRead(filePath))
    {
        MemoryStream memStream = new MemoryStream();
        memStream.SetLength(fileStream.Length);
        fileStream.Read(memStream.GetBuffer(), 0, (int)fileStream.Length);

        return memStream;
    }
}

Este método es usado en la línea:

mail.Attachments.Add(new Attachment(GetStreamFile(pdfpath), Path.GetFileName(pdfpath), "application/pdf"));

además de asignar el Stream del archivo se proporciona el nombre y el tipo que se adjunta.

El código completo del test usa la librería iTextSharp para crear un archivo pdf de prueba que será adjunto al mail y finalmente eliminado.

[TestMethod]
public void SendMailAttachFile()
{

    //
    // se genera el pdf que luego se adjuntara al mail
    //
    string pdfpath = Path.Combine(TestContext.TestDeploymentDir, "PDFMailAttach.pdf");

    Document document = new Document();
    PdfWriter writer = PdfWriter.GetInstance(document, new FileStream(pdfpath, FileMode.Create));

    document.Open();
    document.Add(new Paragraph("Documento Adjunto sin Bloquear"));
    document.Close();



    //
    // se define la lista de destinatarios
    //
    List<string> destinatarios = new List<string>()
    {
        "xx@gmail.com",
        "xx@hotmail.com"
    };


    //
    // se crea el mensaje
    //
    string body = "";
   
    using (Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("MailSendTest.MailBody.txt"))
    using (StreamReader reader = new StreamReader(stream))
    {
        body = reader.ReadToEnd();
    }

    MailMessage mail = new MailMessage()
    {
        Body = body,
        Subject = "Mail Test con adjunto",
        IsBodyHtml = false
    };

    //mail.Attachments.Add(new Attachment(pdfpath, "application/pdf"));
    mail.Attachments.Add(new Attachment(GetStreamFile(pdfpath), Path.GetFileName(pdfpath), "application/pdf"));

    //
    // se asignan los destinatarios
    //
    foreach (string item in destinatarios)
    {
        mail.To.Add(new MailAddress(item));
    }


    //
    // se define el smtp
    //
    SmtpClient smtp = new SmtpClient();
    smtp.Send(mail);


    //
    // se elimina el archivo porque no estara bloqueado
    //
    File.Delete(pdfpath);

    Assert.IsFalse(File.Exists(pdfpath));

}

Código


[c#]
 

miércoles, 25 de julio de 2012

MailMessage - Envia mail con GMail (1/3)

 

Introducción


Enviar un mail es una tarea bastante recurrente en las características de toda aplicación, pero existen varias formas de configurarla dependiendo de la necesidad

Analizaremos en este artículo como enviar un mail haciendo uso de un servicio de SMTP publico como es GMail.

Para llevar a cabo la tarea se puede configurar directamente las propiedades, pero es aun mejor si se configuran, lo cual permitiría realizar cambios sin tener que recompilar el código.

 

Envió del Mail configurando las propiedades


Enviar un mail definiendo toda la configuración por código no es aconsejable, pero si es útil cuando uno aun esta realizando prueba del funcionamiento del envió del correo para definir la información que después se volcaría al config

 

[TestMethod]
public void SendMailSinConfig()
{

    List<string> destinatarios = new List<string>()
    {
        "xx@gmail.com",
        "xx@hotmail.com"
    };


    //
    // se crea el mensaje
    //
    string body = "";

    using (Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("MailSendTest.MailBody.txt"))
    using (StreamReader reader = new StreamReader(stream))
    {
        body = reader.ReadToEnd();
    }

    MailMessage mail = new MailMessage()
    {
        From = new MailAddress("xx@gmail.com"),
        Body = body,
        Subject = "Mail Test",
        IsBodyHtml = false
    };


    //
    // se asignan los destinatarios
    //
    foreach (string item in destinatarios)
    {
        mail.To.Add(new MailAddress(item));
    }


    //
    // se define el smtp
    //
    SmtpClient smtp = new SmtpClient()
    {
        Host = "smtp.gmail.com",
        Port = 587,
        UseDefaultCredentials = false,
        Credentials = new NetworkCredential("xx@gmail.com", "password"),
        EnableSsl = true
    };
    

    smtp.Send(mail);

}

En este ejemplo además se añadió un adicional que ayuda bastante en la forma de declarar el texto del cuerpo del mensaje, consiste básicamente en embeber un archivo en el assembly del proyecto.

imagen1

En el código se toma el assembly que se esta ejecutando y de este el stream basado en el namespace que define la ruta al archivo dentro del proyecto.

 

Envió del mail usando Archivo de Configuración


Si bien el MailMessage no varia en la forma de programarse, si lo hizo notablemente la definición de datos que suelen modificarse con mas frecuencia durante la implementación, lo cual implicaría recompilar el código continuamente.

[TestMethod]
public void SendMailUsandoConfig()
{
    List<string> destinatarios = new List<string>()
    {
        "xx@gmail.com",
        "xx@hotmail.com"
    };


    //
    // se crea el mensaje
    //
    string body = "";
   
    using (Stream stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("MailSendTest.MailBody.txt"))
    using (StreamReader reader = new StreamReader(stream))
    {
        body = reader.ReadToEnd();
    }

    MailMessage mail = new MailMessage()
    {
        Body = body,
        Subject = "Mail Test",
        IsBodyHtml = false
    };


    //
    // se asignan los destinatarios
    //
    foreach (string item in destinatarios)
    {
        mail.To.Add(new MailAddress(item));
    }


    //
    // se define el smtp
    //
    SmtpClient smtp = new SmtpClient();
    smtp.Send(mail);

}

El cliente de smtp toma la información del .config

<system.net>
  <mailSettings>
    <smtp from="xx@gmail.com">
      <network host="smtp.gmail.com" port="587" password="password" userName="xx@gmail.com" enableSsl="true" defaultCredentials="false" />
    </smtp>
  </mailSettings>
</system.net>

Pero seguramente habrán notado un problema, la información esta disponible a simple vista, lo cual no es bueno si se define el usuario y password de la cuenta de correo. Es por eso que puede aplicarse encriptación a esta sección del config

 

Envió del mail usando config seguro


Para probarlo es que se creo el segundo proyecto de test, en este se han agregado método para poder proteger la sección del archivo de configuración.

Es necesario mencionar que si bien podría haberse usado de forma directa un sistema de protección como es el RSAProtectedConfigurationProvider, se opta por crear una key propia, esto es debido a que será necesario exportar la clave que se genere para poder llevarla a las PCs (o al servidor) donde resida la aplicación cuando se realice el deploy de la misma.

Sera necesario ejecutar algunos comandos, es por eso que se accede a la consola que proporciona el VS, ya que se hará uso del aspnet_regiis, se hace uso de la misma técnica que se aplica en un entorno web para proteger el config.

imagen2

Los pasos para poder realizar esto serian:

1 - Se crea la key

aspnet_regiis -pc "MailSendKeys" –exp

Es muy importante el –exp ya que este permitirá la exportación de las keys a un archivo

2 - Se exporta la key

aspnet_regiis -px "MailSendKeys" "C:\MailSendKeysFile.xml" -pri

El parámetro –pri exporta la ket publica y privada necesarias para poder trabajar en la encriptación

 

3- Se importa en las PCs donde se hará uso la aplicación

aspnet_regiis -pi "MailSendKeys" "C:\MailSendKeysFile.xml"

Sin esta key en la pc donde estará la aplicación no se podrá leer la sección del config

 

Nota: Las key importadas podrán encontrar en la carpeta:

C:\Documents and Settings\All Users\Application Data\Microsoft\Crypto\RSA\MachineKeys

 

4 – Encriptar la sección del .config

Para ello se definieron dos métodos que solo serán usados una única vez cuando se defina la información que debe configurarse

private void ProtegerMailSettings()
{

    Configuration config = ConfigurationManager.OpenExeConfiguration(ConfigurationUserLevel.None);
    SmtpSection configSection = config.GetSection("system.net/mailSettings/smtp") as SmtpSection;

    if (!configSection.SectionInformation.IsProtected)
    {
        //configSection.SectionInformation.ProtectSection("RSAProtectedConfigurationProvider");
        configSection.SectionInformation.ProtectSection("MailProtectedProvider");
        
        config.Save();
    }

}

private void DesprotegerMailSettings()
{

    Configuration config = ConfigurationManager.OpenExeConfiguration(ConfigurationUserLevel.None);
    SmtpSection configSection = config.GetSection("system.net/mailSettings/smtp") as SmtpSection;

    if (configSection.SectionInformation.IsProtected)
    {
        configSection.SectionInformation.UnprotectSection();
        config.Save();
    }

}

El test de encriptación solo se invoca en una única oportunidad, para que algo como esto:

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">

  <configProtectedData>
    <providers>
      <add name="MailProtectedProvider"
           type="System.Configuration.RsaProtectedConfigurationProvider, System.Configuration, Version=2.0.0.0,
                 Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
           keyContainerName="MailSendKeys"
           useMachineContainer="true" />
    </providers>
  </configProtectedData>
  
  <system.net>
    <mailSettings>
      <smtp from="xx@gmail.com">
        <network host="smtp.gmail.com" port="587" password="password" userName="xx@gmail.com" enableSsl="true" defaultCredentials="false" />
      </smtp>
    </mailSettings>
  </system.net>

</configuration>

 

Pase a ser algo como ser:

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">

  <configProtectedData>
    <providers>
      <add name="MailProtectedProvider"
           type="System.Configuration.RsaProtectedConfigurationProvider, System.Configuration, Version=2.0.0.0,&#xD;&#xA;                 Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"

           keyContainerName="MailSendKeys"
           useMachineContainer="true" />
    </providers>
  </configProtectedData>
  
  <system.net>
    <mailSettings>
      <smtp configProtectionProvider="MailProtectedProvider">
        <EncryptedData Type="http://www.w3.org/2001/04/xmlenc#Element"
          xmlns="http://www.w3.org/2001/04/xmlenc#">
          <EncryptionMethod Algorithm="http://www.w3.org/2001/04/xmlenc#tripledes-cbc" />
          <KeyInfo xmlns="http://www.w3.org/2000/09/xmldsig#">
            <EncryptedKey xmlns="http://www.w3.org/2001/04/xmlenc#">
              <EncryptionMethod Algorithm="http://www.w3.org/2001/04/xmlenc#rsa-1_5" />
              <KeyInfo xmlns="http://www.w3.org/2000/09/xmldsig#">
                <KeyName>Rsa Key</KeyName>
              </KeyInfo>
              <CipherData>
                <CipherValue>OBiEstszUoonJNlFT9FwMePjtX+AdCufd2I8OAzHDYoi7A6GTTuaSqvM6KR9ANLC8fPmcRt/8PMoOK9nnVkRMlc4haKjoL+V1CmEBaqYOD23lBA5bGGIYdtDCZH9N597juNXkx8ISiESNPi9phO999T7cKPbAQ1rkQXmOGOQ9KU=</CipherValue>
              </CipherData>
            </EncryptedKey>
          </KeyInfo>
          <CipherData>
            <CipherValue>zEAsDA84EFb7ta4I0yzOS200HWB9JfPPtioQjn/GEZSGY3rqvmOwKhYGErxIR0E2k+ewPNJKypedeMyB3lAebrHs8kvwKY6R3glrDuvkcJlfN1Ihl3CcFjeBwE5Rkqmx4Jso5d6d8t4P5+GwqxStjJn/evfXBINv3EawkwATc11ch/aSKM1OUMXSz2XUnfAV7mwFehCk+V09YCXL+KjlgqAm3FwSAHCxCV0g1lLnebf7T1d2fELIjw==</CipherValue>
          </CipherData>
        </EncryptedData>
      </smtp>
    </mailSettings>
  </system.net>

</configuration>

 

La sección <configProtectedData> permite definir el proveedor custom que uno creara para hacer uso de la key registrada desde la linea de comando.

imagen4

El keyContainerName corresponde al nombre de la key creada por línea de comando. Mientras que el name del proveedor se asigna a la sección que se esta encriptado.

También es muy importante validar que este definido

imagen3

 

Link de referencia


How To: Encrypt Configuration Sections in ASP.NET 2.0 Using RSA

Importing and Exporting Protected Configuration RSA Key Containers

 

Código


[C#]
 

sábado, 21 de julio de 2012

[Linq] Distinct y GroupBy usando IEquatable<>

 

Introducción


Al hace uso de linq con objetos se presenta un problema ya que no se resuelve de forma correcta la comparaciones entre entidades, esto se debe al hacer uso de un objeto el mismo se compara por medio de la referencia (o sea del puntero en memoria de la instancia de la entidad) y no su contenido

Si se usara tipos simples no se tendría este inconveniente ya que las comparaciones se harían por valor, pero al ser objetos se usa la referencia, es por eso que se será necesario indicar mediante alguna técnica como comparar las entidades.

Para el ejemplo se trabajara con una lista de artículos, declarando una clase del estilo

public class ArticuloBase
{
    public int Id { get; set; }
    public string Nombre { get; set; }

    public int Stock { get; set; }
    public decimal Precio { get; set; }

}

el contenido de las listas tendrá ítems duplicados, aplicando las diferentes técnicas se podría usar linq directamente con los objetos de la lista.

Distinct


Si usamos distinct de linq sobre una lista para evitar duplicados no obtendremos efecto alguno

imagen1

ya que la lista resultante sigue teniendo 4 ítems, cuando debería haber detectado duplicados, para solucionar el problema será necesario definir como es que la entidad debe ser comparada

La primer opción será por medio de un comparador, se define una clase que implemente IEqualityComparer<>

public class ArticuloComparer : IEqualityComparer<ArticuloBase>
{
    public bool Equals(ArticuloBase x, ArticuloBase y)
    {
        return x.Id == y.Id;
    }

    public int GetHashCode(ArticuloBase obj)
    {
        return obj.Id.GetHashCode();
    }
}

esto hace que al usarse como parte del distinct permita conocer que entidades deben ser iguales

imagen2

ahora si se detecto el ítem duplicado y solo se obtiene como resultado 3, es necesario remarcar que en la clase se definio que compara por id, por lo que un diferente stock será descartado.

Existe otra opción valida cuando se usan entidades la cual consiste en implementar la interfaz IEquatable<>, en este caso se definió una clase heredada para separa la implementación y poder testear, pero se podría haber unido todo en una única clase

public class Articulo : IEquatable<Articulo>
{
    public int Id { get; set; }
    public string Nombre { get; set; }

    public int Stock { get; set; }
    public decimal Precio { get; set; }


    #region IEquatable<Articulo> Members

    public bool Equals(Articulo other)
    {
        if (Object.ReferenceEquals(other, null)) return false;

        if (Object.ReferenceEquals(this, other)) return true;

        return this.Id.Equals(other.Id);
    }


    public override int GetHashCode()
    {
        int hashDescription = this.Id == null ? 0 : this.Id.GetHashCode();

        return hashDescription;
    }

    #endregion

}

con esta otra forma se obtiene el mismo resultado

imagen3

 

Group by


Al usar el group by de linq se presentan los mismo problemas que el distinct, la entidad no puede resolver como debe agrupar cada entidad

imagen4

Pero si lo indicamos por medio del IEquatable<>, en ese caso podra reconocer cual, o cuales, propiedades una entidad es igual a otra

imagen5

El articulo 2 ahora si se agrupa y suma su stock

Código


[C#]
 

viernes, 29 de junio de 2012

[ASP.NET] PopUp Edición - Usando Jquery UI Dialog

 

Introducción


En este ejemplo se editaran ordenes de compra pero sin hacer uso alguno de eventos de asp.net, se hará uso de una serie de librerías jquery que ayudaran en el proceso

Solo el botón de filtro y la paginación del gridview conservarán los eventos de asp.net, la edición de la entidad será completamente sin hacer uso de eventos.

Para esto se usara:

  • jquery UI dialog
  • jquery autocomplete
  • jtemplates
  • momentjs

Implementando jQuery Autocomplete


La implementación se encuentra en el archivo autocomplete.js del proyecto, en este simplemente se define

$(function () {

    $("[id*='txtCustomer']").autocomplete({

        source: function (request, response) {

            var params = new Object();
            params.companyName = request.term;

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Default.aspx/GetCustomerList",
                data: JSON.stringify(params),
                dataType: "json",
                async: true,
                success: function (data) {

                    response($.map(data.d, function (item) {
                        return {
                            label: item
                        }
                    }))
                },
                error: function (request, status, error) {
                    alert(jQuery.parseJSON(request.responseText).Message);
                }
            });

        },

        open: function (event, ui) {

            $(this).autocomplete("widget").css({
                "width": 200, "font-size": 12
            });

        },

        select: function (event, ui) {

            $("[id*='txtCustomer']").val(ui.item.label);

        }


    });
});

 

Como puede observarse invoca a un WebMethod implementado en el código de la pagina

[WebMethod]
public static string[] GetCustomerList(string companyName)
{
    string[] list = CustomerRepository.GetCustomer(companyName)
                            .Select(x => x.CompanyName)
                            .ToArray();

     return list;
}

Es importante resaltar el uso de una sección de estilo que permite definir el scroll del desplegable

<style type="text/css">
    .ui-autocomplete {
	    max-height: 200px;
	    overflow-y: auto;
	    /* prevent horizontal scrollbar */
	    overflow-x: hidden;
	    /* add padding to account for vertical scrollbar */
	    padding-right: 20px;
    }
</style>

Implementando Edición GridView


La edición en el control GridView tiene algunos detalles interesantes para el análisis. la selección se implementa por medio de un simple template conteniendo el tag de html de imagen al cual se le asocia un atributo para identificar el id de la orden que define

Este atributo será luego usado por el evento de la imagen cuando hace $(this).attr(“idorder”)

function RegisterEditOrderEvent() {

    $("[id*='gvOrders'] [id*='imgeditorder']").click(function () {

        var orderId = $(this).attr("idorder");

        $('#popuporderedit').dialog({ title: 'Edicion Orden Nro: ' + orderId });
        $('#popuporderedit').data('orderId', orderId);
        $('#popuporderedit').dialog('open');

    });

}

Nota: hay que remarcar como se asigna el id de la orden al dialogo, usando el .data(), usado luego para saber que id esta mostrando el popup

Se observara también que este evento no esta en el clásico $(function(){… para que se cargue cuando la pagina este disponible, sino que es invocado puntualmente ante determinados eventos.

Esto es necesario porque el gridview sigue conservando los eventos de asp.net, y el postback que estos causando quitan las asociaciones de los eventos de jquery adjunta a los controles, a pesar de usar UpdatePanel estos eventos aun existen, por eso se usa al final de cada acción el ScriptManager.RegisterStartupScript() para que vuelva a lanzar la ejecución y rebindear el evento click

protected void gvOrders_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvOrders.PageIndex = e.NewPageIndex;
    LoadGridOrder();

    ScriptManager.RegisterStartupScript(Page, typeof(Page), "registerorderevent", "RegisterEditOrderEvent();", true);

}

protected void btnFiltrar_Click(object sender, EventArgs e)
{
    LoadGridOrder();

    ScriptManager.RegisterStartupScript(Page, typeof(Page), "registerorderevent", "RegisterEditOrderEvent();", true);
}

Edición usando jQuery UI Dialog


La definición es bastante simple, lo que quizás sea complejo es la carga y actualización de los campos de la entidad

$('#popuporderedit').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 500,
    heigth: 250,
    title: 'Edicion Orden Nro:',
    open: function (event, ui) {

        initialize();
        loadOrder($(this).data('orderId'));

    },
    close: function (event, ui) {

        //limpia todos los textbox del popup
        $('#popuporderedit :text').val('');

    },
    buttons: {
        Actualizar: function () {

            updateOrder();

        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

Jquery UI Dialog – Carga controles


La carga de los datos en el popup tiene dos momentos, una de inicialización y otra de asignación de los datos de la entidad que se edita

En este caso la inicialización mas que nada implica cargar los combo

function initialize() {

    loadComboBox('ddlCustomer', 'GetAllCustomer');
    loadComboBox('ddlEmployeer', 'GetAllEmploye');
    loadComboBox('ddlShipVia', 'GetAllShipper');
    
}

function loadComboBox(comboname, webmethodname) {

    var template = "{#foreach $T as record}\
                        <option value='{$T.record.id}'>{$T.record.name}</option>\
                    {#/for}";

    var combo = $('#' + comboname);

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/" + webmethodname,
        data: '{}',
        dataType: "json",
        async: true,
        success: function (data) {

            //combo.setTemplate($("#SelectTemplate").html());
            combo.setTemplate(template);
            combo.processTemplate(JSON.parse(data.d));
           
        },
        error: function (request, status, error) {
            alert(JSON.parse(request.responseText).Message);
        }
    });

}

Es importante notar como se hace uso de jtemplate para definir el <option> de combo. El témplate puede ser definido tanto en una variable, o si este es algo mas complejo podría hacerse en una sección del html

<script type="text/html" id="SelectTemplate">
    {#foreach $T as record}
        <option value="{$T.record.id}">{$T.record.name;}</option>
    {#/for}
</script>

Para que se puede recuperar la info será necesario contar con los webmethod

[WebMethod]
public static string GetAllCustomer()
{
    var list = CustomerRepository.GetAllCustomer()
                            .Select(x => new 
                            {
                                id = x.CustomerID,
                                name = x.CompanyName
                            });

    return JsonConvert.SerializeObject(list);
}

[WebMethod]
public static string GetAllEmploye()
{
    var list = EmployeRepository.GetAllEmploye()
                            .Select(x => new
                            {
                                id = x.EmployeeID,
                                name = x.FullName
                            });

    return JsonConvert.SerializeObject(list);
}

[WebMethod]
public static string GetAllShipper()
{
    var list = ShipperRepository.GetAllShipper()
                            .Select(x => new
                            {
                                id = x.ShipperID,
                                name = x.CompanyName
                            });

    return JsonConvert.SerializeObject(list);
}

Se hace uso de la librería JSON.Net para serializar el objeto anónimo

Para cargar la orden se usa una técnica similar

function loadOrder(orderId) {

    var params = new Object();
    params.orderId = orderId;

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/GetOrder",
        data: JSON.stringify(params),
        dataType: "json",
        async: true,
        success: function (data) {

            var order = JSON.parse(data.d);

            $('#ddlCustomer').val(order.CustomerID);
            $('#ddlEmployeer').val(order.EmployeeID);

            $('#txtOrderDate').val(order.OrderDate);
            $('#txtRequiredDate').val(order.RequiredDate);
            $('#txtShippedDate').val(order.ShippedDate);

            $('#ddlShipVia').val(order.ShipVia);
            $('#txtFreight').val(order.Freight);
            $('#txtShipName').val(order.ShipName);
            $('#txtShipAddress').val(order.ShipAddress);
            $('#txtShipCity').val(order.ShipCity);
            $('#txtShipRegion').val(order.ShipRegion);
            $('#txtShipPostalCode').val(order.ShipPostalCode);
            $('#txtShipCountry').val(order.ShipCountry);


        },
        error: function (request, status, error) {
            alert(JSON.parse(request.responseText).Message);
        }
    });


}

Definiendo el webmethod que envía los datos de la orden

[WebMethod]
public static string GetOrder(int orderId)
{
    var order = OrderRepository.GetOrderById(orderId);

    return JsonConvert.SerializeObject(new
    {
        OrderID = order.OrderID,
        CustomerID = order.CustomerID,
        EmployeeID = order.EmployeeID,

        OrderDate = order.OrderDate.ToShortDateString(),
        RequiredDate = order.RequiredDate.ToShortDateString(),
        ShippedDate = order.ShippedDate.HasValue ? order.ShippedDate.Value.ToShortDateString() : "",

        ShipVia = order.ShipVia,

        Freight = order.Freight,
        ShipName = order.ShipName,
        ShipAddress = order.ShipAddress,
        ShipCity = order.ShipCity,
        ShipRegion = order.ShipRegion,
        ShipPostalCode = order.ShipPostalCode,
        ShipCountry = order.ShipCountry
    }); 

}

Fue necesario redefinir la entidad que se envía y no directo la entidad Order ya que de no hacerse se obtiene un error de referencia circular, causado por las entidades asociadas en Entity Framework

 

Jquery UI Dialog – Actualización


Actualizar la entidad implica crear un objeto javascript que represente la entidad, lo bueno es que JSON.stringify() lo hace muy fácil, mapeando la entidad directamente

function updateOrder() {

    var order = new Object();
    order.OrderID = $('#popuporderedit').data('orderId');

    order.CustomerID = $('#ddlCustomer').val();
    order.EmployeeID = $('#ddlEmployeer').val();

    order.OrderDate = moment($('#txtOrderDate').val(), "DD/MM/YYYY").toDate();
    order.RequiredDate = moment($('#txtRequiredDate').val(), "DD/MM/YYYY").toDate();

    var shippedDate = moment($('#txtShippedDate').val(), "DD/MM/YYYY");
    order.ShippedDate = shippedDate == null ? null : shippedDate.toDate(); 

    order.ShipVia = $('#ddlShipVia').val();
    order.Freight = $('#txtFreight').val();
    order.ShipName = $('#txtShipName').val();
    order.ShipAddress = $('#txtShipAddress').val();
    order.ShipCity = $('#txtShipCity').val();
    order.ShipRegion = $('#txtShipRegion').val();
    order.ShipPostalCode = $('#txtShipPostalCode').val();
    order.ShipCountry = $('#txtShipCountry').val();

    var params = new Object();
    params.order = order;

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/ActualizarOrder",
        data: JSON.stringify(params),
        dataType: "json",
        async: true,
        success: function (data) {

            alert('Actualizacion Correcta');
            $('#popuporderedit').dialog("close");

        },
        error: function (request, status, error) {
            alert(JSON.parse(request.responseText).Message);
        }
    });


}

El único inconveniente fue con las fechas, al encontrarse en formato dd/MM/yyyy esta no era reconocida por javascript, es por eso que con ayuda de momentjs se logro cambiar de formato a una fecha correcta

 

Código


Para el ejemplo se hace uso de Visual Studio 21010, la base de datos es Sql Compract 3.5

 

[C#]
 

miércoles, 27 de junio de 2012

[ASP.NET] PopUp Edición - Usando Ajax Toolkit ModalPopupExtender

 

Introducción

Editar información de un registro puede implicar el navegar de una pagina hacia otra, pero también podría aplicarse otras técnicas como ser el desplegar un dialogo que facilite esta tarea al usuario

 

Implementado AutoCompleteExtender

La búsqueda rápida de un cliente por medio de la aproximación mientras se va escribiendo consta de dos parte, una en el html donde se vincula los controles asp.net con el AutoCompleteExtender, definiendo en este tres propiedades importantes: TargetControlID, ServicePath y ServiceMethod

<div id="search" style="width:100%;height:100%">

    <div class="row">
        <div class="cell searchcell">
            <asp:Label ID="Label1" runat="server" Text="Nombre Compañia:"></asp:Label>
            <asp:TextBox ID="txtCustomer" runat="server" Width="200px" />
            <asp:AutoCompleteExtender ID="aceCustomer" runat="server"
                TargetControlID="txtCustomer"
                ServiceMethod="GetCustomerList"
                ServicePath="Default.aspx"
                MinimumPrefixLength="2"
                CompletionInterval="1000"
                EnableCaching="true"
                CompletionSetCount="12" />
        </div>
    </div>
    <div class="row">
        <div class="cell searchcell" style="text-align:right;">
            <asp:Button ID="btnFiltrar" runat="server" Text="Filtrar" CssClass="button"
                onclick="btnFiltrar_Click" />
        </div>
    </div>

</div>

Es por eso que en la pagina se define el código del servicio encargado de retornar la lista de string de respuesta.

[WebMethod]
[ScriptMethod]
public static string[] GetCustomerList(string prefixText, int count)
{
     string[] list = CustomerRepository.GetCustomer(prefixText, count)
                            .Select(x => x.CompanyName)
                            .ToArray();

     return list;
}

Implementando ModalPopupExtender

Como en este caso es necesario realizar la carga de datos en los controles que formaran el dialogo de edición se deberá realizar un postback al servidor en un evento previo a mostrar el popup.

Para poder llevar esto a cabo se requiere adaptar el modalpopup, asignando el target a un control hidden para poder engañarlo y así dejar libre la acción del gridview.

Al realizar esto se podrá controlar desde el servidor cuando se desplego el dialogo, desde el evento del gridview se realizara la carga de la info en el panel para terminar con el show del dialogo.

protected void gvOrders_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
    int OrderId = Convert.ToInt32(gvOrders.DataKeys[e.NewSelectedIndex].Value);

    InitializeEditPopUp();
    LoadEditData(OrderId);

    mpeEditOrder.Show();
}

El resto del ejemplo lo compone el dialogo de edición, en este caso no se hiso uso de tabla html, sino que se opto por usar css tables.

 

Persistencia


Para guardar y recuperar la información de la base se hace uso de Entity Framework Code First, se utiliza este por lo practico de su uso.

No se pone aquí la definición de todas las clases del dominio ya que puede descargarse el código para un mayor detalle, pero si se plantea la definición del mapeo para que pueda observarse lo simple que este queda.

public class NorthwindContext : DbContext
    {

        public NorthwindContext()
            : base("Northwind")
        {
            Database.SetInitializer<NorthwindContext>(null);
        }


        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {

            modelBuilder.Entity<Order>()
                            .HasKey(x => x.OrderID);
            
            modelBuilder.Entity<Order>()
                            .HasOptional(x => x.Customers)
                            .WithMany(x=>x.Orders)
                            .HasForeignKey(x=>x.CustomerID);

            modelBuilder.Entity<Order>()
                             .HasOptional(x => x.Shipper)
                             .WithMany(x=>x.Orders)
                             .HasForeignKey(x=>x.ShipVia);

            modelBuilder.Entity<Order>()
                             .HasOptional(x => x.Employees)
                             .WithMany(x => x.Orders)
                             .HasForeignKey(x => x.EmployeeID);
            

            modelBuilder.Entity<Customer>()
                            .HasKey(x => x.CustomerID);

            modelBuilder.Entity<Product>()
                            .HasKey(x => x.ProductID);

            modelBuilder.Entity<Shipper>()
                            .HasKey(x => x.ShipperID);


            modelBuilder.Entity<Employe>().ToTable("Employees");
            
            modelBuilder.Entity<Employe>()
                             .HasKey(x => x.EmployeeID)
                             .Ignore(x=>x.FullName);

        }

        public DbSet<Customer> Customers { get; set; }
        public DbSet<Order> Orders { get; set; }
        public DbSet<Shipper> Shippers { get; set; }
        public DbSet<Product> Products { get; set; }
        public DbSet<Employe> Employees { get; set; }

    }

Problemas encontrados

Durante la realización del articulo encontré algunos problemas que podrían considerarse como tips a tener en cuenta.

ReadOnly en TextBox con CalendarExtender

Para permitir al usuario seleccionar una fecha se hace uso de CalendarExtender, algo que se quería evitar es el por escribir, por eso se asigno la propiedad ReadOnly="true", el resultado de esto fue que el control no tomaba la selección de la fecha cuando se lo consultaba en el evento del server.

Se debió quitar el ReadOnly para que el control volviera a funcionar

Controles de Validación

Para la validación de algunos controles se hizo uso de controles de asp.net, los cuales se encontraban dentro del Panel que se despliega en el popup. El uso de estos controles hacia que eventos no se lanzaran.

El problema se debía que los controles de validación dentro del modalpopup no tener el mismo nombre en la propiedad ValidationGroup, solo fue cuestión de asignar un mismo nombre de grupo y se resolvió.

 

Código

Para el ejemplo se hace uso de Visual Studio 21010, la base de datos es Sql Compract 3.5

   

martes, 29 de mayo de 2012

[ASP.NET] - GridView sumar columnas con jquery

 

Introducción

Cuando se trabaja integrando código cliente (javascript) con asp.net seguramente en algún punto se necesite realizar operaciones con tablas, siendo el control GridView  usado en la mayoría de estos casos, es por eso se intentara mostrar las diferentes formas en que se puede realizar operaciones con código cliente usando jquery para trabajar con tablas

Para el ejemplo se listara productos con sus respectivos precios, el usuario completara la cantidad que se solicita de ese producto, realizando el calculo del precio final que deberá abonarse.

 

Calculo del precio por producto

La primer operación que debe programarse corresponde al calculo a nivel de fila, o sea de cada producto. La implementación completa podrá verse en el código dentro de al carpeta “Ej1”.

Como se observa en la imagen la columna del precio unitario es fija, el usuario ingresa una cantidad y al quitar el foco del textbox automáticamente se calcula el precio.

Para lograrlo será necesario adjuntar un evento de cambio a cada textbox del gridview, recordemos que el control termina renderizado como una tabla html, por lo tanto, se puede trabajar en el cliente con el html resultante.

<script language="javascript" type="text/javascript">

    $(document).ready(function() {

        $("#<%=GridView1.ClientID%> [id*='txtCantidad']").change(function() {
        
            var tr = $(this).parent().parent();
            var precio = $("td:eq(1)", tr).html();

            $("td:eq(3) span", tr).html($(this).val() * precio);

        });

    });
    
</script>

Ante un evento se recupera el textbox que lanza la acción, es por eso que se utiliza $(this), el this en este caso es el textbox, se sube dos niveles en la estructura del html, o sea a nivel del <tr> que contiene a ese textbox, para luego aplicar la selección a otra columna, en este caso la del precio, por eso se utiliza td:eq(1) seria la segunda columna (recordar que los índices comienzan en cero)

El ultimo paso será asignar el resultado, se aplica la misma técnica, se selecciona la columna y por tratarse de un label de asp.net el cual renderiza a <span> se usa este selector en jquery.

Si bien en la implementación puede observarse solo una única forma para asignar el evento a los textbox contenido en la columna de gridview pueden ser usados otro selectores de jquery dependiendo la necesitad:

 

Usando el atributo class

En este caso el selector hace uso de un atributo del control para poder localizarlo, todos los textbox que el gridview genere tendrán el mismo atributo “class”

$('#<%=GridView1.ClientID%> .cantidad').change(function() { ….

Es necesario definir este atributo en el control del témplate del grid

Usando un doble selector

En este caso se aplicara una doble selección, primero se selecciona lo definido a la derecha y sobre esto aplica lo definido en al izquierda.

$('td:eq(2) :text', '#<%=GridView1.ClientID%> tr').change(function() {

La parte derecha selecciona todas las filas del grid, mientras que la izquierda toma solo la tercer columna (Cantidad Pedido), el uso de “:text” define que solo los textbox de la celda serán incluidos

 

Usando el operador like *=

Por medio del operador de selección mediante búsqueda aproximada, se puede tomar todos aquellos controles que tengan un misma patrón en su id

$("#<%=GridView1.ClientID%> [id*='txtCantidad']").change(function() {

En el caso del gridview creara un control por cada dato que se le asigne, repitiendo el textbox N veces, pero todos tendrán la palabra txtCantidad en alguna parte de su id

 

Calculo del precio Total

Calcular el precio total, implica sumar una columna completa para tener el precio total que se sumara en el footer del gridview. La implementación completa podrá verse en el código dentro de al carpeta “Ej2”.

El añadido que se realiza a la suma de la fila del grid solo implica la llamada a una funciona para recalcular el total.

Un punto conflictivo cuando se suma una columna es el hecho de paginar la grid, vamos a ver en este caso como se lograría una implementación con y sin paginado

 

Calculo total sin paginado

Al no paginar se puede reconocer el footer como ultima fila de la tabla pudiendo aplicar selectores que tengan en cuenta esta situación.

function CalcularTotal() {

    var total = 0;
    $('#<%=GridView1.ClientID%> tr:not(:last)').each(function() {
    
        var coltotal = parseFloat($("td:eq(3) span", this).html());
        
        if (!isNaN(coltotal)) {
            total += coltotal;
        }

    });

    $('#<%=GridView1.ClientID%> tr:last td:eq(3) span').html(total);
}

Se puede hacer uso de “:last” para agregar o descartar esta ultima fila del grid donde se presentara el total.

Se recorre todas las filas del gridview, dejando fuera el footer, por eso es “:not(:last)”, se esta descartando el ultimo <tr>. Pero si se toma exactamente la ultima fila cuando se quiere asignar el total resultante, por eso se usa el “tr:last”

Nota: por supuesto hay que quitar la propiedad AllowPaging="True" del gridview para probarlo sin paginado

 

Calculo total con paginado

Al tener paginado la ultima final ya no será el footer, por lo tanto usar el :last no funciona, se requiere otras técnicas de selección

function CalcularTotal() {

    var total = 0;
    $("#<%=GridView1.ClientID%> [id*='lblPrecio']").each(function() {

        var coltotal = parseFloat($(this).html());

        if (!isNaN(coltotal)) {
            total += coltotal;
        }

    });

    $("#<%=GridView1.ClientID%> [id*='lblTotal']").html(total);

}

 

Se decide ir directamente a los controles que contienen la información.

Al tomar el valor del <span> (que representa el lblPrecio), puede que este no sea un valor numérico valido, es por eso que se parsea a float, si devuelve NaN es porque no es un numero que sumar.

 

Código

Se ha usado Visual Studio 2008, es necesario SP1 del VS, como base de datos Sql Compact 3.5

 

jueves, 17 de mayo de 2012

[Winforms] TreeView– Cambiar Estado Node con CheckBox

 

Introducción

Muchas veces es necesario cambiar el estado de ítems predecesores o hijo según ciertos criterios, el control TreeView por posee una estructura jerárquica en sus datos es un caso de esta situación.

 

Validar estado de los nodos


En la implementación de código que se puede observar aplica conceptos simples como de validación de estados de los nodos del treeview.

Básicamente consiste en dos parte

  •    validar si el nodo tiene un nodo padre, para lo cual será necesario verificar si todos los hijos están marcados
  •    cambiar el estado a todos los hijos según la marca de este nodo

Estas acciones se realizan sobre el mismo evento ya que implica de forma contextual al nodo que interviene en la acción

 

private void tvCategoryproducts_AfterCheck(object sender, TreeViewEventArgs e)
{
    //
    // Se remueve el evento para evitar que se ejecute nuevamente por accion de cambio de estado 
    // en esta operacion
    //
    tvCategoryproducts.AfterCheck -= tvCategoryproducts_AfterCheck;

    //
    // Se valida si el nodo marcado tiene presedente
    // en caso de tenerlo se debe evaluar los nodos al mismo nivel para determinar si todos estan marcados, 
    // si lo estan se marca tambien el nodo padre
    //
    if (e.Node.Parent != null)
    {
        bool result = true;
        foreach (TreeNode node in e.Node.Parent.Nodes)
        {
            if (!node.Checked)
            {
                result = false;
                break;
            }
        }

        e.Node.Parent.Checked = result;

    }

    //
    // Se valida si el nodo tiene hijos
    // si los tiene se recorren y asignan el estado del nodo que se esta evaluando
    //
    if (e.Node.Nodes.Count > 0)
    {
        foreach (TreeNode node in e.Node.Nodes)
        {
            node.Checked = e.Node.Checked;
        }
    }


    tvCategoryproducts.AfterCheck += tvCategoryproducts_AfterCheck;

}

 

Optimización usando Linq

Linq nos puede evitar tener que escribir un montón de código, sino lo creen solo basta con dar una mirada a la implementación alternativa que evalúa los nodos marcados

En este caso hice uso de los método de extensión ayudado con lambda, pero se podría haber usado la notación linq sin problemas

 

private void tvCategoryproducts_AfterCheck_UsingLinq(object sender, TreeViewEventArgs e)
{
    //
    // Se remueve el evento para evitar que se ejecute nuevamente por accion de cambio de estado 
    // en esta operacion
    //
    tvCategoryproducts.AfterCheck -= tvCategoryproducts_AfterCheck_UsingLinq;

    //
    // Se valida si el nodo marcado tiene presedente
    // en caso de tenerlo se debe evaluar los nodos al mismo nivel para determinar si todos estan marcados, 
    // si lo estan se marca tambien el nodo padre
    //
    if (e.Node.Parent != null)
    {
        e.Node.Parent.Checked = !e.Node.Parent.Nodes.Cast<TreeNode>().Any(x => !x.Checked);
    }

    //
    // Se valida si el nodo tiene hijos
    // si los tiene se recorren y asignan el estado del nodo que se esta evaluando
    //
    if (e.Node.Nodes.Count > 0)
    {
        e.Node.Nodes.Cast<TreeNode>().ToList().ForEach(x => x.Checked = e.Node.Checked);
    }


    tvCategoryproducts.AfterCheck += tvCategoryproducts_AfterCheck_UsingLinq;

}

Código


Se utilizo Visual Studio 2010 y Sql Compect 3.5

  [C# SkyDrive]