Оглавление
- Назначение Web Forms
- Инструменты работы с Web Forms
- Классический способ создания HTML разметки
- Листинг html разметки и внедренного кода
- Серверная обработка форм
- Обработка HTML тегов сервером
- Быстрый способ создания HTML форм
- Встроенные элементы управления с событиями
- Удобство работы с Web Forms
- Рекомендации
- Исходники страниц Web Forms
Назначение Web Forms
Web Forms ASP.NET позволяют создавать динамические страницы добавляя элементы управления по технологии drag-and-drop. Модель программирования веб-форм основана на событиях, хорошо знакомая windows программистам. Множество элементов управления и компонентов позволяют быстро создавать сложные сайты с интерактивным интерфейсом и доступом к базам данных. Web Forms упрощают процесс создания интерактивных веб-страниц и предоставляют богатый пользовательский интерфейс. Веб-формы разработаны для быстрой адаптации начинающих программистов, а также для создания дружественной среды desktop-программистам.
Название Web Forms неспроста ассоциируется с Windows Forms. Здесь также существуют формы и это элементы пользовательского интерфейса (UI), точнее серверные элементы управления, называемые веб-формами. Компиляция кода происходит на сервере, при загрузке страницы в браузер. Серверные элементы управления генерируют необходимые HTML теги, таким образом веб-формы формируют интерфейс страницы.
Инструменты работы с Web Forms
Основным инструментом создания и редактирования страниц Web Forms ASP.NET является Microsoft Visual Studio .NET. При работе в Visual Studio веб-элементы управления могут добавляться на страницу в ручную или путем перетаскивания из панели инструментов. На страницу автоматически добавляется тег html form в единственном экземпляре. Обрамляющая всю страницу html-форма даёт возможность пользователям сайта интерактивно работать с интерфейсом веб-страницы. Работая с Web Forms можно различными способами создавать HTML разметку элементов управления. Все способы дают визуально одно и тоже, но имеют свои особенности.
Классический способ создания HTML разметки
Классический, HTML метод создания элементов и обработки POST запроса. В этом случае можно просто в ручную добавлять HTML теги и формировать ответ на POST запрос перед повторной загрузкой веб-страницы в событии Load. Достоинство данного способа возможность полной самостоятельной обработки запросов. В HTML элементах формы обязательно проставляем атрибут name, ведь на нем строится механизм расшифровки запросов на основе ключ-значение. Программная связь поддерживается через свойства и методы возвращающих тип string
. Надо добавить, что при данном способе вся ответственность за безопасность сайта ложится на вас и проверку входных данных будете осуществлять тоже вы.
Листинг html разметки и внедренного кода
<form id="form1" runat="server"> <div class="content"> <h4 style="text-align: center; color: #ff0000;">Тригонометрический калькулятор</h4> Градусы <input name="Degree" type="text" value="<% =degree %>" style="width: 180px;" /> Косинус: <span style="color:blue;"><% =cosinus %></span> <br /><br /> Синус: <span style="color:blue;"><% =sinus %></span> <input name="Calculate" type="submit" style="width: 180px;" value="Вычисление" /><br /> </div> </form> . . . . . . . . . . . . . . . . . . . . . public string degree = null; public string cosinus = null; public string sinus = null; protected void Page_Load(object sender, EventArgs e) { if(IsPostBack == true) { if (Request.Params["Calculate"] != null) { double radian = Math.PI * double.Parse(Request.Params["Degree"]) / 180.0; cosinus = Math.Cos(radian).ToString(); sinus = Math.Sin(radian).ToString(); degree = Request.Params["Degree"]; } } }
Серверная обработка форм
Второй способ похож на первый с одной маленькой, но важной деталью кода: атрибутом runat="server"
. Теперь мы элементы HTML формы доверяем обрабатывать серверу и .NET Framework, для этого надо вместе с атрибутом runat="server"
обязательно присвоить элементу идентификатор. Теперь, вроде бы сугубо HTML элементы, превращаютcя в объекты классов пространства имен System.Web.UI.HtmlControls, становясь серверными элементами управления HTML. Теперь можно программно управлять HTML элементами и обращаться к их свойствам посредством значения атрибута id
. В исходном коде веб-страницы атрибут name заимствуется от атрибута id
. Заметьте, что у элемента с идентификатором Length
атрибут name
отличен от id
, но после загрузки страницы в браузер name
будет равен идентификатору: это сервер "постарался".
Обработка HTML тегов сервером
<form id="form1" runat="server">
<div class="content">
<h4 style="text-align: center; color: #ff0000;">Расчет площади прямоугольника</h4>
<% //Для html тегов обрабатываемых сервером важен атрибут id, name вставляется автоматически равным id %>
Длина
<input id="Length" name="nameLength" type="text" value="" style="width: 180px; color: #000;" runat="server" /> метров
Ширина
<input id="Width" type="text" style="width: 180px;" value="" runat="server" /> метров
Площадь <span id="Area" style="color: #00f;" runat="server"> </span> кв. метров
<input id="Calculate" type="submit" style="width: 180px;" value="Вычисление" runat="server" />
</div>
</form>
. . . . . . . . . . . . . . . . . . . . .
protected void Page_Load(object sender, EventArgs e)
{
if(IsPostBack == true)
{
if (Calculate.Value != null)
{
double width = double.Parse(Width.Value);
double length = double.Parse(Length.Value);
Area.InnerText = (width * length).ToString();
}
}
}
Быстрый способ создания HTML форм
Конечно два способа создания HTML кода страницы Web Forms описанных выше больше будет по душе тем кто в HTML как рыба в воде. Но данными способами легко писать только небольшие по объему интерфейсы веб-страниц и утомительно будет писать сложные HTML группы. Для таких целей и служит третий способ, оправдывающий характеристику ASP.NET Web Forms как технологии быстрой разработки веб-приложений. Третий способ и основной для ASP.NET Web Forms, это использование встроенных элементов управления. Сотни встроенных элементов и возможность создания своих многократно увеличивает скорость разработки веб-сайтов.
Встроенные элементы управления с событиями
<form id="form1" runat="server"> <div class="content"> <h4 style="text-align: center; color: #ff0000;" runat="server" id="HeaderLogin">Установите текущую дату и войдите в аккаунт</h4> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> <asp:Login ID="Login1" runat="server" BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" OnLoggingIn="Login1_LoggingIn" > </asp:Login> <span id="Help" runat="server">Логин: планета, пароль: земля</span> </div> </form> . . . . . . . . . . . . . . . . . . . . . <form id="form1" runat="server"> <div class="content"> <h4 style="text-align: center; color: #ff0000;" runat="server" id="HeaderLogin">Установите текущую дату и войдите в аккаунт</h4> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> <asp:Login ID="Login1" runat="server" BackColor="#EFF3FB" BorderColor="#B5C7DE" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" OnLoggingIn="Login1_LoggingIn" OnAuthenticate="Login1_Authenticate" > </asp:Login> <span id="Help" runat="server">Логин: планета, пароль: земля</span> </div> </form>
Удобство работы с Web Forms
Вид кода элементов несколько непривычен для веб-программистов и первоначально замедляет скорость разработки. Методы работы с Web Forms более дружелюбны к desktop-программистам и предназначены для быстрого перехода на веб-платформу. В этом случае вы только формируете интерфейс, а каркас Web Forms действия пользователей превращает в соответствующие события. Веб формы предоставляют возможность одним объектом класса создавать множество html тегов для построения интерфейса. Кроме html кода веб-компоненты могут генерировать и необходимый javascript код. Есть возможность создавать собственные компоненты.
Рекомендации
В модели Web Forms, как правило, чистые HTML теги применяются только для декоративных элементов страницы. Интерактивные же элементы управления, в целях безопасности, лучше доверять серверу и каркасу Web Forms. Используя встроенные или созданные самостоятельно веб-элементы можно существенно повысить скорость разработки. Именно для быстрого создания веб-сайтов и предназначены веб формы Web Forms.
Исходники страниц Web Forms
Всё что не выражено словами можно увидеть наглядно в исходниках. Исходный код страниц веб-форм можно протестировать в WebMatrix, MS Visual Studio .NET. В архиве два исходника: веб-приложение и веб-сайт. Веб-приложение откроется в Visual Studio 2012 и выше, веб-сайт в Visual Studio от 2008 и в Web Matrix 3 и выше.
Скачать исходник
webpages-webforms.zip
- Размер: 137 Кбайт
- Загрузки: 824