Sdílet prostřednictvím

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

  • Článek

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

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

Předchozí