Создание элемента управления рейтингом (C#)

Кристиан Венц

Скачать в формате PDF

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

Обзор

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

Шаги

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

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

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

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

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

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

<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!" />

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

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

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

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