https://technet.microsoft.com/en-us/library/ms143221(v=sql.105).aspx |
Серверные элементы управления (продолжение)
Вначале — маленькая "хитрость". Хороший web-разработчик должен знать, как выглядят его страницы в разных браузерах. По умолчанию обычно они открываются в Internet Explorer. Щелкните правой кнопкой мыши на файле и выберите Browse with. Там можно сменить браузер по умолчанию или выбрать любой из списка для данного просмотра.
Button
Button — это командная кнопка, нажатие на которую часто приводит к отправке данных на сервер. Можно создавать кнопки двух типов: для передачи данных формы ( submit button ) или командные кнопки для выполнения различных функций, связанных с данной кнопкой. Если на форме есть несколько кнопок, свойство CommandName позволяет узнать, какая именно кнопка была нажата.
ASP .NET поддерживает 3 вида событий.
- События, которые происходят в браузере клиента и обрабатываются кодом на Javascript.
- События загрузки страницы.
- События элементов управления.
Например, чтобы обработать щелчок на кнопке, мы переопределяем событие Click.
protected void Button1_Click(object sender, EventArgs e) { }
События можно определить через вкладку событий в окне свойств. Второй аргумент всех обработчиков событий имеет тип EventArgs или какой-либо унаследованный от него.
Например, мы хотим создать форму для заполнения резюме. Автор может иметь заранее неизвестное нам количество предыдущих мест работы. Добавим на форму кнопку, при нажатии на которую в форму добавляется один элемент ввода текста:
<%@ Page Language="C#"%> <script runat="server"> static int num=0; static TextBox[] tb=new TextBox[10]; void AddExperience(Object sender, EventArgs e) { if (num < 10) // Чтобы не возникало ошибки обращения к несуществующему элементу массива { TextBox newBox = new TextBox(); newBox.ID = "box" + num; tb[num] = newBox; num++; } for (int i=0; i<10; i++) // Добавление на форму контролов из массива. { if (tb[i] != null) { places.Controls.Add(tb[i]); Label lb=new Label(); lb.Text="<br><br>"; places.Controls.Add(lb); } else break; } } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head> </head> <body> <form runat="server" id="Experience"> <asp:Label ID="Label1" runat="server" text="Введите Ваше последнее место работы" /> <asp:Panel id="places" runat="server"> <asp:TextBox id="first" runat="server" /> <br /> <br /> </asp:Panel> <asp:Button id="Add" Text="Еще" OnCommand="AddExperience" CommandName="Add" runat="server" /> </form> </body> </html>
Здесь мы имеем массив из 10 элементов типа TextBox. Новый элемент создается в момент нажатия на кнопку "Еще". Можно добавить до 10 новых элементов. Как и раньше, они размещаются в контейнере, это нужно, чтобы они выводились до кнопки.
При помощи свойства OnClientClick можно задать клиентский сценарий на JavaScript. Его значением может быть встроенная функция языка JavaScript, или функция, описанная в теле страницы. Клиентский код выполняется до серверного кода, заданного в свойстве OnClick.
Image
Элемент управления asp:image соответствует тегу img языка HTML. Его можно использовать для динамического добавления на страницу новых изображений. Вернемся к нашему туристическому агентству. Мы решили, что, когда клиент выбирает города, на страницу автоматически должна выводиться карта соответствующего города. Оставляем это в качестве упражнения. Карты городов можно найти через поисковую систему Яндекс.
< asp:Image > имеет свойства AlternateText, ImageUrl, ImageAlign
AlternateText | Соответствует атрибуту ALT тега IMG. Отображается, если показ картинок отключен или картинки невозможно найти |
ImageUrl | Соответствует атрибуту SRC тега IMG |
ImageAlign | Соответствует атрибуту ALIGN тега IMG |
Как всегда, свойства можно менять из программы. Например, меняя значение ImageUrl, можно организовать просмотр множества картинок в виде слайд-шоу. Создайте директорию images и поместите в нее несколько картинок image1, image2 и так далее.
Напишем новую страницу:
<%@ Page Language="C#" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <script language="C#" runat="server"> public static int count=1; void NextImage(Object sender, EventArgs e) { count++; if(count==10) count=1; //циклический просмотр Image1.ImageUrl ="images/image"+count+".jpg"; } </script> </head> <body> <form runat="server"> <h3>Image Example</h3> <asp:Image id="Image1" runat="server" ImageAlign="top" AlternateText="Картинки нет" height="300" ImageUrl="images/image1.jpg"/> <hr> <br><br> <asp:Button id="Next" Text="Next" OnClick="NextImage" runat="server"/> <br><br> </form> </body> </html>