Страницы Web Forms

Все исходники / Язык программирования C# / OS Windows / Web ASP.NET / Web Forms / Страницы Web Forms

Оглавление

  1. Назначение Web Forms
  2. Инструменты работы с Web Forms
  3. Классический способ создания HTML разметки
  4. Листинг html разметки и внедренного кода
  5. Серверная обработка форм
  6. Обработка HTML тегов сервером
  7. Быстрый способ создания HTML форм
  8. Встроенные элементы управления с событиями
  9. Удобство работы с Web Forms
  10. Рекомендации
  11. Исходники страниц 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 и выше.

Скачать исходник