Creazione di un controllo Rating (C#)

di Christian Wenz

Scarica il PDF

Molti siti Web, da e-commerce a siti della community, offrono ai propri utenti articoli o articoli. Questo richiede in genere alcuni sforzi di codifica, ma abbiamo control Toolkit per la nostra smaltimento.

Panoramica

Molti siti Web, da e-commerce a siti della community, offrono ai propri utenti articoli o articoli. Questo richiede in genere alcuni sforzi di codifica, ma abbiamo control Toolkit per la nostra smaltimento.

Passaggi

Prima di tutto, è necessario (almeno) due tipi di immagini: uno per un elemento di valutazione compilato e uno per un elemento di valutazione vuoto. Un elemento di classificazione è in genere un star o un sorriso. Per questo scenario sono disponibili tre file, smiley.png e empty.png e smiley-done.png come parte dei download del codice sorgente per questa esercitazione.

Creare quindi un nuovo file ASP.NET e iniziare con l'aggiunta di un ScriptManager controllo al file:

<asp:ScriptManager ID="asm" runat="server" />

Aggiungere quindi il Rating controllo dal ASP.NET AJAX Control Toolkit. Gli attributi seguenti devono essere impostati per questo esempio:

• CurrentRating classificazione iniziale da usare
• MaxRating classificazione massima
• EmptyStarCssClassla classe CSS da usare quando un elemento di classificazione ( star ) è vuoto
• FilledStarCssClassla classe CSS da usare quando viene compilato un elemento di classificazione ( star )
• StarCssClass classe CSS da usare per uno stato visibile
• WaitingStarCssClassla classe CSS da usare mentre viene inviata una classificazione star al server

Ecco il markup che crea un controllo di classificazione con cinque elementi (sorrisi) di cui nessuno viene compilato inizialmente:

<ajaxToolkit:Rating ID="r1" runat="server"
 CurrentRating="0" MaxRating="5"
 EmptyStarCssClass="emptypng" FilledStarCssClass="smileypng"
 StarCssClass="smileypng" WaitingStarCssClass="donesmileypng"/>

Le tre classi CSS a cui si fa riferimento devono ora visualizzare i file di immagine appropriati, che è facile da usare CSS:

<style type="text/css">
 .emptypng { background-image: url(empty.png); width: 32px; height: 32px; }
 .smileypng { background-image: url(smiley.png); width: 32px; height: 32px; }
 .donesmileypng { background-image: url(smiley-done.png); width: 32px; height: 32px; }
</style>

Assicurarsi di fornire la larghezza e l'altezza delle tre immagini, in caso contrario, la visualizzazione potrebbe sembrare un po'incagliata.

Infine, il risultato della classificazione deve essere visualizzato all'utente (o, almeno salvato in un database). Quindi aggiungere un'etichetta per l'output di un messaggio di testo e un pulsante invia per pubblicare il modulo di classificazione al server:

<asp:Label ID="Label1" runat="server" />
<input type="submit" id="Submit1" runat="server" value="Rate!" />

Nel codice lato server accedere al controllo Classificazione tramite il ID relativo e quindi accedere alla relativa CurrentRating proprietà, ovvero il numero degli elementi di classificazione selezionati, nell'esempio un valore compreso tra 0 e 5.

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 Label1.Text = "Your rating: " + r1.CurrentRating;
 }
 }
</script>

Salvare la pagina e caricarla nel browser. Quando si passa il puntatore del mouse sugli elementi di valutazione (inizialmente vuoti), si verifica un effetto JavaScript: la classificazione cambia. Quando si fa clic sul set di stelle, la classificazione corrente viene mantenuta. Infine, quando si invia il modulo, il codice lato server restituisce la classificazione selezionata.

Creazione di un sistema di classificazione con codice minimo (Fare clic per visualizzare l'immagine full-size)