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
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Utilizzare le collection expression in C#
Eseguire attività con Azure Container Jobs
C# 12: Cosa c'è di nuovo e interessante
Creare gruppi di client per Event Grid MQTT
Implementare il throttling in ASP.NET Core
Reactive form tipizzati con modellazione del FormBuilder in Angular
Utilizzare politiche di resiliency con Azure Container App
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Generare file per il download da Blazor WebAssembly
Gestire undefined e partial nelle reactive forms di Angular
Creare moduli CSS in React
I più letti di oggi
- Impostare un elemento come ridimensionabile tramite CSS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Personalizzare l'errore del rate limiting middleware in ASP.NET Core
- Accedere alla console di una Azure Container App
- Modificare i metadati nell'head dell'HTML di una Blazor Web App
- Gli oggetti CallOut di Expression Blend 4.0
- SQL Server 2005 December CTP
- Sfruttare le nuove tipologie di input di HTML5 con ASP.NET 4.0
- Upload da una pagina web con Dundas Upload