Star Rating Widget è un plugin jQuery che permette di creare il classico controllo di rating con punteggio a stelle, a partire da un set di radio button o da una lista di tipo select. Per poterlo utilizzare è necessario referenziare i file javascript necessari, ossia:

• jQuery, almeno nella versione 1.4.2
• jQuery UI, e nella fattispecie le componenti Core e Widget
• il vero e proprio Star Rating Widget, disponibile all'indirizzo http://orkans-tmp.22web.net/star_rating/index.html

Essi devono essere inclusi in tutte le pagine in cui vogliamo mostrare questo controllo o, alternativamente, nella master page del nostro sito, tramite il codice Html seguente.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ui/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="js/ui/jquery.ui.stars.js"></script>

A questo punto dobbiamo predisporre, all'interno di un div contenitore, l'elemento select che utilizzeremo per mostrare il rating. Se stiamo sviluppando un'applicazione ASP.NET Web Forms, possiamo eventualmente sfruttare il controllo DropDownList. Come vedremo, infatti, in questo modo sarà più facile interagire lato server con l'input dell'utente.

<div id="ratings" runat="server">
  <asp:DropDownList ID="DropDownList1" runat="server">
    <asp:ListItem Text="scarso" Value="1"></asp:ListItem>
    <asp:ListItem Text="non male" Value="2"></asp:ListItem>
    <asp:ListItem Text="sufficiente" Value="3"></asp:ListItem>
    <asp:ListItem Text="buono" Value="4"></asp:ListItem>
    <asp:ListItem Text="ottimo" Value="5"></asp:ListItem>
  </asp:DropDownList>
</div>

Per trasformare questo oggetto in un controllo di rating, è necessario inserire in pagina il javascript seguente, che applica Star Rating Widget ad un div il cui id lato client vale "rating".

<script type="text/javascript">
  $(function () {
    $("#ratings").stars({
        inputType: "select"
      });
  });
</script>

In questo modo, al posto di una normale DropDownList, otterremo in pagina un elemento simile a quello indicato in figura.

Ovviamente la nostra gestione non termina qui, perché con ogni probabilità il valore inserito dall'utente dovrà poi essere sfruttato in una qualche logica lato server, affinché la votazione venga memorizzata. Come abbiamo accennato in precedenza, l'utilizzo di una DropDownList semplifica molto questa operazione, perché ci permette di recuperare tale valore tramite la proprietà SelectedValue. La stessa proprietà può anche essere utilizzata per preimpostare una selezione, ad esempio nel caso vogliamo mostrare la media dei risultati delle votazioni.

Creazione di un componente riutilizzabile

public class DropDownListRating : DropDownList
{
  public override void RenderBeginTag(HtmlTextWriter writer)
  {
    writer.AddAttribute(HtmlTextWriterAttribute.Class, "rating");
    writer.RenderBeginTag(HtmlTextWriterTag.Div);
    base.RenderBeginTag(writer);
  }
  public override void RenderEndTag(HtmlTextWriter writer)
  {
    base.RenderEndTag(writer);
    writer.RenderEndTag();
  }
}

Il div inserito è identificato da una precisa classe CSS, chiamata "rating", che sarà utilizzata come selector di jQuery per attivare Star Rating Widget. Per iniettare il codice javascript possiamo sfruttare l'override del metodo OnInit:

protected override void OnInit(EventArgs e)
{
  base.OnInit(e);

  String csName = "ratingScript";
  Type csType = this.GetType();

  ClientScriptManager cs = Page.ClientScript;

  if (!cs.IsClientScriptBlockRegistered(csName))
  {
    StringBuilder jsCode = new StringBuilder();
    jsCode.Append("<script type=text/javascript>$(function () {");
    jsCode.Append("$('.rating').stars({");
    jsCode.Append("inputType: 'select'");
    jsCode.Append("});");
    jsCode.Append("});");
    jsCode.Append("</script>");
    cs.RegisterClientScriptBlock(csType, csName, jsCode.ToString());
  }
}

Grazie a questi semplici passi, abbiamo a disposizione un controllo pronto per poter essere utilizzato, che possiamo quindi facilmente inserire nelle nostre pagine tramite il seguente markup:

<cc1:DropDownListRating ID="DropDownListRating1" runat="server">
  <asp:ListItem Text="scarso" Value="1"></asp:ListItem>
  <asp:ListItem Text="non male" Value="2"></asp:ListItem>
  <asp:ListItem Text="sufficiente" Value="3"></asp:ListItem>
  <asp:ListItem Text="buono" Value="4"></asp:ListItem>
  <asp:ListItem Text="ottimo" Value="5"></asp:ListItem>
</cc1:DropDownListRating>