[Аннотация] В этой статье я покажу вам, как использовать платформу ASP.NET AJAX для расширения элемента управления HTML Map и добавления интерактивных горячих точек. После расширения, когда указатель мыши перемещается по этим точкам доступа, появляется подробная информация об этих точках доступа, однако эта подробная информация получается от удаленной службы асинхронно через AJAX;
Прежде всего, мы заметили, что ASP.NET 2.0 также предоставляет серверный элемент управления ImageMap. Этот элемент управления представляет собой серверный элемент управления, который позволяет определять активные области на изображениях . Пользователи могут выполнять операции обратной передачи или пересылать на определенный URL-адрес, щелкая эти области горячих точек. Обычно этот элемент управления используется для выполнения интерактивных операций над локальной областью изображения. Однако недостатком этого элемента управления является то, что нажатие на эти горячие точки для обратной передачи приведет к обновлению всей веб-страницы.
В этой статье мы расширим обычный элемент управления HTML Map на основе технологии ASP.NET AJAX, чтобы при нажатии на область доступа он вызывал только частичное обновление страницы при отображении соответствующей подробной информации, тем самым адаптируя его к приложению Web 2.0. тенденция развития.
На рисунке 1 ниже показан снимок примера программы, работающей в этой статье.
Рис. 1. Щелчки по точкам управления картой, развернутые с помощью технологии AJAX, запускают только локальные обновления.
Как видно на картинке выше, при наведении курсора мыши на Юпитер (Юпитер) в солнечной системе выше подробная информация о планете будет дружелюбно отображаться в виде всплывающего окна (Примечание: этот снимок сделан из MSDN и недоступен здесь. Переведите соответствующее слово).
Запустите Visual Studio 2005, выберите «Файл → Новый веб-сайт...», затем выберите шаблон «Веб-сайт с поддержкой ASP.NET AJAX», назовите проект «Ajax_ImageMap» и выберите C# в качестве значения. встроенный язык поддержки. Наконец нажмите «ОК».
Затем добавьте новую страницу ASPX, ImageMap.aspx, и измените раздел HTML-кода следующим образом: