Un Rating Custom Control con DropDownList e jQuery

di Cristiano Totaro, in ASP.NET 4.0, AJAX, jQueryUserScript,

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:

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

Per rendere più agevole il riutilizzo di questo oggetto in molteplici pagine, o addirittura in più progetti, può essere vantaggiosa la creazione un custom control che incorpori tutta la logica che abbiamo visto fino ad ora. L'idea è quella quindi di creare una classe che erediti da DropDownList, tramite la quale incapsulare il codice javascript necessario. Il primo passo da compiere è modificare il processo di rendering standard di DropDownList, dato che l'elemento select deve essere racchiuso all'interno di un div contenitore. Allo scopo possiamo effettuare l'override dei metodi RenderBeginTag e RenderEndTag come nel codice seguente:

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>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi