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
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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Definire la durata dell'output cache in ASP.NET Core 7
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
Ottimizzare il codice JavaScript utilizzando WeakMap e WeakSet
Definire le impostazioni di cache a livello di controller in ASP.NET Core 7
Gestire tipi complessi in query string grazie a IParsable in ASP.NET Core 7.0
Collegare servizi a Azure Container App con i service connector
Eseguire operazioni con timeout in React
Catturare la telemetria degli eventi di output cache in ASP.NET Core
Utilizzo di Map e Object in Javascript
Gestire gli errori di caricamento delle immagini
Implementare il throttling in ASP.NET Core
I più letti di oggi
- Usare un KeyedService di default in ASP.NET Core 8
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- .NET Conference Italia 2023 - Milano e Online
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Installare le Web App site extension tramite una pipeline di Azure DevOps
- Creare dei grafici con OWC