Лекции Серверные элементы управления

Web страница (форма) Содержит директивы Содержит HTML код Содержит серверные ЭУ –Серверные HTML ЭУ –Серверные Web ЭУ

Серверные ЭУ (Server Controls) ASP.NET серверные ЭУ (server controls) являются основной частью архитектуры ASP.NET. Фактически серверные ЭУ являются классами в среде.NET Framework, которые показывают визуальные элементы на web форме. Некоторые из этих классов относительно просты и тесно связаны с конкретными HTML тэгами. Другие ЭУ являются более сложными объектами, которые записывают в HTML документ более сложный код, состоящий из набора HTML элементов.

Серверные элементы управления Специальные типы ЭУ, с которыми можно в режиме «Design» проектировать интерфейс пользователя, но которые при отправке ответа пользователю преобразуются в HTML элементы управления. Типы серверных элементов управления –Серверные HTML элементы управления –ASP.Net элементы управления (или web ЭУ) –ASP.Net AJAX элементы управления –Пользовательские ЭУ (User controls and custom controls) В ASP.NET имеется более 50 встроенных элементов управления

Понятие элемента управления ЭУ это специальные окна, с помощью которых пользователь может управлять приложением, просматривать, вводить или выбирать данные. Типы элементов управления: –Windows элементы управления (для Windows приложений). –HTML элементы управления (описанные в языке HTML), понимаются и реализуются браузером. –Серверные элементы управления, обрабатываются на сервере, при передаче клиенту преобразуются в HTML ЭУ или набор HTML ЭУ и скриптов браузера.

Элементы управления и события (Controls and Events) Button List Text Browser ASP.NET Button code... List code... Text code... Event handlers

Типы серверных ЭУ HTML серверные ЭУ: это классы, которые обертывают стандартные HTML элементы. Кроме атрибута runat =server, описание данного элемента не отличается от стандартного. Примерами являются HtmlAnchor (для тэга ) и HtmlSelect (для тэга ). Можно создать объект для любого HTML тэга, для этого нужно только добавить атрибут runat="server". Если непосредственно такого серверного элемента нет, то будет использовать общий класс HtmlGenericControl.. Web серверные ЭУ: эти классы дублируют функциональность базовых HTML элементов, но имеют более согласованный и полезный набор свойств и методов, которые облегчают работу с ними. Например, HyperLink, ListBox и Button. Кроме этого есть типы элементов отличные от HTML тэгов (такие как проверочные - validation controls). Сложные ЭУ (Rich controls): это наиболее функциональные ЭУ, которые генерируют большое количество HTML разметки и даже JavaScript. Например, Calendar, AdRotator и TreeView. Проверочные ЭУ (Validation controls): этот набор ЭУ позволяет выполнять данные вводимые пользователями в другие ЭУ. Например, можно проверять, введены и какие-либо данные в ЭУ, что это целые числа, что числа больше некоторого значения и т.п. Если проверка не выполнится, то обработка страницы будет прекращена.

Дополнительные серверные ЭУ ЭУ для работы с данными (Data controls): These controls include sophisticated grids and lists that are designed to display large amounts of data, with support for advanced features such as templating, editing, sorting, and pagination. This set also includes the data source controls that allow you to bind to different data sources declaratively, without writing extra code. ЭУ для навигации (Navigation controls): These controls are designed to display site maps and allow the user to navigate from one page to another. ЭУ для регистрации (Login controls): These controls support forms authentication, an ASP.NET model for authenticating users against a database and tracking their status. Rather than writing your own interfaces to work with forms authentication, you can use these controls to get prebuilt, customizable login pages, password recovery, and user-creation wizards. ЭУ для web part (Web parts controls): This set of controls supports WebParts, an ASP.NET model for building componentized, highly configurable web portals. AJAX ЭУ: These controls allow you to use Ajax techniques in your web pages without forcing you to write client-side code. Ajax-style pages can be more responsive because they bypass the regular postback-and-refresh page cycle. ЭУ для мобильных устройств (mobile controls): This is a set of controls that resembles the web controls but is customized to support mobile clients such as PDAs, smart phones, and so on, by rendering pages to markup standards such as HTML 3.2 or WML 1.1. The mobile controls are highly adaptive, which means that when you create a page using these controls, the page can be rendered in several completely different ways depending on the device thats accessing the page. (This concept is also used in ordinary web controls on a lesser scale. They can generate XHTML or HTML 4.01 with JavaScript code or generate plain HTML 3.2 code according to the client browsers capabilities.)

Иерархия серверных ЭУ Все серверные ЭУ являются производными от базового класса Control из пространства имен System.Web.UI. Это выполняется и для HTML серверных ЭУ и для ЭУ создаваемых разработчиками (custom controls). Это также верно и для класса Page, на основе которого создаются все web формы.

Свойства класса Control СвойствоОписание ClientID Идентификатор ЭУ, который является уникальным именем, созданным ASP.NET во время создания страницы. Controls Коллекция ЭУ расположенных на web форме. You can use the Page.Controls collection to get the top-level collection of controls on the page. Each control in the Controls collection may contain its own child controls, and those controls can hold still more controls of their own, and so on. EnableVie wState Логическая переменная, если равна true, то страница поддерживает состояние между обратными вызовами. По умолчанию true. ID Имя ЭУ с помощью которого к нему можно обращаться. Page Ссылка объект Page, который содержит данный ЭУ. Parent Ссылка на родительский объект (Page или Control) который содержит данный ЭУ. Visible Логическая переменная, которая определяет, показывать ли данный ЭУ на форме. Если false, то ЭУ не видим на форме и соответствующий HTML тэг не создается. Так как все ЭУ являются производными от базового класса Control, то все они имеют стандартный интерфейс (свойства, методы), что позволяет единообразно работать с ними, даже не зная конкретной специфики.

Основные методы класса Control DataBind() - связывание ЭУ и все его дочерние ЭУ с заданным источником данных или выражением. FindControl() – поиск дочернего ЭУ с заданным именем с текущем ЭУ и во всех содержащихся в нем ЭУ. Если такой дочерний ЭУ будет найден, то возвращается ссылка общего типа. Необходимо преобразовать эту ссылку к требуемому типу. HasControls() – проверка, имеет ли данный ЭУ дочерние ЭУ. Данный ЭУ должен быть контейнерным тэгом (container tag), чтобы иметь дочерние ЭУ (например, такие как тэг). Render() – записывает HTML код для данного ЭУ на основе его текущего состояния. Этот метод напрямую не вызывается. Его вызывает среда ASP.NET, когда создается HTML код всей страницы.

Синтаксис серверных элементов управления Эл. управления объявляются как HTML тэги с атрибутом runat=server Тэги задают какого типа создать эл. управления –Эл. управления реализуются как ASP.NET классы Атрибут id задает программный идентификатор –Он именует экземпляр доступный в ходе обратной отправки (postback) –Также как в Dynamic HTML

Серверные элементы управления Серверные HTML элементы управления - стандартные HTML-теги с атрибутом runat=server. Свойства совпадают с атрибутами соответствующего тега, простые свойства: InnerText, InnerHtml, Style, Value, Attributes Серверные Web элементы управления - более развитые элементы: …календарь, раскрывающийся список, таблицы данных… Идентификатор элемента управления Web – это префикс < asp: Пример текстового элемента управления HTML и Web: Оба элемента генерируют одинаковый HTML-код, элемент Web содержит вводимый текст в свойстве text, а не в value. элемент управления HTML элемент управления Web

Описание серверных ЭУ в форме Название Атрибуты Обязательный атрибут runat = server Позиционирование – размещение на странице Оформление – внешний вид ЭУ

Простые и составные серверные ЭУ Простые (не имеют содержания) Составные (включают в себя другие ЭУ)

Статические HTML тэги ASP.NET страница содержит смесь обычных HTML тэгов и описаний ASP.NET ЭУ. Для добавления HTML тэгов можно их ввести с помощью клавиатуры или перетащить из HTML панели Toolbox. Visual Studio предоставляет построитель стиля (style builder) для форматирования любого статического HTML элемента с помощью CSS свойства style. Для проверки можно добавить элемент из панели HTML Toolbox. отображается в виде панели без рамки. Можно щелкнуть на нем и выбрать команду Format->New Style. Появится диалоговое окно New Style с возаожностями конфигурирования свойств colors, font, layout и border.

Серверные HTML элементы управления

Работают с существующими программами создания HTML страниц Свойства согласуются 1:1 с HTML table.bgcolor ="red; Можно задать обработчики событий на стороне клиента Удобны для быстрого преобразования существующих HTML страниц в страницы ASP.NET Наследуются (производные) от класса System.Web.UI.HtmlControls.HtmlControl Поддерживаемые эл. Управления имеют собственные классы,другие наследуются от класса HtmlGenericControl

Серверные HTML элементы управления Серверные элементы управления HTML похожи на теги HTML и отличаются от последних только наличием атрибута runat=server. Все они являются наследниками класса HtmlControl, который в свою очередь является наследником Control. Класс HtmlControl определён в пространстве имён System.Web.UI.HtmlControls У элемента управления HTML имеется набор свойств и методов, детально отражающих синтаксис HTML. Имя экземпляра серверного элемента определяется значением атрибута ID, а значение серверного элемента ввода – это Value. Свойства совпадают с атрибутами соответствующего тега, простые свойства – InnerText, InnerHtml, Style, Value, Attributes Не всем тегам сопоставимы элементы типа HtmlControl. Неизвестным для ASP.NET тегам ставится в соответ-ствие экземпляр класса из пространства System.UI.GenericControl (универсальный элемент управления)

Серверные HTML элементы управления HTML элементы управления Использование HTML ЭУ в коде: void Page_Load(object sender, EventArgs e) { myText.Value = "Hello World!"; }

Пример серверных HTML ЭУ можно определить программно: void Page_Load (object sender, Eventargs e) { myName.Value = Текст } После рендеринга этой части кода средой ASP.NET будет получен HTML-код

Иерархия HTML элементов управления

HTML элементы управления Поддерживаемые элементы управления –

Иерархия элементов управления HTML HtmlControl HtmlInputControlHtmlContainerControlHtmlImage HtmlInputButton HtmlInputCheckBox HtmlInputFile HtmlInputImage HtmlInputHidden HtmlInputRadioButton HtmlInputText HtmlInputReset HtmlInputSubmit HtmlInputPassword HtmlAncor HtmlForm HtmlSelect HtmlButton HtmlTable HtmlTableRow HtmlTableCell HtmlTextArea HtmlGenericControl HtmlHead HtmlLink HtmlTitle

Свойства HtmlControl Class Attributes - Позволяют получить или добавить атрибуты к ЭУ. Можно использовать эту коллекцию для добавления атрибутов, которые не доступны с помощью специальных свойств. (Например, можно добавить атрибут onFocus для text box и задать некоторый JavaScript код для описания того, что будет выполняться, когда данный text box получит фокус ввода на странице). Disabled – возвращает или задает состояние disabled ЭУ. Если оно равно true, то ЭУ показывается серым цветом и не работает. Style – Возвращает коллекцию атрибутов CSS, которые применены к ЭУ. В web странице это свойство задается в виде строки, которая содержит атрибуты style:value, разделенные точкой с запятой. В Visual Studio можно задать это свойство с помощью команды New Style в контекстном меню данного элемента. TagName – возвращает имя тэга ЭУ, такое как, img и т.п.

Свойства класса HtmlContainerControl InnerHtml – возвращает или устанавливает HTML текст внутри открывающегося и закрывающегося тэгов. При использовании этого свойства, все символы остаются такими, как они есть. Это означает, что можно встроить HTML разметку (жирный текст, добавить разрывы строк и т.п.). InnerText - возвращает или устанавливает просто текст внутри открывающегося и закрывающегося тэгов. При использовании этого свойства, все символы, которые могут интерпретироваться, как специальный HTML синтаксис (такой, как

Класс HtmlInputControl Type - Gets the type of an HtmlInputControl. For example, if this property is set to text, the HtmlInputControl is a text box for data entry. Value - Gets or sets the value associated with an input control. The value associated with a control depends on the type of control. For example, in a text box this property contains the text entered in the control. For buttons, this defines the text on the button.

ClientID - Returns the identifier of the control, which is a unique name created by ASP.NET at the time the page is instantiated. Controls - Returns the collection of child controls. You can use the Page.Controls collection to get the top-level collection of controls on the page. Each control in the Controls collection may contain its own child controls, and those controls can hold still more controls of their own, and so on. EnableViewState - Returns or sets a Boolean value indicating whether the control should maintain its state across postbacks of its parent page. This property is true by default. ID - Returns or sets the identifier of the control. In practice, this is the name through which you can access the control from the server-side scripts or the code-behind class. Page - Returns a reference to the page object that contains the control. Parent - Returns a reference to the controls parent, which can be the page or another container control. Visible - Returns or sets a Boolean value indicating whether the control should be rendered. If false, the control isnt just made invisible on the clientinstead, the corresponding HTML tag is not generated.

Работа с атрибутами HTML Пример Установка атрибутов тега : function Init() { alert(Hello); } Void Page_Load(object sender, EventArg e) { theBody. Attributes [onload] = Init(); } Результирующий HTML-код: function Init() { alert(Hello); }

Основные события элементов управления HTML ServerClick – возврат формы и выполнение соответствующего скрипта на сервере. Пример : Выполнить на сервере Атрибутом onclick определяется клиентский обработчик, написанный на JavaScript, а атрибутом onserverclick – серверный обработчик, код которого будет выполнен после возврата на сервер текущей формы.

Пример HTML элементов управления Демонстрация 1: HTMLControls1.aspx Демонстрация 2: HTMLControls2.aspx

Серверные Web элементы управления

В web страницах ASP.Net можно добавлять ЭУ с тэгами asp: C этими элементами можно работать в коде программы следующим образом: myASPText.Text = "New text"; myASPCheck.Text = "Check me!";

Описание серверного Web элемента управления любой элемент HTML документа можно сделать серверным с помощью атрибута runat=server. есть специальные серверные ЭУ, которые описываются следующим образом: общие свойства ЭУ –Height, Width, Visible, text… специальные свойства назначение обработчиков событий, например: onSelectedIndexChanged="List_SelectedIndexChanged" стиль style="float: left" позиционирование style=" position: absolute; top: 135px; left: 10px; height: 70px; width: 89px" /> Пример:

Свойства серверных web ЭУ (Server Control Properties) Атрибуты тэга соответствуют свойствам эл. управления: c1.Text = Foo; c2.Rows = 5; Тэги и атрибуты являются нечувствительными к регистру Свойства элементов могут быть заданы и программно

Типы событий серверных элементов При изменении состояния серверных ЭУ и выполнении действий пользователя с соответствующими им клиентскими ЭУ инициируются события. Выделяются следующие типы событий: –События изменения (Change Events) по умолчанию, они обрабатываются только после следующего события действия например: OnTextChanged, OnCheckedChanged эти события приходят в случайном порядке –События действия (Action Events) вызывают немедленную обратную отправку (postback) на сервер например: OnClick –Работают с любыми браузерами не требуется специального скрипта на клиенте, не используются апплеты (applets) или ActiveX ® Controls!

Связывание обработчиков с событиями элементов Обработчики событий указываются в атрибутах элемента управления Код обработчика событий protected void btn1_Click(Object s, EventArgs e) { Message.Text = Button1 clicked; }

Свойство asp:button для события Command Имеет два свойства (тип string) получает или задает имя команды, связанное с ЭУ Button, которое передается событию Command.ButtonCommand –CommandName (название команды e.CommandName) –CommandArgument (параметр e.CommandArgument) Событие Command происходит при нажатии элемента управления Button.CommandButton Использование зависит от того, в каком контейнере данный ЭУ используется. void CommandBtn_Click(Object sender, CommandEventArgs e) { switch(e.CommandName) { case "Sort": // Call the method to sort the list. Sort_List((String)e.CommandArgument); break; case "Submit": // Display a message for the Submit button being clicked. Message.Text = "You clicked the Submit button"; // Test whether the command argument is an empty string (""). if ((String) e.CommandArgument == "") { Message.Text += "."; } // End the message. else { // Display an error message for the command argument. Message.Text += ", however the command argument is not recogized."; } break; default: // The command name is not recognized. Display an error message. Message.Text = "Command name not recogized."; break; }

Серверные Web элементы управления Последовательная объектная модель Label1.BackColor = Color.Red; Table.BackColor = Color.Blue; Более богатая функциональность –Например, AutoPostBack, дополнительные методы Автоматическая uplevel/downlevel поддержка браузеров –Например проверки значений элементов управления Строго типизированные; нет общего порождающего класса –Можно использовать проверку типов при компиляции

Иерархия классов web элементов управления

Свойства класса WebControls AccessKey - Returns or sets the keyboard shortcut that allows the user to quickly navigate to the control. For example, if set to A, the user can move the focus to this control by pressing Alt+A. BackColor – получит или задать фоновый цвет; BorderColor - получит или задать цвет рамки; BorderStyle - One of the values from the BorderStyle enumeration, including Dashed, Dotted, Double, Groove, Ridge, Inset, Outset, Solid, and None. BorderWidth - Returns or sets the border width. CssClass - Returns or sets the CSS style to associate with the control. The CSS style can be defined in a section at the top of the page or in a separate CSS file referenced by the page. Enabled - Returns or sets the controls enabled state. If false, the control is usually rendered grayed out and is not usable. Font - Returns an object with all the style information of the font used for the controls text. This property includes subproperties that can be set with the object-walker syntax shown in this chapter. ForeColor - Returns or sets the foreground colorfor example, that of the text of the control. TabIndex - A number that allows you to control the tab order. The control with a TabIndex of 0 has the focus when the page first loads. Pressing Tab moves the user to the control with the next lowest TabIndex, provided it is enabled. This property is supported only in Internet Explorer 4.0 and higher. Tooltip - Displays a text message when the user hovers the mouse above the control. Many older browsers dont support this property. Height - получит или задать высоту ЭУ. Width - получит или задать ширину ЭУ.

Серверные Web элементы управления ( Web Controls ) Web эл. управл. записываются в HTML разметке как тэги имеющие префикс пространства имен Web эл. управл. имеют префикс asp: Описаны в пространстве имен System.Web.UI.WebControls Это пространство имен автоматически связывается с префиксом asp:

Web элементы управления Web элементы упр. имеют расширенный набор свойств для отображения и форматирования, например: –Font –BackColor, ForeColor –BorderColor, BorderStyle, BorderWidth –Style, CssClass –Height, Width –Visible, Enabled

Поддержка состояния По умолчанию элементы упр. поддерживают их состояния между последовательностью обратных вызовов –реализуется с использованием скрытого HTML поля: __VIEWSTATE –работает с элементами ввода данных (например. TextBox, CheckBox), элементами не вводящими данные (например, Label, DataGrid), и гибридными (например, DropDownList, ListBox) может быть отменено для элемента или всей страницы –задайте EnableViewState=false –позволяет уменьшить размер передаваемых данных в __VIEWSTATE

Пример сохранения состояния Демонстрация 1 : MaintainingState.asp и MaintainingState2.asp Демонстрация 2 : MaintainingState.aspx

Автоматическая обратная отправка (postback) Задано свойство эл. управления Checkbox: AutoPostBack = true //

Типы web элементов управления Базовые (Basic Web Control Classes) Списочные (List controls) Сложные (Rich controls) Проверочные (Input Validation Controls)

Базовые web элементы управления (Basic Controls) Соответствуют HTML элементам управления Поддерживаемые элементы управления –

Основные классы базовых web ЭУ Тэг объявленияСформированный HTML код Основные элементы или Text, CausesValidation, PostBackUrl, ValidationGroup, событие Click AutoPostBack, Checked, Text, TextAlign, событие CheckedChanged FileBytes, FileContent, FileName, HasFile, PostedFile, метод SaveAs() AlternateText, ImageAlign, ImageUrl CausesValidation, ValidationGroup, событие Click HotSpotMode, HotSpots (коллекция), AlternateText, ImageAlign, ImageUrl

Основные классы базовых Web ЭУ (2) Тэг объявленияСформированный HTML код Основные элементы Value... ImageUrl, NavigateUrl, Target, Text... Text, AssociatedControlID Text, CausesValidation, Validation- Group, событие Click... BackImageUrl, DefaultButton, GroupingText, HorizontalAlign, Scrollbars, Wrap AutoPostBack, Checked, GroupName, Text, TextAlign, событие CheckedChanged

Основные классы базовых Web ЭУ (3) Тэг объявленияСформированный HTML код Основные элементы... BackImageUrl, CellPadding, CellSpacing, GridLines, HorizontalAlign, Rows (collection)... ColumnSpan, HorizontalAlign, RowSpan, Text, VerticalAlign, Wrap... Cells (collection), HorizontalAlign, VerticalAlign или... AutoPostBack, Columns, MaxLength, ReadOnly, Rows, Text, TextMode, Wrap, TextChanged event

Пример объявления Текстовое окно Скролируемая панель This scrolls....

Списочные элементы управления (List controls) Эл. Управления, которые управляют повторениями Поддерживаемые элементы управления –

Элементы управления CheckBoxList & RadioButtonList Коллекция кнопок выбора и радио-кнопок Для заполнения используется связывание Item 1 Item 2 Item 3 Item 4 Item 5

Списочные элементы управления - выпадающий список (drop-down list) заполняется коллекцией объектов. При рендеринге в HTML задаются тэги с атрибутом «size="1"». - список ist box заполняется коллекцией объектов. При рендеринге в HTML задаются тэги с атрибутом «size="х"», где x это количество видимых элементов. - этот элемент управления заполняется … При рендеринге в HTML задаются check boxes, выравненные в таблицу с одной или несколькими колонками. Like the, but the items are rendered as radio buttons. A static bulleted or numbered list. In HTML, it is rendered using the or tags. You can also use this control to create a list of hyperlinks.

Свойства класса ListControl AutoPostBack - If true, the form is automatically posted back when the user changes the current selection. Items Returns a collection of ListItem items (the items can also be added declaratively by adding the tag). SelectedIndex - Returns or sets the index of the selected item. For lists with multiple selectable items, you should loop through the Items collection and check the Selected property of each ListItem instead. SelectedItem - Returns a reference to the first selected ListItem. For lists with multiple selectable items, you should loop through the Items collection and check the Selected property of each ListItem instead. DataSource - You can set this property to an object that contains the information you want to display (such as a DataSet, DataTable, or collection). When you call DataBind(), the list will be filled based on that object. DataMember - Used in conjunction with data binding when the data source contains more than one table (such as when the source is a DataSet). The DataMember identifies which table you want to use. DataTextField - Used in conjunction with data binding to indicate which property or field in the data source should be used for the text of each list item. DataValueField - Used in conjunction with data binding to indicate which property or field in the data source should be used for the value attribute of each list item (which isnt displayed but can be read programmatically for future reference). DataTextFormatString - Sets the formatting string used to render the text of the list item (according to the DataTextField property).

Свойства выбираемых списочных ЭУ RepeatLayout - This specifies whether the check boxes or radio buttons will be rendered in a table (the default option) or inline. The values are Table and Flow, respectively. RepeatDirection - This specifies whether the list of controls will be rendered horizontally or vertically. RepeatColumns - This sets the number of columns, in case RepeatLayout is set to Table. CellPadding, CellSpacing, TextAlign - If RepeatLayout is set to Table, then these properties configure the spacing and alignment of the cells of the layout table.

Свойства размеченных списочных ЭУ (bulleted list) BulletStyle - Determines the type of list. Choose from Numbered (1, 2, 3…), Lower-Alpha (a, b, c…) and UpperAlpha (A, B, C…), LowerRoman (i, ii, iii…) and UpperRoman (I, II, III…), and the bullet symbols Disc, Circle, Square, or CustomImage (in which case you must set the BulletImageUrl property). BulletImageUrl - If the BulletStyle is set to CustomImage, this points to the image that is placed to the left of each item as a bullet. FirstBulletNumber - In an ordered list (using the Numbered, LowerAlpha, UpperAlpha, LowerRoman, or UpperRoman styles), this sets the first value. For example, if you set FirstBulletNumber to 3, the list might read 3, 4, 5 (for Numbered) or C, D, E (for UpperAlpha). DisplayMode - Determines whether the text of each item is rendered as text (use Text, the default) or a hyperlink (use LinkButton or HyperLink). The difference between LinkButton and HyperLink is how they treat clicks. When you use LinkButton, the BulletedList fires a Click event that you can react to on the server to perform the navigation. When you use HyperLink, the BulletedList doesnt fire the Click eventinstead, it treats the text of each list item as a relative or absolute URL, and renders them as ordinary HTML hyperlinks. When the user clicks an item, the browser attempts to navigate to that URL.

Бзовые ЭУ & Простые списки List Controls Демонстрация 1: WebControls1.aspx –Набор простейших эл. управления и списков Демонстрация 2: WebControls2.aspx –Те же элементы с AutoPostBack = true

Сложные эл. управления (Rich Controls) ЭУ с большим набором функций Поддерживаемые ЭУ – Будут добавлены еще Разрабатываются сторонними компаниями Пример: RichControls1.aspx

Составной серверный ЭУ...

Сложные ЭУ в.Net 3.5 AdRotator: This control is a banner ad that displays one out of a set of images based on a predefined schedule thats saved in an XML file. Calendar: This control is a calendar that displays and allows you to move through months and days and to select a date or a range of days. MultiView, View, and Wizard: You can think of these controls as more advanced panels that let you switch between groups of controls on a page. The Wizard control even includes built-in navigation logic. Substitution: This control is really a placeholder that allows you to customize ASP.NETs output caching feature. Xml: This control takes an XML file and an XSLT stylesheet file as input and displays the resulting HTML in a browser.

Проверочные ЭУ - верификаторы Большой набор возможностей задания декларативной проверки Проверка описывается отдельно от ЭУ Расширяемая структура для проверки Поддержка проверки на сервере и клиенте –Автоматически определяются uplevel клиенты высокого уровня (uplevel clients) –У клиентов высокого уровня данные проверяются на месте Всегда выполняется проверка на сервере –Защита пользователей от перехвата и замены данных

Проверка вводимых данных Проверят, что введенные данные введены пользователем правильно; Блокирует дальнейшую обработку страницы, до тех пор, пока все данные не будут введены верно; Предотвращает посылку на сервер опасного кода (cross-site …).

Алгоритм проверки вводимых данных Valid? User Enters Data No Yes Error Message Client Server Web Application Processed

ЭУ для проверки вводимых данных Required field validator - проверяет, что значение заданного поля введено Compare Validator - сравнивает значение с константой, другим ЭУ или типом данных Range Validator _- п роверяет миним/максимальные границы введенного значения Regular Expression Validator - проверяет значение на совпадение с заданным шаблоном Custom Validator - позволяет создать собственную серверную или клиентскую функцию проверки Validation Summary - показывает список ошибок при проверке на месте

Проверочные ЭУ Проверочные ЭУ наследуются от класса System.Web.UI.WebControls.BaseValidator, который наследуется от ЭУ label Проверочные ЭУ содержат текст, который показывается только в случае ели проверка определяет ошибку. Значение свойства Text показывается в том месте, где расположен проверочный ЭУ Значение свойства ErrorMessage показывается в конце проверки

Проверочные ЭУ Проверочные ЭУ связываются со своими проверяемыми ЭУ с помощью свойства ControlToValidate К одному ЭУ можно подключить несколько проверочных ЭУ.

Проверочные ЭУ Свойство Page.IsValid содержит окончательный результат проверки всех ЭУ на странице void Submit_click(object s, EventArgs e) { if (Page.IsValid) { Message.Text = "Page is valid!"; }

Проверочные ЭУ Validation Controls Свойство проверочного элемента Display управляет отображением –Static : статическое, отображение не меняется при ошибке –Dynamic : динамическое –None : нет отображения; можно по прежнему использовать ValidationSummary и Page.IsValid Свойство Type содержит ожидаемый тип данных: Currency, Date, Double, Integer, String

Проверочные ЭУ Validation Controls Можно задать значение DownLevel для браузера –Проверка будет выполняться только на сервере

Проверочные ЭУ Validation Controls Демонстрация: ValidationControls1.aspx –Показываются все типы проверочных элементов

Использование верификаторов 1.Поместить требуемый верификатор на форме и выставить свойство ControlToValidate (ControlToCompare). 2.Выставить свойство ErrorMessage 3.Если помимо сообщения об ошибке нужно отобразить и доп. текст, то его нада поместить в свойство Text. 4.Поместить на форму элемент ValidationSummary или выставить свойство Display. 5.Добавить на форму элемент, который может инициировать отправку страницы на сервер.

Комбинирование верификаторов С одним элементом управления можно использовать несколько верификаторов Только RequiredFieldValidator проверяет наличие/отсутствие значения у элемента управления

Отмена проверки Поместить на форму HTML-элемент управления типа Submit. Установить атрибут Page_ValidationActive=false. На сервере проверить свойство IsValid.

Нестандартная проверка вводимых данных Используется CustomValidator. Исполенение проверки может быть как на сервере, так и на клиенте. Серверный код размещается в обработчике ServerValidate. Сценарий проверки на клиенте размещается в свойстве ClientValidationFunction.

Размещение и оформление серверных ЭУ на форме

Позиционирование ЭУ в web форме Потоковое –С помощью таблиц –С помощью CSS Абсолютное –С помощью CSS

Позиционирование ЭУ на web форме Для позиционирования ЭУ можно использовать все приемы, допустимые в HTML, такие как: –paragraphs, –line breaks, –tables, –styles. Visual Studio по умолчанию использует гибкое потоковое позиционирование, так чтобы контент увеличивался и сжимался динамически без создания проблем размещения. Для задания абсолютного позиционирования можно задать стиль: Лучше задать точное позиционирование для контейнера:...

Скрытие Слои

Диалоговое окно New Stile

Форматирование HTML

HTML таблицы Visual Studio предоставляет средства для создания и работы с HTML таблицами. Можно добавить таблицу к форме. По умолчанию вставляется таблица 3×3. Таблицу можно трансформировать (почти как в Ms Word) В ячейках таблицы можно размещать разные элементы (HTML, серверные). Современный подход к web дизайну не приветствует использование таблиц для структуризации страницы. Вместо этого предлагается использовать CSS свойства планировки (layout properties).

Контейнеры … - контейнер для текста … - контейнер для участка HTML документа

Оформление ЭУ Индивидуальное Групповое (с помощью CSS и Theams)

Дополнительный материал

Объектная модель Literal control

Объектная модель Table controls

Последовательность динамического добавления объектов TableCell и TableRow к существующему элементу Создать объект TableRow, который соответствует строке в таблице. Создать объект TableCell и заполнить его данными, или установив свойство Text или добавив ЭУ коллекции Controls ЭУ TableCell. Add the TableCell object that you created in step 2 to the TableRow objects Cells collection. Repeat steps 2 and 3 for each cell that needs to be created in the row. Add the TableRow objects that you created in step 1 to the Table objects Rows collection. Repeat steps 1 through 5, as necessary, for all rows and cells in the table.

Пример на C# partial class Table__TableRow__and_TableCell_Controls : System.Web.UI.Page { protected Sub Page_Load(object sender, System.EventArgs e) { Table1.BorderWidth = 1; for(int row=0; row< 5; row++) { TableRow tr = new TableRow(); for (int column = 0; column

Image Control

Пример на VB Partial Class Image_Control Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Image1.ImageUrl = "~/Images/Girl.gif" Image1.DescriptionUrl = "~/ImageDescription.htm" Image1.AlternateText = "This is a picture of a girl" End Sub End Class

ImageButton Control

Пример на VB Partial Class ImageButton_Control Inherits System.Web.UI.Page Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click ImageButton1.AlternateText = _ String.Format("Button Clicked at {0},{1}", e.X, e.Y) End Sub Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load ImageButton1.ImageUrl = "~/Images/Girl.gif" ImageButton1.DescriptionUrl = "~/ImageDescription.htm" ImageButton1.AlternateText = "This is a picture of a girl" End Sub End Class

ImageMap Control

Calendar Control

FileUpload Показывает TextBox и Browse кнопку, для ввода пути и имени файла, или выбора файла. Не вызывает обратного вызова.

Доступ к переданному файлу FileBytes – доступ к файлу в виде набора байтов; FileContent - доступ к файлу в виде потока ввода; PostedFile - доступ к файлу в виде объекта HttpPostedFile; MIME - Multipurpose Internet Mail Extensions указывает тип файла;

Пример на VB Partial Class FileUpload_Control Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click If (FileUpload1.HasFile) Then Label1.Text = "File Length: " _ + FileUpload1.FileBytes.Length.ToString() _ + " " + "File Name: " + FileUpload1.FileName + " " _ + "MIME Type: " + FileUpload1.PostedFile.ContentType _ FileUpload1.SaveAs( MapPath("~/Uploads/" + _ FileUpload1.FileName)) Else Label1.Text = "No file received." End If End Sub End Class

Panel Control Используется в качестве контейнера ЭУ и полезен если нужно показать или скрыть группу элементов

MultiView и View Controls

Пример на VB Partial Class MultiView_and_View_Controls : Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button1.Click MultiView1.ActiveViewIndex = 1 End Sub Protected Sub Button2_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button2.Click MultiView1.ActiveViewIndex = 2 End Sub Protected Sub Button3_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Button3.Click MultiView1.SetActiveView(CType(Me.FindControl("View1"), View)) End Sub Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load If (Not IsPostBack) Then MultiView1.ActiveViewIndex = 0 End If End Sub End Class

Переключение между View controls

Wizard control Сложный ЭУ для отображения последовательности WizardStep ЭУ, один за другим. Используется для сбора большого количества данных от пользователя, разделяя процесс сбора на шаги. Можно программировать самому в виде набора страниц, но Wizard объединяет весь процесс сбора данных в единую Web форму.

Объектная модель Wizard control

Наполнение ЭУ WizardStep

XML control Используется для показа содержания XML документа или результата выполнения Extensible Stylesheet Language Transformation (XSLT)

Пример XML файла CarList.xml

Пример XSLT файла CarList.xsl Car List Car List VIN Make Model Year Price