Создание элемента управления Rating (VB)

  • Статья

Кристиан Венц (Christian Wenz)

Загрузить PDF-файл

Многие веб-сайты, от электронной коммерции до сайтов сообщества, предлагают своим пользователям оценивать статьи или элементы. Обычно для этого требуются некоторые усилия по написанию кода, но у нас есть набор средств управления.

Общие сведения

Многие веб-сайты, от электронной коммерции до сайтов сообщества, предлагают своим пользователям оценивать статьи или элементы. Обычно для этого требуются некоторые усилия по написанию кода, но у нас есть набор средств управления.

Этапы

Прежде всего, вам потребуется (по крайней мере) два вида изображений: одно для заполненного элемента оценки, а другое для пустого элемента оценки. Элементом оценки обычно является star или смайлик. В этом сценарии вы найдете три файла, smiley.png и empty.png и smiley-done.png в рамках загрузки исходного кода для этого руководства.

Затем создайте файл ASP.NET и начните с добавления ScriptManager в него элемента управления:

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

Затем добавьте Rating элемент управления из набора средств управления ASP.NET AJAX. Для этого примера необходимо задать следующие атрибуты:

  • CurrentRating начальная оценка для использования
  • MaxRating максимальная оценка
  • EmptyStarCssClassкласс CSS, используемый, если элемент оценки ( star ) пуст.
  • FilledStarCssClassкласс CSS, используемый при заполнении элемента оценки ( star )
  • StarCssClass класс CSS, используемый для видимой статистики
  • WaitingStarCssClassкласс CSS, используемый при отправке star оценки обратно на сервер

А вот разметка, которая создает элемент управления оценкой с пятью элементами (смайликами), из которых ни один не заполняется изначально:

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

Три класса CSS, на которые ссылаются, теперь должны отображать соответствующие файлы изображений, что легко сделать с помощью 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>

Убедитесь, что вы указали ширину и высоту трех изображений, в противном случае дисплей может выглядеть немного запутанным.

Наконец, результат оценки должен отображаться для пользователя (или, по крайней мере, сохранен в базе данных). Поэтому добавьте метку для выходных данных текстового сообщения и кнопку отправки, чтобы отправить обратно форму оценки на сервер:

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

В серверном коде получите доступ к элементу управления Оценка через его ID , а затем получите доступ к его CurrentRating свойству, которое представляет собой количество выбранных элементов оценки, в нашем примере значение от 0 до 5.

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

Сохраните страницу и загрузите ее в браузер. При наведении указателя мыши на элементы оценки (изначально пустые) возникает эффект JavaScript: оценка меняется. При нажатии на набор звезд текущая оценка сохраняется. Наконец, при отправке формы серверный код выводит выбранную оценку.

Создание системы оценки с минимальным кодом

Создание системы оценки с минимальным кодом (щелкните для просмотра полноразмерного изображения)

Назад