Учебный семинар по ASP.NET Нижегородское сообщество.NET разработчиков Нижегородское сообщество.NET разработчиков Лаборатория информационных технологий ВМК ННГУ 1 Городецкий Евгений Городецкий Евгений Microsoft Student Partner, ННГУ

1. Типы серверных контролов 2. Серверные контролы HTML 3. Веб-контролы 4. Списковые контролы 5. Контролы проверки вводимых данных 6. Контролы с богатой функциональностью Mattew MacDonald: Pro ASP.NET 3.5 in C# 2008 Глава 1, Раздел 4 2

ASP.NET Server Controls – это.NET-классы, представляющие видимые элементы на Web-форме Соответствие класса контрола HTML тэгам контрола В этом докладе: Классификация типов контролов Назнчения и задачи выполняемые контролами Примеры использования различных контролов Проверка (Validation) ввода пользовательских данных 3

Server Controls в ASP.NET: 4

HTML server controls: Являются обёртками над стандартными HTML элементами: HtmlAnchor - HtmlSelect - Любой HTML тэг может быть сделан серверным контролом: runat=server HtmlGenericControlClass Web controls: Дублируют стандартные HTML элементы Предоставляют расширенный набор свойств и методов Примеры: HyperLink, ListBox, Button (VS Toolbox: Standard tab) Rich controls: Генерируют сложную HTML разметку и JavaScript код Примеры: Calendar, AdRotator, TreeView Validation controls: Проверка ввода данных в другие контролы по набору правил Отображение ошибок ввода данных на странице 5

Data controls: (раздел 9, 10) Списки и таблицы для отображения больших наборов данных Шаблоны, редактирование, сортировка и постраничный просмотр Navigation controls (раздел 17) Карта сайта Login controls (раздел 21) Регистрация пользователей с сохранением в БД Аутентификация пользователей и отслеживание статуса Восстановление пароля… Web Parts controls (раздел 30) Пользовательские компоненты ASP.NET AJAX controls (раздел 32) Контролы с повышенной интерактивностью, без необходимости писать JS-код ASP.NET Mobile controls ( Дублируют веб-контролы, добавляя поддержку станжартов HTML 3.2 или WML 1.1 Поддержка рентеринга контролов на мобильных устр-х: PDA, SmarPhones, … 6

System.Web.UI.Control – базовый класс серверных контролов 7

8

Server Controls в ASP.NET: 9

10

11 System.Web.UI.HtmlControls.HtmlControl

12 System.Web.UI.HtmlControls.HtmlContainerControl Соответствует парным тэгам, вокруг текстового содержимого ( … )

13 System.Web.UI.HtmlControls.HtmlInputControl Соответствует стандартным HTML элементам ввода данных: - Text Box - Submit Button - File Uploader

HtmlAnchor: HtmlButton: HtmlForm: HtmlImage: HtmlInputButton: HtmlInputReset: HtmlInputSubmit: HtmlInputCheckBox: HtmlInputFile: HtmlInputHidden: HtmlInputImage: HtmlInputRadioButton: HtmlInputText: HtmlInputPassword: HtmlSelect: HtmlTable: или HtmlTableCell: HtmlTableRow: HtmlTextArea: HtmlGenericControl:любой другой HTML тэг с атрибутом runat=server 14

15 protected void Page_Load(object sender, System.EventArgs e) { // Only perform the initialization the first time the page is requested. // After that, this information is tracked in view state. if (!Page.IsPostBack) { // Set the style attributes to configure appearance. TextBox1.Style["font-size"] = "20px"; TextBox1.Style["color"] = "red"; // Use a slightly different but equivalent syntax // for setting a style attribute. TextBox1.Style.Add("background-color", "lightyellow"); // Set the default text. TextBox1.Value = " "; // Set other nonstandard attributes. TextBox1.Attributes["onfocus"] = "alert(TextBox1.value)"; }} В Результате будет сгенерирован HTML-код: onfocus="alert(TextBox1.value)" />

16 protected void Page_Load(object sender, System.EventArgs e) { // Create a new HtmlTable object. HtmlTable table1 = new HtmlTable(); // Set the table's formatting-related properties. table1.Border = 1; table1.CellPadding = 3; table1.CellSpacing = 3; table1.BorderColor = "red"; // Start adding content to the table. HtmlTableRow row; HtmlTableCell cell; for (int i = 1; i

События HTML-контролов: Пример обработки событий: 2-ASP-NET_ServerControls_DemoSite \ChangeEvents.aspx.cs 2-ASP-NET_ServerControls_DemoSite \ChangeEvents.aspx.cs 17

Server Controls в ASP.NET: 18

19

System.Web.UI.WebControls.WebControl 20

21

22

Описание атрибутов контрола в ASPX-файле Генерируемый HTML код контрола: 23

Типы единиц измерения для разметки: Абсолютные (пикселы); Относительные (процент от размера страницы); Использование единиц в ASPX-разметке: Установка размеров в коде: pnl.Height = Unit.Pixel(300); Unit myPixUnit = new Unit(300, UnitType.Pixel); pnl.Height = myPixUnit; pnl.Width = Unit.Percentage(50); Unit myPrsUnit = new Unit(50, UnitType.Percentage); pnl.Height = myPrsUnit; 24

В коде: ctrl.BorderStyle = BorderStyle.Dashed; В ASPX-разметке: 25

С использованием ARGB значений: int alpha=255, red=0, green=255, blue=0; ctrl.ForeColor = Color.FromArgb(alpha, red, green, blue); С использованием предопределённых цветов: ctrl.ForeColor = Color.Crimson; С использованием HTML-именования цветов: ctrl.ForeColor = ColorTranslator.FromHtml(Blue); С использованием HTML-кодировки цвета: 26

Свойство WebControl.Font – ReadOnly! Класс System.Web.UI.WebControls.FontInfo: Установка свойств шрифта в Коде: ctrl.Font.Name = Verdana; ctrl.Font.Bold = true; ctrl.Font.Size = FontUnit.Small; ctrl.Font.Size = FontUnit.Point(14); Настройка шрифта в ASPX-разметке (- object-walker): 27

Через JavaScript вызовом метода фокусировки ASP.NET: Через атрибуты веб-формы: Через кнопки изменения фокуса (Access Keys: Alt+ ): TextBox2: Установка кнопки по умолчанию: 28

29 This scrolls

Поддержка AutoPostBack в клиентском JavaScript коде; Детальные события о изменениях состояния контрола вместо ServerChange у HtmlControl: CheckedChanged – у RadioButton и CheckButton TextChanged – у TextBox Пример обработки событий: EventTracker ImageButton.Click – предоставляет координаты клика на изображении: ImageClickEventArgs 30

Server Controls в ASP.NET: 31

: представляет коллекцию генерирует HTML: … представляет коллекцию генерирует HTML: … отображается как checkbutton-ы выровненные в таблицу; отображается как radiobutton-ы выровненные в таблицу; отображается с помощью тэгов или 32

System.UI.WebControls.ListControl: SelectedIndexChanged – событие об изменении выбора 33

Свойства RudioButtonList и CheckBoxList: Пример использования списковых контролов с возможностью выделения. 34

Свойства контрола BulletedList: Пример выбора стилей отображения BulletedList 35

Server Controls в ASP.NET: 36

Проверка ввода данных (Input Validation): на стороне клиента (JavaScript); на стороне сервера (серверный код); проверка ввода для привязанного контрола; Контролы проверки ввода данных: F NULL MIN F MAX F, = CONST RegEx.IsMatch(F) JavaScript code вывод сообщения об ошибке 37

1. Пользователь загружает страницу; 2. Пользователь вводит данные в контролы; 3. Пользователь нажимает кнопку для отправки данных: Если Btn.CausesValidation == false: контролы валидации игнорируются: a. Страница отправляется на сервер; b. Вызываются серверные обработчики событий; Если Btn.CausesValidation == true: ASP.NET автоматически проверяет введёные данные (св-ва Value) с помощью контролов валидации: Если ошибок не найдено: a. Вызываются серверные обработчики событий; Если найдена хотя бы одна ошибка: a. Страница отправляется клиенту с информацией о найденных ошибках (настраивается); b. Серверные обработчики могут быть вызваны! В обработчиках нужно дополнительно проверять что страница провалидирована. 38

Проверка выполняется автоматически по нажатию на соответствующую кнопку; Проверка не выполняется: При событиях изменения в AutoPostBack При нажатии на кнопку у которой CausesVlidation == false Проверка данных может выполняться дважды: Проверка на стороне клиента: генерится JavaScript (работает почти во всех браузерах); Проверка на стороне сервера: даже после успешной проверки на клиенте! (в целях безопасности) 39

System.Web.UI.WebControls.BaseValidator 40

41 System.Web.UI.WebControls.BaseValidator

2-ASP-NET_ServerControls_DemoSite\Validators.aspx 2-ASP-NET_ServerControls_DemoSite\Validators.aspx.cs 42

43

Server Controls в ASP.NET: 44

AdRotator – баннер со случайным выбором содержимого; Calendar - календарь для выбора одного или нескольких дней; MultiView, View, Wizard – панели с возможностью переключения отображаемого содержимого и навигацией (глава 17); Substitution – контейнер для настройки кэшируемого вывода (глава 11); Xml – принимает на вход XML файл и XSLT преобразование и в результате выводит построенный HTML (глава 14) 45

46 hdr_logo.gif Apress - The Authors Press 20 books sub_hero.jpg TechEd From Microsoft 20 Java ads.xml:

47

ENG: Mattew MacDonald, Mario Szpuszta:Pro ASP.NET 3.5 in C# 2008 RUS: Мэтью Мак-Дональд, Марио Шпушта Microsoft ASP.NET 3.5 с примерами на C# 2008 для профессионалов 48 Скачать книгу на англ. Скачать коды примеров Купить книгу на рус.

Вопросы? 49