jueves, 25 de junio de 2009

Web User Control Star Rating

Hola otra vez mis lectores hoy me encontre con otro desafio al momento de desarrollar pero encontre algo bastante util como la utilizacion de un Web User Control para esto desarrolle un Rating Control como los que se llegan a ver en la mayoria de paginas para calificar algo ya sea un video una foto o lo que quieran

Les dejo el codigo espero les sirva y si pueden ayudarme a hacerlo mas facil ya saben que son bien recibidos los comentarios

Del lado del ascx



Del lado del cs

using System;
using System.Text;
using System.Data;
using System.Collections;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Concurso_ControlStarRating : System.Web.UI.UserControl
{
public int iNumeroEstrellas = 10;
public int iValorActual = 0;
protected void Page_Load(object sender, EventArgs e)
{
SetRanking();
if (!Page.IsPostBack)
{
RellenaEstrellas();
}
}

private void RellenaEstrellas()

{

DataTable dt = new DataTable();

DataColumn dc = new DataColumn("fcValor");

dt.Columns.Add(dc);

ArrayList arValores = new ArrayList();

for (int iNumeroItems = 0; iNumeroItems < iNumeroEstrellas; iNumeroItems++)

{

arValores.Clear();

arValores.Add((iNumeroItems + 1).ToString());

dt.Rows.Add(arValores);

}

dlStarList.DataSource = dt;

dlStarList.DataBind();

}

protected void dlStarList_ItemDataBound(object sender, DataListItemEventArgs e)

{

Image image = (Image)e.Item.FindControl("imgRating");

if (image != null)

{

iValorActual = iValorActual + 1;

image.ImageUrl = "~/Images/EstrellaVacia.gif";

image.ToolTip = iValorActual.ToString();

image.Attributes.Add("onMouseover ", "ShowSelectedStart('" + image.ToolTip + "','" + iNumeroEstrellas.ToString() + "','" + image.ClientID + "');");

image.Attributes.Add("onMouseout ", "ShowUnSelectedStart('" + iNumeroEstrellas.ToString() + "','" + image.ClientID + "','" + hfEstrellaSeleccionada.ClientID + "');");

image.Attributes.Add("onClick ", "SetRating('" + image.ToolTip + "','" + iNumeroEstrellas.ToString() + "','" + image.ClientID + "','" + hfEstrellaSeleccionada.ClientID + "');");

}

}

private void SetRanking()

{

TextBox txt = new TextBox();

StringBuilder sb = new StringBuilder();

sb.AppendLine("<script language=\"javascript\" type=\"text/javascript\">");

sb.AppendLine("function SetRating(iCalificacion,iMaxValue,imgEstrella,oCajaTexto)");

sb.AppendLine("{");

sb.AppendLine(" var txtValor=document.getElementById(oCajaTexto);");

sb.AppendLine(" txtValor.value=iCalificacion");

sb.AppendLine(" var iEstrellaSeleccionada = 0;");

sb.AppendLine(" var sEstrella;");

sb.AppendLine(" var imgSeleccionada;");

sb.AppendLine(" for(iEstrellaSeleccionada = 0; iEstrellaSeleccionada<iMaxValue; iEstrellaSeleccionada++)");

sb.AppendLine(" {");

sb.AppendLine(" sEstrella = imgEstrella.substring(0,(imgEstrella.length-12));");

sb.AppendLine(" sEstrella = sEstrella +padLeft(iEstrellaSeleccionada.toString(),'0',2)+ '_imgRating';");

sb.AppendLine(" imgSeleccionada =document.getElementById(sEstrella);");

sb.AppendLine(" imgSeleccionada.src='../Images/EstrellaVacia.gif';");

sb.AppendLine(" }");

sb.AppendLine(" for(iEstrellaSeleccionada = 0; iEstrellaSeleccionada<iCalificacion; iEstrellaSeleccionada++)");

sb.AppendLine(" {");

sb.AppendLine(" sEstrella = imgEstrella.substring(0,(imgEstrella.length-12));");

sb.AppendLine(" sEstrella = sEstrella +padLeft(iEstrellaSeleccionada.toString(),'0',2)+ '_imgRating';");

sb.AppendLine(" imgSeleccionada =document.getElementById(sEstrella);");

sb.AppendLine(" imgSeleccionada.src='../Images/EstrellaSeleccionada.gif';");

sb.AppendLine(" }");

sb.AppendLine("}");

sb.AppendLine("function ShowSelectedStart(iCalificacion,iMaxValue,imgEstrella)");

sb.AppendLine("{");

sb.AppendLine(" var iEstrellaSeleccionada = 0;");

sb.AppendLine(" var sEstrella;");

sb.AppendLine(" var imgSeleccionada;");

sb.AppendLine(" for(iEstrellaSeleccionada = 0; iEstrellaSeleccionada<iMaxValue; iEstrellaSeleccionada++)");

sb.AppendLine(" {");

sb.AppendLine(" sEstrella = imgEstrella.substring(0,(imgEstrella.length-12));");

sb.AppendLine(" sEstrella = sEstrella +padLeft(iEstrellaSeleccionada.toString(),'0',2)+ '_imgRating';");

sb.AppendLine(" imgSeleccionada =document.getElementById(sEstrella);");

sb.AppendLine(" imgSeleccionada.src='../Images/EstrellaVacia.gif';");

sb.AppendLine(" }");

sb.AppendLine(" for(iEstrellaSeleccionada = 0; iEstrellaSeleccionada<iCalificacion; iEstrellaSeleccionada++)");

sb.AppendLine(" {");

sb.AppendLine(" sEstrella = imgEstrella.substring(0,(imgEstrella.length-12));");

sb.AppendLine(" sEstrella = sEstrella +padLeft(iEstrellaSeleccionada.toString(),'0',2)+ '_imgRating';");

sb.AppendLine(" imgSeleccionada =document.getElementById(sEstrella);");

sb.AppendLine(" imgSeleccionada.src='../Images/EstrellaSeleccionada.gif';");

sb.AppendLine(" }");

sb.AppendLine("}");

sb.AppendLine("function ShowUnSelectedStart(iCalificacion,imgEstrella,oCajaTexto)");

sb.AppendLine("{");

sb.AppendLine(" var txtValor=document.getElementById(oCajaTexto);");

sb.AppendLine(" var iEstrellaSeleccionada = 0;");

sb.AppendLine(" var sEstrella;");

sb.AppendLine(" var imgSeleccionada;");

sb.AppendLine(" for(iEstrellaSeleccionada = 0; iEstrellaSeleccionada<iCalificacion; iEstrellaSeleccionada++)");

sb.AppendLine(" {");

sb.AppendLine(" sEstrella = imgEstrella.substring(0,(imgEstrella.length-12));");

sb.AppendLine(" sEstrella = sEstrella +padLeft(iEstrellaSeleccionada.toString(),'0',2)+ '_imgRating';");

sb.AppendLine(" imgSeleccionada =document.getElementById(sEstrella);");

sb.AppendLine(" imgSeleccionada.src='../Images/EstrellaVacia.gif';");

sb.AppendLine(" }");

sb.AppendLine(" for(iEstrellaSeleccionada = 0; iEstrellaSeleccionada<txtValor.value; iEstrellaSeleccionada++)");

sb.AppendLine(" {");

sb.AppendLine(" sEstrella = imgEstrella.substring(0,(imgEstrella.length-12));");

sb.AppendLine(" sEstrella = sEstrella +padLeft(iEstrellaSeleccionada.toString(),'0',2)+ '_imgRating';");

sb.AppendLine(" imgSeleccionada =document.getElementById(sEstrella);");

sb.AppendLine(" imgSeleccionada.src='../Images/EstrellaSeleccionada.gif';");

sb.AppendLine(" }");

sb.AppendLine("}");

sb.AppendLine("function padLeft(str, pad, count) ");

sb.AppendLine("{");

sb.AppendLine(" while(str.length<count)");

sb.AppendLine(" {");

sb.AppendLine(" str=pad+str;");

sb.AppendLine(" }");

sb.AppendLine(" return str;");

sb.AppendLine("}");

sb.AppendLine("</script>");

Page.RegisterClientScriptBlock("SetRating", sb.ToString());

}

3 comentarios:

Harbox dijo...

Buenas, me parece muy interesante tu post, pero no me funciona.

Me podrías echar una mano? si quieres aquí te dejo mi email.

abolafia @ gmail.com

Un saludo

DarKain dijo...

Hola ya debe de estar resuelto el problema es que cuando pase el codigo a mi blog se comio varias lineas y como ya no aparecieron

Espero te sirva saludos

Harbox dijo...

Sólo dar las gracias a DarKain por su inestimable ayuda y talento.

Decir que efectivamente funciona tal cual lo tiene puesto.