• Microsoft .NET
  • ASP.NET
  • Отображение случайно выбранного изображения на веб-странице ASP.NET

Отображение случайно выбранного изображения на веб-странице ASP.NET - Показ случайного изображения при помощи элемента управления ContentRotator

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Страница 3 из 4

Показ случайного изображения при помощи элемента управления ContentRotator

Выбор изображения наугад из каталога прост в реализации, однако данная простота ограничивает общую функциональность. В частности, каждое изображения в указанном каталоге имеет одинаковые шансы быть отображенным. В дополнение, данный код берет в расчет все изображения в указанном каталоге. Тем не менее вам наверняка может понадобиться отобразить только ряд изображений из каталога.

На сайте MSDN компании Microsoft существует статья, которая демонстрирует бесплатный общедоступный элемент управления ContentRotator. Данный элемент легок в использовании: просто укажите, какие изображения должны быть отображены элементом упрвления. Данные изображения можно указать посредством XML-файла, программно добавленного в элемент управления, либо физически, при помощи декларативного синтаксиса элемента. Каждый элемент с содержимым может опционально  обладать весовым фактором, который указывает вероятность его отображения на странице относительно других изображений.

Если ваша информация изображения находится в базе данных, вы можете программно добавить набор изображений в коллекцию Items элемента управления ContentRotator . Поскольку в моем демо-приложении не используется база данных, мы вложим информацию в XML-файл: 

<?xml version="1.0" encoding="utf-8"  ?> 
<contents>
  <content  impressions="16">
    &lt;img src="Images/HeaderImages/1000IslandLake.jpg" border="0" alt="1,000 Island Lake" width="100%" height="100%" /&gt;
  </content>
  <content>
    &lt;img  src="Images/HeaderImages/HalfDome.jpg" border="0" alt="Half Dome" width="100%"  height="100%" /&gt;
  </content>
  <content  impressions="4">
    &lt;img src="Images/HeaderImages/HumphreyMountain.jpg" border="0" alt="Mt. Humphrey" width="100%" height="100%" /&gt;
  </content>
  <content  impressions="2">
    &lt;img src="Images/HeaderImages/MarieLake.jpg"  border="0" alt="Marie Lake" width="100%" height="100%"  /&gt;
  </content>
  <content  impressions="1">
    &lt;img src="Images/HeaderImages/PiuteCreek.jpg"  border="0" alt="Piute Creek" width="100%" height="100%"  /&gt;
  </content>
</contents>

Во-первых, учтите структуру XML-кода: корневой элемент назван <contents> и каждый потомок назван <content>. Каждый <content> может включать в себя атрибут impressions, который означает "вес" изображения. Если не указано значение impressions (как в случае со вторым элементом <content>), тогда используется значение 1. Разметка, расположенная между тегами <content>, является содержимым, которое будет обработано относительно выбранного элемента. Поскольку это XML-файл , весь текст в пределах <content> должен быть избегнут. Вот почему символы < and > для элемента img были заменены на &lt; и &gt;, соответственно.

Алгоритм определял, какое изображение необходимо было отобразить в соответствии с указанной вероятностью. Статья "Создание серверного элемента управления ContentRotator в ASP.NET" описывает данный алгоритм следующим образом:

"Алгоритм используется для отображения наугад выбранного изображения в зависимости от вероятности, установленной для него и оформленной в виде линии. Длина вероятности каждого изображения является частью длины общей линии, то есть сумма всех вероятностей будет равна длине линии. Далее, выбирается наугад  любое число, которое должно быть меньше, чем значение длины линии и соответственно выбранному значению будет отображено то изображение, чья линия вероятности содержит данное значение. [Следующее изображение демонстрирует алгоритм в графической форме]".


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

Чтобы завершить реализацию данного подхода, все что нам необходимо - это добавить элемент управления ContentRotator на ASP.NET-страницу либо мастер-страницу (Master Page), где мы хотели бы отобразить наугад выбранное изображение , а также установить свойство ContentFile в значении пути к XML-файлу. В демо-приложении, доступном в конце данной статьи, я создал мастер-страницу (ImagesFromContentRotator.master), использующую ту же самую верстку, что  и ImagesFromDirectory.master. Вместо использования элемента управления Image, я добавил элемент ContentRotator в секцию заголовка. Для того чтобы использовать элемент ContentRotator в вашем приложении, вы должны совершить следующие шаги:

  1. Добавьте файл skmContentRotator.dll в директорию вашего приложения либо в директориию Bin .
  2. В самом верху ASP.NET-страницы или мастер-страницы где вы хотели бы использовать элемент ContentRotator, добавьте следующую директиву @Register: <%@ Register TagPrefix="skm" Namespace="skmContentRotator" Assembly="skmContentRotator" %>.
  3. Добавьте элемент ContentRotator на страницу путем включения следующей разметки: <skm:ContentRotator id="ContentRotator1" runat="server" />.

В качестве альтернативы вы можете обойти шаги 2 и 3 путем добавления элемента ContentRotator в Toolbox, затем просто  переместив его из Toolbox в вашу веб-страницу либо мастер-страницу.

Результат обработки ImagesFromContentRotator.master будет идентичен результату, полученному на ImagesFromDirectory.master за исключением того, что ContentRotator будет выводить изображения согласно вероятности, указанной для каждого из них.

форум c# asp net