Элементы управления WebForm

Одно из важнейших достоинств ASP.NET заключается в том, что при его исполь­зовании резко упрощается создание элементов пользовательского интерфейса на web-страницах. Элементы управления WebForm (их также называют серверными элементами управления (server controls) или элементами управления Web (Web controls)) определены в пространстве имен SystemWeb.UI.WebControis. Их основное назначение — избавить нас от трудоемкой работы по созданию элементов управ­ления HTML на web-странице вручную.

Вот пример. Если мы создаем классическую страницу ASP и у нас есть необхо­димость разместить на ней несколько текстовых полей, то нам придется писать теги для каждого текстового поля на странице вручную. В ASP.NET нам достаточ­но будет перетащить на шаблон времени разработки графические элементы уп­равления из Toolbox, а затем их настроить. Например, для текстового поля будет автоматически сгенерирован следующий код:

<form method="post" runat="server">

<asp:TextBox id=TextBoxl style="Z-INDEX: 101; LEFT: 27px; POSITION: absolute: TUP: 30px" runat="server">

</asp:TextBox>

</form>

Когда придет время отвечать на запрос пользователя, среда выполнения ASP.NET автоматически преобразует этот код в тег HTML следующего вида:

<input name="textBoxl" type="text" id="TextBoxl" style="Z-INDEX: 101: LEFT: 27px: POSITION: absolute: TOP: 30px" />

Ну и что в этом хорошего, спросите вы. Не проще ли вообще написать код для текстового поля вручную? Все будет проще, и в итоге окажется меньше кода на странице ASP. Однако не все так просто. Во-первых, при использовании элемен­тов управления WebForm нам может вообще не потребоваться писать вручную код HTML. А во-вторых, не все элементы управления такие простые, как текстовые поля. Например, если нам нужно поместить на генерируемую web-страницу боль­шую таблицу, или баннерную рулетку, или календарный элемент управления, или элемент управления DataGrid, то применение элементов управления WebForm может сэкономить вам многие часы работы.

Еще одно преимущество элементов управления WebForm заключается в том, что с ними очень удобно работать с программной точки зрения: каждому из этих эле­ментов управления соответствует класс в библиотеке базовых классов .NET, и мы можем работать с ними, как с любыми другими классами, и в файле *.aspx, и в про­изводном от Page классе С#. Кроме того, в любом элементе управления WebForm так­же определен набор событий, которые будут обрабатываться на сервере (более под­робно об этом будет рассказано чуть ниже).

И последнее, о чем тоже стоит упомянуть. При использовании элементов уп­равления Web Form в нашем распоряжении появляется целый набор возможностей для проверки ввода данных пользователем. Таким образом, мы избавляемся не только от необходимости вручную писать теги для элементов управления HTML, но и от ручного создания клиентских скриптов JavaScript для проверки вводимых данных. (Конечно, если нам все же нужно использовать код JavaScript на нашей странице, никто нам этого делать не запрещает.)

Создание элементов управления WebForm

При создании проекта на основе шаблона Web Application в нашем распоряжении всегда есть набор элементов управления WebForm. Для того чтобы ими воспользо­ваться, достаточно перейти на соответствующую вкладку в Toolbox (рис. 14.37).

Рис. 14.37. Набор элементов управления WebForm

Настройку параметров каждого из элементов управления WebForm можно про­изводить при помощи обычного окна свойств в IDE Visual Studio.NET. Эти эле­менты управления очень похожи на элементы управления Windows Forms, и поэто­му проблем с настройкой подавляющего большинства свойств у нас не будет. Например, для текстового поля в нашем распоряжении набор свойств, представ­ленный на рис. 14.38.

При внесении изменений через окно свойств для элемента управления все измене­ния сразу же записываются напрямую в файл *.aspx. Например, если для нашего тек­стового поля txtEMai1 мы изменим значения свойств BorderStyle, BorderWidth, BackCol or, BorderColor и ToolTip, в теге <asp: textbox> появятся новые пары имя — значение:

Рис. 14.38. Набор свойств для текстового поля

А вот как выглядит итоговый результат в виде кода HTML, который вернется пользователю:

<input name="txtEMai" type="text" value="fdfdf" id="txtEMail" title="Enter your e-mail here..." style="background-color:PaleGreen:border-color:Dark0liveGreen:border-width:5px:border-style:Ridge:" />

Давайте разберемся с синтаксисом записей для элементов управления WebForm в файле *.aspx. Для каждого элемента управления используется синтаксис, очень напоминающий формат XML. Открывающим тегом всегда будет <asp: тип_эле-мента_управления runat="server">, а закрывающим — </asp: тип_элемента_управления>. Вот два примера таких тегов:

<asp:TextBox id=TextBoxl style="Z-INOEX: 101: LEFT: 27px; POSITION: absolute: TOP: 30px" runat="server"> </asp:TextBox>

<asp:Button id=Buttonl style="Z-INDEX: 102: LEFT: 26px: POSITION: absolute: TOP: 66px" runat="server" DESIGNTIMEDRAGDR0P="21" Text="Button"> </asp:Button>

Атрибут runat="server" означает, что это — элемент управления WebForm, пред­назначенный для выполнения на сервере. Прежде чем его код отправится к клиен­ту, он будет преобразован средой выполнения ASP.NET в привычный код HTML.

В файле С#, который указан в атрибуте Codebehind, код также изменился. В нем появились новые объекты, представляющие элементы управления. Имена этих объектов совпадают с идентификаторами элементов в тегах файла *.aspx:

public class WebForml : System.Web.UI.Page

{

protected System.Web.Ul.WebControls.Button btnSubmit; protected System.Web.UI.WebControls.CheckBox ckBoxNewsLetter:

protected System.Web.Ul.WebControls.TextBox txtEMail:

protected System.Web.Ul.WebControls.TextBox txtLNariie; protected System.Web.UI.WebControls.TextBox txtFName:

…

}

Конечно же, мы можем программным образом работать с этими объектами при­вычными способами С#.