sábado, 22 de septiembre de 2012

Como encriptar y desencriptar parametros Query Strings en ASP.NET

Los query strings son un modo facil de pasar informacion de una pagina a otra. El problema con los query strings es que la informacion es visible en la URL. Y muchas veces se ha pasado por alto este detalle y hay veces que necesitamos encriptar cierta informacion para evitar ataques tipo SQL Injection.En el siguiente ejemplo ingresaremos una cadena y mostraremos la misma encriptada en la Barra de Direcciones.
Creamos un sitio wseb y agregamos otro webform aparte del que nos viene por defecto:
En nuestra primera pagina agregamos un textbox y un boton
<body>
    <form id="form1" runat="server">
<div>
        <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
        <asp:Button ID="btn1" runat="server" Text="Button" onclick="btn1_Click" />         
    </div>
    </form>
</body>
escribiremos codigo en el evento Click del boton y declaramos una variable global de tipo string:
string encodedString;//Declare this is in  Global 
    protected void btn1_Click(object sender, EventArgs e)
    {        
        string str = txt1.Text;      
        encodedString = (Convert.ToBase64String(System.Text.ASCIIEncoding.ASCII.GetBytes(str)));      
        Response.Redirect("~/Default2.aspx?str=" + encodedString);    
    }
Este codigo ira en la primera pagina que nos pedira ingresar un texto en el textbox y nos mostrara en la 2 pagina el mismo texto pero en la cadena saldra encriptado como en la foto del principio. Ahora en la 2 pagina agregamos un label este sera el codigo en html:
<div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
Y este es el codigo en C#:
string decodedString;//Declare this is in  Global
    protected void Page_Load(object sender, EventArgs e)
    {
        decodedString = System.Text.ASCIIEncoding.ASCII.GetString(Convert.FromBase64String(Request.QueryString["str"]));
        Label1.Text = decodedString; 
    }
Este pequeño codigo fue un ejemplo de encriptacion basica espero les haya sido util.

Como mostrar efecto Loading de Google en GridView en ASP.NET

Google Loading Gridview ASP.NET
Para lograr el efecto que ven en la imagen vamos a crear un sitio web en C#, y le agregaremos un Control ScriptManager, un Gridview y un DropDownList, ahora crearemos una nueva ficha en el Cuadro de Herramientas:
le ponemos de nombre AJAX y agregamos la dll AjaxControlToolkit, pueden bajarla de aqui pero descarguen la version binaria no el source code. Una vez descargado lo agregamos a nuestro proyecto desde la ficha que creamos, vamos a la opcion Elegir Elementos:
Ajax Control Toolkit
En la pestaña Componentes de .NET Framework agregamos Referencia:
damos click en el boton Examinar y agregamos nuestra dll que bajamos. Una vez descargada podemos utilizar un control UpdatePanelAnimationExtender que necesitaremos para este ejemplo.
UpdatePanelAnimationExtender brinda la facilidad de mostrar alguna animacion mientras el UpdatePanel demora en ejecutar la operacion que se le ha encomendado a realizar.
Por ejemplo si tuviese que mostrar informacion cuyo origen de datos requiere mayor tiempo de ejecucion, pues el UpdatePanelAnimationExtender es la opcion a usar.
El codigo de nuestra pagina sera este:
<body>
    <script type="text/javascript" language="javascript">
        function onUpdating() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // get the gridview element
            var gridView = $get('<%= this.grd.ClientID %>');
            // make it visible
            updateProgressDiv.style.display = '';
            // get the bounds of both the gridview and the progress div
            var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
            var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
            var x;
            var y;
            // do the math to figure out where to position the element
            // center of gridview
            x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
            y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
            // set the progress element to this position
            Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
        }
        function onUpdated() {
            // get the update progress div
            var updateProgressDiv = $get('updateProgressDiv');
            // make it invisible
            updateProgressDiv.style.display = 'none';
        }
    </script>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="updatePanel" runat="server">
            <ContentTemplate>
                <asp:GridView ID="grd" runat="server" OnPageIndexChanging="grd_PageIndexChanging"
                    AllowPaging="true" PageSize="10">
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
        <cc1:ComboBox runat="server">
        </cc1:ComboBox>
        <cc1:UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" runat="server"
            TargetControlID="updatePanel">
            <Animations>
                <OnUpdating>
                    <Parallel duration="0">
    <%-- place the update progress div over the gridview control --%>
                <ScriptAction Script="onUpdating();" />
                </Parallel>
                </OnUpdating>
                <OnUpdated>
                    <Parallel duration="0">
            <%--find the update progress div and place it over the gridview control--%>
                    <ScriptAction Script="onUpdated();" />
                    </Parallel>
                </OnUpdated>
            </Animations>
        </cc1:UpdatePanelAnimationExtender>
        <div id="updateProgressDiv" style="background-color: #CF4342; display: none; position: absolute;">
            <span style="color: #fff; margin: 3px">Loading ... </span>
        </div>
    </div>
    </form>
</body>
El bloque script lo agregue dentro del body para evitar que me aparezca en la pagina este mensaje La colección de controles no puede modificarse porque el control contiene bloques de código (por ej. <% ... %>). .
Ahora en nuestra pagina agregamos el siguiente codigo de C#
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Session["ds"] != null)
            {
                grd.DataSource = Session["ds"] as DataTable;
                grd.DataBind();
            }
            else
            {
                grd.DataSource = CreateDataTable();
                grd.DataBind();
            }
        }
    }
    public DataTable CreateDataTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("Id", typeof(string)));
        dt.Columns.Add(new DataColumn("Name", typeof(string)));
        DataRow dr;
        for (int i = 0; i <= 100; i++)
        {

            dr = dt.NewRow();
            dr[0] = i.ToString();
            dr[1] = "Test" + i.ToString();
            dt.Rows.Add(dr);
        }
        Session["ds"] = dt;
        return dt;
    }

    protected void grd_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        //Remove this on Application server
        System.Threading.Thread.Sleep(3000);
        grd.PageIndex = e.NewPageIndex;
        grd.DataSource = Session["ds"] as DataTable;
        grd.DataBind();
    }
y listo a disfrutar =)

Truco:Filtrar una cadena y extraer numeros en ASP.NET

En este post explicare como extraer numeros de una cadena de caracteres usando expresiones regulares:
Primero creamos un sitio web y agregamos un Textbox, un boton y un label.
damos doble click en el boton y debajo del evento click escribimos esta funcion:
public string ExtractNumbers(string expr)
    {
        return string.Join(null, System.Text.RegularExpressions.Regex.Split(expr, "[^\\d]"));
    }
y llamamos a esta funcion en el evento click del boton de la siguiente manera:
protected void btnExtract_Click(object sender, EventArgs e)
    {
        lblMessage.Text = ExtractNumbers(txtInput.Text);
    }
y

viernes, 21 de septiembre de 2012

Truco:Importar contactos de Gmail en ASP.NET

Muchas veces necesitamos desarrollar aplicaciones web las cuales requieren importar o extraer contactos de Gmail o del libro de direcciones.
En este ejemplo voy a importar contactos Gmail en una aplicacion web ASP.NET usando C# y VB.NET.
Para empezar necesitamos descargar estas 4 .dll que citare abajo:
  1. Google.GData.Apps.dll
  2. Google.GData.Client.dll
  3. Google.GData.Contacts.dll
  4. Google.GData.Extensions.dll
Pueden conseguirlas descargando la API de Google Data e instalando en el sistema. Pueden bajarlo aqui y consiguen las dlls que les mencione antes.
Creamos un nuevo sitio web en C# y agregamos como referencia estas DLLs.
Pulsamos Aceptar y se agregaran a nuestra carpeta BIN del proyecto, ahora agregamos 2 textbox, un listbox y un boton para importar los contactos.
si gustan el codigo HTML de esta parte aqui les paso:
Email Address :


Password :





Contacts:


Ahora en nuestro codigo de la pagina aspx agregamos las siguientes directivas de abajo:
using Google.Contacts;
using Google.GData.Client;
using Google.GData.Contacts;
using Google.GData.Extensions;
y en el evento Click de nuestro boton agregamos este codigo:
//Provide Login Information
        RequestSettings rsLoginInfo = new RequestSettings("", txtEmail.Text, txtPassword.Text);
        rsLoginInfo.AutoPaging = true; 
        // Fetch contacts and dislay them in ListBox
        ContactsRequest cRequest = new ContactsRequest(rsLoginInfo);
        Feed feedContacts = cRequest.GetContacts();
        foreach (Contact gmailAddresses in feedContacts.Entries)
        {
            Console.WriteLine("\t" + gmailAddresses.Title);
            lstContacts.Items.Add(gmailAddresses.Title);
            foreach (EMail emailId in gmailAddresses.Emails)
            {
                Console.WriteLine("\t" + emailId.Address);
                lstContacts.Items.Add(" " + emailId.Address);
            }
        }
Ejecutan el codigo y al pulsar el boton les saldra su lista de contactos como en la figura:

Resaltar fila de GridView al pasar el puntero con Javascript en ASP.NET

Muchos de nosotros queremos controlar el resaltado de ciertas filas del gridview al pasar el puntero, si utilizamos javascript sera facil y podemos hacerlo con algunas lineas de codigo del lado del servidor.
En este ejemplo he usado color de resaltado verde y el grid es sencillo utilice la BD Northwind agregue un SQLDataSource que contiene un select a una tabla y despues lo llame en Origen de Datos desde el GridView.
en el evento DataBound del GridView agregamos este codigo:
foreach (GridViewRow grow in GridView1.Rows)
        {
            grow.Attributes["onmouseover"] = "highlight(this, true);";
            grow.Attributes["onmouseout"] = "highlight(this, false);";
            HttpResponse myHttpResponse = Response;
            HtmlTextWriter myHtmlTextWriter = new HtmlTextWriter(myHttpResponse.Output);
            grow.Attributes.AddAttributes(myHtmlTextWriter);
        }
espero les haya servido el codigo =)

Mostrar total de suma de columnas de Gridview con evento OnBlur y Javascript en ASP.NET

Encontre este truquito navegando un poco por Internet, para esto primero creamos nuestro GridView:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
            onrowdatabound="GridView1_RowDataBound">
        <Columns>        
 <asp:TemplateField HeaderText="col1">
<ItemTemplate>
<asp:TextBox ID="txtcol1" Text='<%#Eval("id1") %>' runat="server">
</asp:TextBox>
 </ItemTemplate>
 </asp:TemplateField> 
  <asp:TemplateField HeaderText="col2">
<ItemTemplate>
<asp:TextBox ID="txtcol2" Text='<%#Eval("id2") %>' runat="server">
</asp:TextBox>
 </ItemTemplate>
 </asp:TemplateField> 
        </Columns>
        </asp:GridView>   
Ahora creamos nuestra funcion JavaScript:
function JvfunonBlur()
    {
      var grid = document.getElementById('<%=GridView1.ClientID %>');
        var col1;
        var totalcol1 = 0;
        var col2;
        var totalcol2 = 0;         
        for (i = 0; i < grid.rows.length; i++) 
        {
            col1 = grid.rows[i].cells[0];
            col2 = grid.rows[i].cells[1];
            
             for (j = 0; j < col1.childNodes.length; j++) 
             {
                if (col1.childNodes[j].type == "text")
                 {
                 if(!isNaN(col1.childNodes[j].value) &&  col1.childNodes[j].value != "")
                     {
                        totalcol1 += parseInt(col1.childNodes[j].value)
                     }
                }
             }            
             for (j = 0; j < col2.childNodes.length; j++)
             {
                if (col2.childNodes[j].type == "text")
                 {
                     if(!isNaN(col2.childNodes[j].value) &&  col2.childNodes[j].value != "")
                     {
                        totalcol2 += parseInt(col2.childNodes[j].value)
                     }
                }
            }
        }
        document.getElementById('<%=txttotal1.ClientID %>').value = totalcol1;
        document.getElementById('<%=txttotal2.ClientID %>').value = totalcol2;
    }   
Llamamos a esta funcion Javascript en el evento RowDataBound en el codigo de C#, aqui abajo veran el codigo completo junto la funcion que llena el Grid en el evento PostBack.
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            FillGrid();
        }
    }
    private void FillGrid()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("id1", typeof(int));
        dt.Columns.Add("id2", typeof(int));
        dt.Rows.Add(0, 0);
        dt.Rows.Add(0, 0);
        GridView1.DataSource = dt;
        GridView1.DataBind();        
    }
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            TextBox txt = (TextBox)e.Row.FindControl("txtcol1");
            txt.Attributes.Add("onBlur", "JvfunonBlur();");
            TextBox txt1 = (TextBox)e.Row.FindControl("txtcol2");
            txt1.Attributes.Add("onBlur", "JvfunonBlur();");
        }
    }
}
Bueno si prefieren pegar el codigo de uno solo aqui esta para la parte .aspx:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function JvfunonBlur()
    {
      var grid = document.getElementById('<%=GridView1.ClientID %>');
        var col1;
        var totalcol1 = 0;
        var col2;
        var totalcol2 = 0;         
        for (i = 0; i < grid.rows.length; i++) 
        {
            col1 = grid.rows[i].cells[0];
            col2 = grid.rows[i].cells[1];
            
             for (j = 0; j < col1.childNodes.length; j++) 
             {
                if (col1.childNodes[j].type == "text")
                 {
                 if(!isNaN(col1.childNodes[j].value) &&  col1.childNodes[j].value != "")
                     {
                        totalcol1 += parseInt(col1.childNodes[j].value)
                     }
                }
             }            
             for (j = 0; j < col2.childNodes.length; j++)
             {
                if (col2.childNodes[j].type == "text")
                 {
                     if(!isNaN(col2.childNodes[j].value) &&  col2.childNodes[j].value != "")
                     {
                        totalcol2 += parseInt(col2.childNodes[j].value)
                     }
                }
            }
        }
        document.getElementById('<%=txttotal1.ClientID %>').value = totalcol1;
        document.getElementById('<%=txttotal2.ClientID %>').value = totalcol2;
    }   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>  
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>    
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
            onrowdatabound="GridView1_RowDataBound">
        <Columns>        
 <asp:TemplateField HeaderText="col1">
<ItemTemplate>
<asp:TextBox ID="txtcol1" Text='<%#Eval("id1") %>' runat="server">
</asp:TextBox>
 </ItemTemplate>
 </asp:TemplateField> 
  <asp:TemplateField HeaderText="col2">
<ItemTemplate>
<asp:TextBox ID="txtcol2" Text='<%#Eval("id2") %>' runat="server">
</asp:TextBox>
 </ItemTemplate>
 </asp:TemplateField> 
        </Columns>
        </asp:GridView>       
        Total
         <br />
        <asp:TextBox ID="txttotal1" runat="server"></asp:TextBox>
        <asp:TextBox ID="txttotal2" runat="server"></asp:TextBox>
        <br />        
    </ContentTemplate>
    </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

sábado, 15 de septiembre de 2012

Filtrar GridView con DropDownList en ASP.NET

En este ejemplo explicare como filtrar un gridview con dropdownlist en ASP.NET usando FilterExpression con SQL y SQLDataSource. Al final del proyecto se vera asi:
Para este ejemplo cree una base de Datos simple llamada Guitarist, y contendra las siguientes columnas de abajo:
CREATE TABLE [dbo].[topguitarist](
 [guitaristid] [int] NULL,
 [playername] [nvarchar](50) NULL,
 [playerstyle] [nvarchar](50) NULL,
 [associatedacts] [nvarchar](50) NULL,
 [famousperformance] [nvarchar](50) NULL
) 
y lo llenan con datos de este archivo Excel:
ahora a nuestro proyecto le agregamos 2 DataSources, 1 DropDownList y un GridView. El primer DataSource lo configuramos para que liste los estilos de musica el cual se cargara en el DropDownList y el segundo sera para el GridView.
Configuramos el origen de datos del SqlDataSource1 y lo ponemos asi:
el segundo SQLDatSource lo configuran que muestre todos los campos de la tabla y agregan un FilterExpression que sera el DropDownList, el codigo sera el siguiente:
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:guitaristConnectionString %>" 
            SelectCommand="SELECT DISTINCT [playerstyle] FROM [topguitarist]">
        </asp:SqlDataSource>
    
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" 
            ConnectionString="<%$ ConnectionStrings:guitaristConnectionString3 %>" 
            
            SelectCommand="SELECT [guitaristid], [playername], [playerstyle], [associatedacts], [famousperformance] FROM [topguitarist]"
            FilterExpression="[playerstyle] like '{0}%'">
            <FilterParameters>
            <asp:ControlParameter ControlID="DropDownList1" Name="playerstyle" 
                    PropertyName="SelectedValue" Type="String" />

            </FilterParameters>
        </asp:SqlDataSource>
Ahora a nuestro DropDownList lo enlazamos con el SQLDataSource1 asi:
Luego de esto vamos a Editar Elementos y Agregamos la Opcion All.
el codigo del DropDownList sera el siguiente:
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
DataSourceID="SqlDataSource1" DataTextField="playerstyle"
DataValueField="playerstyle" AppendDataBoundItems="True">
<asp:ListItem Value="%">All</asp:ListItem>
</asp:DropDownList>
Ahora configuramos nuestro GridView con el data Source, el codigo sera asi:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="Horizontal" 
                AllowPaging="True">
                <Columns>
                    <asp:BoundField DataField="guitaristid" HeaderText="guitaristid"
InsertVisible="False" ReadOnly="True" SortExpression="guitaristid" />
                    <asp:BoundField DataField="playername" HeaderText="playername"
SortExpression="playername" />
                    <asp:BoundField DataField="playerstyle" HeaderText="playerstyle"
SortExpression="playerstyle" />
                    <asp:BoundField DataField="associatedacts" HeaderText="associatedacts"
SortExpression="associatedacts" />
                    <asp:BoundField DataField="famousperformance" HeaderText="famousperformance"
SortExpression="famousperformance" />
                </Columns>
                <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
                <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
                <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
            </asp:GridView>
Si configuran todo bien les saldra como el ejemplo de arriba =)