Vytvoření ovládacího prvku Rating (VB)

Christian Wenz

Stáhnout PDF

Mnoho webů, od elektronického obchodování po komunitní weby, nabízí svým uživatelům hodnocení článků nebo položek. To obvykle vyžaduje určité úsilí při kódování, ale máme k dispozici sadu nástrojů Control Toolkit.

Přehled

Mnoho webů, od elektronického obchodování po komunitní weby, nabízí svým uživatelům hodnocení článků nebo položek. To obvykle vyžaduje určité úsilí při kódování, ale máme k dispozici sadu nástrojů Control Toolkit.

Postup

Nejprve potřebujete (alespoň) dva druhy obrázků: jeden pro vyplněnou položku hodnocení a druhý pro prázdnou položku hodnocení. Položka hodnocení je obvykle star nebo smajlík. V tomto scénáři najdete tři soubory, smiley.png a empty.png a smiley-done.png jako součást stahování zdrojového kódu pro účely tohoto kurzu.

Pak vytvořte nový soubor ASP.NET a začněte přidáním ScriptManager ovládacího prvku:

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

Potom přidejte Rating ovládací prvek z ASP.NET AJAX Control Toolkit. Pro tento příklad je potřeba nastavit následující atributy:

• CurrentRating počáteční hodnocení, které se má použít
• MaxRating maximální hodnocení
• EmptyStarCssClasstřída CSS, která se má použít, když je položka hodnocení ( star ) prázdná
• FilledStarCssClasstřída CSS, která se má použít při vyplnění položky hodnocení ( star )
• StarCssClass třída CSS, která se má použít pro viditelnou statistiku
• WaitingStarCssClasstřída CSS, která se má použít při odesílání hodnocení star zpět na server

A tady je revize, která vytvoří ovládací prvek hodnocení s pěti položkami (smajlíky), z nichž se na začátku nevyplní žádný:

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

Tři odkazované třídy CSS teď musí zobrazit příslušné soubory obrázků, což se pomocí šablon stylů CSS snadno provede:

<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>

Ujistěte se, že jste zadali šířku a výšku tří obrázků, jinak by mohl displej vypadat trochu zmateně.

Nakonec by se měl uživateli zobrazit výsledek hodnocení (nebo alespoň uložený v databázi). Přidejte tedy popisek pro výstup textové zprávy a tlačítko odeslat, které odešle zpět formulář hodnocení na server:

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

V kódu na straně serveru přejděte k ovládacímu prvku Hodnocení prostřednictvím jeho ID a pak přejděte k jeho CurrentRating vlastnosti, což je počet vybraných položek hodnocení, v našem příkladu hodnota mezi 0 a 5.

<script runat="server">
 Sub Page_Load()
 If Page.IsPostBack Then
 Label1.Text = "Your rating: " & r1.CurrentRating
 End If
 End Sub
</script>

Uložte stránku a načtěte ji do prohlížeče. Když najedete myší na (původně prázdné) položky hodnocení, dojde k efektu JavaScriptu: Hodnocení se změní. Když kliknete na sadu hvězdiček, aktuální hodnocení se zachová. Nakonec při odeslání formuláře kód na straně serveru vypíše vybrané hodnocení.

Vytvoření systému hodnocení s minimálním kódem (kliknutím zobrazíte obrázek v plné velikosti)

Předchozí