Серверные элементы управления ASP.NET

Важной особенностью ASP.NET является использование серверных элементов управления на веб-странице (элементы WebForm ), которые являются фактически тэгами, понятными веб-серверу. Эти элементы определены в пространстве имен System.Web.UI.WebControls.

Принято выделять три типа серверных элементов управления:

Преимущества от использования таких элементов при разработке веб-приложений: Сокращается количество кода, написанного вручную (что особенно заметно для сложных элементов документа). Элемент просто "перетаскивается" из панели инструментов, после чего выполняется настройка его параметров в специальном окне. При этом все изменения автоматически заносятся непосредственно в *.aspx файл. С программной точки зрения каждому из этих элементов управления соответствует определенный класс в библиотеке базовых классов .NET, что позволяет писать для них такой же код как и для любых других классов. Для любого элемента управления WebForm определен набор событий, обрабатываемых на веб-сервере. Для любого элемента управления WebForm предоставляется возможность для проверки ввода данных пользователем.

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

По умолчанию такие элементы управления в ASP.NET файлах рассматриваются как текст. Для их программирования требуется добавление атрибута runat="server" в соответствующий HTML элемент. Кроме того, все серверные элементы управления HTML должны быть размещены внутри области действия тэга <form>, также имеющего атрибут runat="server".

Элементы управления веб-сервера

Подобно серверным элементам управления HTML элементы данного типа также создаются на веб-сервере и предполагают добавление атрибута runat="server". Однако они могут не соответствовать конкретным элементам HTML, но представлять более сложные элементы.

Общий синтаксис для описания таких элементов:

<asp:тип_элемента id="идентификатор" runat="server"/>

Перечень доступных элементов такого типа приведен в таблице.

Серверные элементы управления для проверки данных (валидации)

Элементы управления данного типа применяются для проверки вводимых данных.

Имеют следующий синтаксис:

<asp:тип_элемента id="идентификатор" runat="server" />

Наиболее важные элементы приводятся в следующей таблице.

Порядок выполнения лабораторной работы

Для работы с примерами, приводимыми в данной лабораторной работе, потребуется установка среды разработки Microsoft Visual Studio 2005+ и веб-сервера IIS 5+ (Internet Information Server).

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

Создайте новый проект по шаблону ASP.NET Web Application.

На странице Default.aspx добавьте в форму стандартные HTML элементы ввода данных. Это можно сделать, используя панель элементов управления, как это показано на скриншоте ниже.

Код формы должен выглядеть следующим образом:

<form id="form1" runat="server">
  <div>
   Ваша оценка:<br><br>
  <input id="r1" type="radio" title="Отлично" value="Отлично" runat="server"/>Отлично<br />
  <input id="r2" type="radio" value="Хорошо" runat="server" />Хорошо<br />
  <input id="r3" type="radio" value="Удовлетворительно" runat="server" />Удовлетворительно<br />
  <input id="r4" type="radio" value="Неудовлетворительно" runat="server" />Неудовлетворительно<br />
  <p id="ans" runat="server"></p>
  <br>
  <input id="Submit1" type="submit" value="Отправить" OnServerClick="submit" runat="server" /><br />
 </div>
</form>

Обработчик события OnServerClick необходимо описать в файле Default.aspx.cs. Код метода submit:

protected void submit(object sender, System.EventArgs e)
{
  if (r1.Checked == true) 
    ans.InnerHtml = "Вы оценили на отлично";
  else if (r2.Checked == true)
    ans.InnerHtml = "Вы оценили на хорошо";
  else if (r3.Checked == true)
    ans.InnerHtml = "Вы оценили на удовлетворительно";
  else if (r4.Checked == true)
    ans.InnerHtml = "Вы оценили на неудовлетворительно";
  else
    ans.InnerHtml = "Вы не выбрали оценку";
}

Выполните компиляцию проекта и запустите его на выполнение (либо вручную загрузите документ в браузере, указав URL соответствующего виртуального каталога).

2.Элементы управления веб-сервера.

Если для вновь созданного проекта типа ASP.NET Web Application в файле Default.aspx внутри формы (между тэгами <form> и </form> ) вставить следующий код (или сделать это перетаскиванием нужных элементов из панели инструментов, раздел "Standard" ):

<asp:ListBox id="LstBx" runat="server" width="100" height="80" AutoPostBack="True" OnSelectedIndexChanged="LBSelChanged" >
<asp:ListItem value="Sunday">Sunday</asp:ListItem>
<asp:ListItem value="Monday">Monday</asp:ListItem>
<asp:ListItem value="Tuesday">Tuesday</asp:ListItem>
<asp:ListItem value="Wednesday">Wednesday</asp:ListItem>
<asp:ListItem value="Thursday">Thursday</asp:ListItem>
<asp:ListItem value="Friday">Friday</asp:ListItem>
<asp:ListItem value="Saturday">Saturday</asp:ListItem>
</asp:ListBox>

<br/><br/>

<asp:Label id="Label1" runat="server"/>

и описать обработку событий Page_Load и OnSelectedIndexChanged в соответствующем *.aspx.cs файле:

protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = "You selected: " + Label1.Text;
        }

        protected void LBSelChanged(object sender, System.EventArgs e)
        {
            if (LstBx.SelectedItem != null)
                Label1.Text = "You selected: " + LstBx.SelectedItem.Value;
            else
                Label1.Text = "You selected: ";
        }
    }

то при запуске проекта после выбора пользователем элемента из списка можно будет увидеть в окне браузера:

В данном примере атрибут AutoPostBack="True" указывает на необходимость немедленной обработки события на сервере.

3.Серверные элементы управления для проверки данных (валидации)

Следующий код показывает, каким образом выполняется проверка содержимого поля вода формы:

<form id="form1" runat="server">
  <asp:TextBox ID="TextBox1" runat="server" Width="123px"></asp:TextBox>
  <br />
  <asp:RegularExpressionValidator 
ID="RegularExpressionValidator1"
runat="server" 
ControlToValidate="TextBox1"   
ErrorMessage="Not valid e-mail" 
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" >
  </asp:RegularExpressionValidator>
</form>

В данном случае атрибут ControlToValidate указывает на то, что контролируется содержимое элемента с идентификатором TextBox1 (поля ввода текста), в случае несоответствия содержимого контролируемого поля с шаблоном, описанном в виде регулярного выражения в атрибуте ValidationExpression, выдается сообщение, указанное в атрибуте ErrorMessage.

Шаблон описывает допустимый формат адреса электронной почты. Добавьте код в проект и проверьте работу приложения.

Контрольное задание

Создайте веб-приложение ASP.NET, поддерживающее ввод на странице международного телефонного номера пользователем и использующее серверный элемент управления <asp:RegularExpressionValidator>.