Введение в программирование
       

Создание Web-форм В VisualStudio .NET


Web-формы можно добавлять в следующие проекты .NET:

  • ASP.NET Web Site
  • ASP.NET. Web Service
  • Empty Web Site
  • Personal Web Site Starter Kit

Расположить проект можно как в файловой системе, так и на web-сервере. Если выбрано расположение HTTP, то для локального сервера поле Location следует установить равным http//localhost/каталог_проекта.

При создании проекта типа ASP.NET Web Site мастер проекта формирует следующие файлы web -приложения:

  • Default.aspx - текст HTML-страницы:
  • Default.aspx.cs - подключаемые пространства имен и метод Page_Load.

В проект можно добавлять ранее созданные таблицы стилей.

Таблицы стилей добавляются как новый элемент. При этом в проект добавляется файл с расширением css (например, StyleSheet.css).

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

// Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } // Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link rel=stylesheet type="text/css" href=StyleSheet.css /> </head> <script language="javascript" type="text/javascript"> // <!CDATA[

function Submit1_onclick() { alert("1234567"); }

// ]]> </script> </head> <body> <form id="form1" runat="server"> <div title="Заголовок">  <input id="Text1" type="text" class="Cl1" value="12345" /> <input id="Checkbox1" checked="checked" style="width: 52px; height: 56px" title="Флажок1" type="checkbox" /> <input id="Button1" title="Кнопка 1" type="button" value="button" /> <input id="Submit1" type="submit" value="submit" onclick="return Submit1_onclick()" /> </div> </form> </body> </html>


// StyleSheet.css - файл таблицы стилей body { font-size: 18pt; color: blue; } .Cl1 { font-size: 24pt; color: red; }

Листинг 28.3.

Таблица стилей содержит набор селекторов с описанием стиля для каждого селектора. Селектором может быть имя тега, имя класса (указываемое после символа "."), имя идентификатора (указываемое после символа "#").

Описание стиля для селектора указывается в виде списка, разделенного символами ";" и заключенного в фигурные скобки. Описание стиля состоит из пар "имя_атрибута: значение".

Подключение таблицы стилей выполняется в заголовке HTML-файла строкой <link rel=stylesheet type="text/css" href=StyleSheet.css />.

Строка <%@ Page Language="C#" AutoEventWireup="true" CodeFile= "Default.aspx.cs" Inherits="_Default" %> содержит тег Page, представляющий HTML-страницу. Атрибут CodeFile указывает файл кода класса, производного от любого класса, наследуемого от System.Web.UI.Page. Атрибут Language определяет язык, используемый при компиляции конструкций вида <% %> и <%= %>. В качестве языка может выступать любой язык программирования, поддерживаемый .NET Framework, включая Visual Basic, C# или Jscript. Для любой страницы может быть указан только один используемый язык.

Страницы ASP.NET состоят из двух частей:

  • визуальных элементов, включающих разметку, серверные элементы и статический текст;
  • программных фрагментов, включающих обработку событий и другой выполнимый код.


Технология ASP.NET предоставляет две модели управления визуальными элементами и кодом:

  • модель простого файла (single-file page model), при которой на странице описываются визуальные элементы, разметка и выполняемый код;
  • модель страницы с последующим кодом (code-behind page model), при которой на странице описываются визуальные элементы и разметка, а код размещается в отдельном файле (таком как Default.aspx.cs).


В следующей таблице приведен пример HTML-страницы, разработанной на базе этих двух моделей.



Модель простого файлаМодель страницы с последующим кодом
<%@ Page Language="C#" %> <script runat="server"> void Button1_Click(Object sender, EventArgs e) { Label1.Text = "Время: " + DateTime.Now.ToString(); } </script> <html> <head> <title>Single-File Page Model</title> </head> <body> <form runat="server"> <div> <asp:Label id="Label1" runat="server" Text="Label"> </asp:Label> <br /> <asp:Button id="Button1" runat="server" onclick="Button1_Click" Text="Button"> </asp:Button> </div> </form> </body> </html><%@ Page Language="C#" CodeFile="MyPage.aspx.cs" Inherits="MyPage" AutoEventWireup="true" %> <html> <head runat="server" > <title>Code-Behind Page Model</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label id="Label1" runat="server" Text="Label" > </asp:Label> <br /> <asp:Button id="Button1" runat="server" onclick="Button1_Click" Text="Button" > </asp:Button> </div> </form> </body> </html>
// Файл MyPage.aspx.cs using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class MyPage : System.Web.UI.Page { protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Время: " + DateTime.Now.ToString(); } }
Различие между двумя моделями ASP. NET страниц существует только на этапе проектирования. После компиляции страницы, спроектированные на базе различных моделей, представляются одинаковым образом.

При использовании модели страницы с последующим кодом в код класса автоматически добавляется метод Page_Load, выполняемый перед отображением страницы. Так, в этот метод можно вставить код, выполняющий инициализацию некоторых полей формы.

Этот же метод можно вставить и как скрипт в начало файла при использовании модели простого файла.

Например

// Форма: <form id="form1" runat="server"> <asp:Label id="Message1" runat="server"/> <asp:Button id="Button1" Text="abc" runat="server" /> </form> // Код метода: <%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); if (Page.IsPostBack) // Страница отображается как // обратное сообщение клиенту sb.Append("Ответ<br>"); sb.Append("HOST: " + Page.Request.UserHostAddress + ".<br>"); Message1.Text = sb.ToString(); // Запись в элемент // управления типа Label // с ID равным Message1 } </script>

Содержание раздела