Сохранить документ ()

Табличные компоненты
Теперь рассмотрим использование таблиц в оформлении Web-страниц. В предыдущем разделе мы
видели, как используется стандартная таблица, создаваемая компонентом с вкладки HTML. Всем хорош
этот компонент, кроме одного — у разработчика нет возможности изменять его параметры. Точнее, при
помощи некоторых достаточно запутанных ухищрений можно динамически менять содержимое ячеек и
управлять их видимостью, используя для этого различные элементы стилевого оформления и свойства
види-' мости, но слишком уж это неблагодарная работа. ASP.NET дал разработчику именно свободу
творчества, устранив от необходимости использовать различные ухищрения. Если вся работа в ASP.NET
оставляет ощущение стройности, логичности и прозрачности, то почему использование таблиц должно
создавать подобные проблемы?
Поэтому в данном разделе мы рассмотрим применение компонента таblе с вкладки Web Forms (Web
формы). Начнем мы как обычно с рассмотрения его структуры. Конечно, нет нужды приводить здесь
полный список всех свойств или методов, так как немалая их часть унаследована от классов-предков, и
они не так уж важны для работы с этим компонентом. Но действительно важные свойства и события,
входящие в состав объекта таblе, мы упомянем. Начнем, как всегда, со свойств.


Backcoior. Свойство задает цвет фона для создаваемой таблицы.


BorderCoior. Свойство устанавливает цвет границ ячеек и всей таблицы в целом.


Borderwidth. Свойство задает ширину границ таблицы.


Cellspacing. Свойство типа integer. Устанавливает дистанцию между ячейками таблицы.

HorizontaiAiign. Свойство имеет значение одноименного перечислимого типа HorizontaiAiign. Оно
устанавливает, как будет выравниваться таблица по горизонтали на Web-странице.
Используются следующие значения:
o Center. Таблица будет отображена в центре Web-страницы;
o justify. Браузер попытается растянуть таблицу по ширине своего окна просмотра;
o Left. Таблица будет прижата к левому краю Web-страницы;
o Notset. Значение используется по умолчанию. Означает, что никакого горизонтального
выравнивания явно для таблицы не задано;
o Right. Таблица будет прижата к правому краю Web-страницы.


BackimageUri. Свойство типа string, в котором указывается URL графического файла. Этот файл
должен содержать изображение, которое будет служить фоном создаваемой таблице.
Borderstyie. Свойство имеет значение одноименного перечислимого типа Borderstyie. Оно
устанавливает тип отображаемых границ ячеек и всей таблицы.
ceiiPadding. Свойство устанавливает размер отступа между содержимым ячеек и их границами в
пикселах.
GridLines. Свойство имеет значение одноименного перечислимого типа GridLines. Оно указывает,
какие именно границы будут отображаться в таблице. Используются следующие значения:
o Both. Отображаются вертикальные и горизонтальные границы;
o Horizontal. Отображаются только горизонтальные линии, разделяющие строки таблицы;
o None. He отображаются ни горизонтальные, ни вертикальные границы;
o vertical. Отображаются только вертикальные линии, разделяющие столбцы таблицы.
rows. Это свойство является коллекцией, в которой содержатся все строки таблицы. Свойство
имеет тип TableRowcollection. Коллекция состоит из элементов типа TabieRow, который мы
рассмотрим несколько позже.
width. Свойство задает ширину создаваемой таблицы.
На этом список рассматриваемых свойств объекта Table заканчивается. Теперь упомянем о нескольких
событиях, входящих в состав этого объекта.

DataBinding. Событие инициализируется, когда таблица связывается с ее источником данных. В
таблицу разработчик может помещать информацию как в режиме проектирования, так и
программно. В программном режиме он может либо самостоятельно указывать данные для
каждой ячейки, либо — набор данных, которые и будут отображены в таблице. Вот в тот момент,
когда будет установлена связь таблицы с источником данных, и возникнет искомое событие.

init. Событие возникает, когда таблица только инициализируется. Это самый первый шаг в
отображении таблицы. Сначала создается таблица, как объект, затем она помещается на Webстраницу, в объект Page, и только после этого отображается в окне просмотра браузера. Событие
init возникает на самом первом этапе этой последовательности.


Load. Событие возникает, когда таблица передается на Web-страницу.
PreRender. Событие возникает в тот момент, когда сама таблица уже передана Web-странице, но
еще не отображена в окне просмотра браузера.
Теперь, как и было оговорено выше, перейдем к рассмотрению структуры объекта TabieRow, который
реализует отдельную строку таблицы. Мы уже знаем, что сама таблица по своей структуре является
именно коллекцией строк, которые в свою очередь являются коллекциями ячеек. Подобная структура
описания таблицы явно унаследована из обычного HTML, поэтому при создании таблицы разработчику
будет удобно использовать привычные представления. Но перейдем все-таки к структуре TabieRow. Как
мы уже знаем, это просто коллекция ячеек, которая унаследовала многие свойства от своих предков.
Поэтому мы рассмотрим только те свойства, которые регулируют внешний вид строки или описывают ее
структуру.




BackCoior. Свойство устанавливает цвет фона всех ячеек строки.

Font. Свойство задает шрифт, которым будет отображаться содержимое ячеек таблицы,
входящих в состав данной строки.

BorderCoior. Свойство задает цвет границ ячеек, входящих в состав строки.
BorderWidth. Свойство устанавливает ширину границ ячеек строки.
cells. Свойство имеет тип TabieCeiicoiiection и является коллекцией объектов TabieCeii, которые
реализуют отдельные ячейки таблицы, входящие в состав строки. Этот тип тоже следует
пристально рассмотреть, но к нему мы перейдем чуть позже.
Forecoior. Свойство устанавливает цвет, которым будет отображаться содержимое ячеек. В
нашем случае, это будет цвет текстового содержимого ячеек.


Height. Свойство задает высоту строки таблицы.

verticalAlign. Свойство устанавливает вертикальное выравнивание для содержимого каждой
ячейки, входящей в данную строку. По умолчанию используется значение Notset. Помимо него
также используются значения Top, Middle И Bottom.

width. Свойство задает ширину строки. Однако его явное использование чаще всего будет не
нужно, так как все строки наследуют общую ширину таблицы, и нет нужды устанавливать
ширину для каждой строки отдельно.
HorizontaiAiign. Свойство устанавливает горизонтальное выравнивание . для содержимого
каждой ячейки, входящей в данную строку. По умолчанию используется значение Notset.
Итак, мы узнали, что основным строительным материалом для таблицы является ячейка, которая
реализуется при помощи объекта TabieCeii. Пришла очередь рассмотреть и его.

BackCoior. Свойство устанавливает цвет фона данной ячейки. Если для ячейки не задано
значение этого свойства, используется цвет фона, который был установлен для всей строки, в
состав которой входит эта ячейка.



BorderCoior. Свойство задает цвет границ ячейки.




Font. Свойство задает шрифт, которым будет отображаться текстовое содержимое этой ячейки.

RowSpan. Целочисленное значение этого свойства указывает, сколько соседних строк
объединяет ячейка.

Text. Свойство имеет тип string. Строка, содержащаяся в этом свойстве, отображается в качестве
содержимого ячейки.

verticaiAiign. Свойство устанавливает вертикальное выравнивание для текстового содержимого
ячейки.


width. Свойство задает ширину ячейки.
BorderWidth. Свойство устанавливает ширину границ ячейки.
coiumnSpan. Свойство имеет целочисленное значение, которое указывает, сколько столбцов
объединено в этой ячейке. По умолчанию, каждая ячейка занимает пространство в одном
столбце, но мы можем и объединять несколько соседних столбцов в одной ячейке, как и с
обычными HTML-таблицами.
ForeCoior. В свойстве указывается цвет, которым будет отображаться содержимое ячейки.
Height. Свойство задает высоту ячейки.
HorizontalAiign. Как и одноименное свойство всей строки, это свойство устанавливает
горизонтальное выравнивание содержимого ячейки.
wrap. Свойство логического типа Boolean. В том случае, если содержимое ячейки не умещается в
ней как одна строка, следует либо разбить это содержимое на несколько строк без изменения
ширины ячейки, либо раздвинуть саму ячейку, увеличив ее размер по горизонтали. В том случае,
если свойство имеет значение True, используемое по умолчанию, содержимое ячейки будет
разбито на несколько строк.
Итак, теперь, когда мы несколько больше знаем о структуре объекта Table, можно перейти к
рассмотрению примера его использования. Естественно, таблицы идеально подходят для визуализации
баз данных, но эту их ипостась мы не будем сейчас рассматривать, так как о взаимодействии ASP.NET с
базами данных будет рассказано в следующей главе. Однако следует отметить, что в списке компонентов
Web Forms уже есть компонент DataGrid, который и предназначен для отображения таблиц, связанных с
базами данных. А сейчас нас интересует обычный компонент Table, в ячейках которого мы можем
размещать текстовую информацию.
На основном пространстве Web-страницы разместим один компонент Table. По умолчанию он имеет всего
одну ячейку. Попробуем создать два столбца, в каждом из которых будет две ячейки. Для этого нам,
естественно, потребуется воспользоваться свойствами таблицы.
В окне свойств объекта Properties (Свойства) следует обратить внимание на строку со свойством Rows
(Строки), и нажать кнопку в этой строке. При этом будет отображено диалоговое окно TableRow
Collection Editor (Редактор коллекции строк таблицы),
Изначально это окно выглядит несколько иначе, чем на рисунке. Так как в таблице нет ни одной строки,
то и в окне ничего не будет отображено. Но как только мы нажмем кнопку Add (Добавить), в списке
Members (Элементы) появится элемент, обозначающий одну строку в таблице. Так как нам необходимо
получить изначально две строки, то и кнопку Add (Добавить) нам придется нажать два раза.
После того, как мы создадим две строки, следует для каждой из них задать количество ячеек в строке и
содержимое этих ячеек. Здесь стоит обратить внимание на список TableRow Properties (Свойства строк
таблицы), находящийся в правой части диалогового окна TableRow CollectionEditor (Редактор коллекции
строк таблицы). В этом списке отображаются все свойства выбранной строки таблицы из списка Members
(Элементы). Нас, естественно, будет интересовать их свойство-коллекция Cells, которое располагается
на самой нижней строке. Нажатие на кнопку, располагающуюся в этой строке, активирует диалоговое
окно TableCell Collection Editor (Редактор табличных ячеек), которое позволяет разработчику задавать
количество ячеек в строке и все их основные свойства.
При помощи этого диалогового окна в каждой строке мы создадим по две ячейки, и внесем в них числа
от единицы до четырех. Конечно, можно было бы их оставить пустыми, но дело в том, что ячейки без
содержимого не будут отображаться, и, следовательно, структура таблицы может от этого нарушиться.
Заполнение ячеек будет происходить динамически в момент работы Web-приложения. Для этого нам
потребуется разместить на странице три поля текстового ввода, в двух из которых пользователь будет
указывать номер строки и столбца, в которых находится редактируемая ячейка, а в третье поле он будет
вносить текст, который затем будет отображен в выбранной ячейке. Также, естественно, потребуется
одна кнопка. Собственно, весь исходный HTML-код дает достаточно хорошее представление о структуре
создаваемой Web-страницы. Он приведен в листинге 3.43.
Листинг 3.43
<%@ Page Language="vb" AutoEventWireup="false" Codebehind= "WebForml.aspx.vb"
Inherits="Table.WebForml"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<titlex/title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Forml" method="post" runat="server">
<asp:Table id="Tablel" style="Z-INDEX: 101; LEFT: ЗЗрх;
POSITION: absolute; TOP: 26px" runat="server" Width="273px" Height="157px" BorderWidth="lpx"
BorderStyle="Solid">
<asp:TableRow BorderWidth="lpx">
<asp:TableCell BorderWidth="lpx" Text="l"x/asp:TableCell>
<asp:TableCell BorderWidth="lpx" Text="2"x/asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell BorderWidth="lpx" Text="3"x/asp:TableCell>
<asp:TableCell BorderWidth="lpx" Text="4"x/asp:TableCell>
</asp:TableRow> </asp:Table>
<asp:TextBox id="TextBox2" style="Z-INDEX: 105; LEFT: 180px;
POSITION: absolute; TOP: 240px" runat="server" Height="24px" Width="99px">
</asp:TextBox>
<asp:Label id="Labell" style="Z-INDEX: 102; LEFT: 39px;
POSITION: absolute; TOP: 207px" runat="server">HoMep столбца</азр:Label>
<asp:Label id=".Labe!2" style="Z-INDEX: 103; LEFT: 180px;
POSITION: absolute;
TOP: 209px" runat="server">HoMep CTpoKM</asp:Label>
<asp:TextBox id="TextBoxl" style="Z-INDEX: 104; LEFT: 40px;
POSITION: absolute; TOP: 239px" runat="server" Height="24px" Width="99px"x/asp:TextBox>
<asp:Label id="Labe!3" style="Z-INDEX: 106; LEFT: 45px;
POSITION: absolute;
TOP: 280px" runat="server" Height="19px" Width="231px"> Содержимое ячейки</азр:ЬаЬе!>
<asp:TextBox id="TextBox3" style="Z-INDEX: 107; LEFT: 42px;
POSITION: absolute; TOP: 309px" runat="server"x/asp:TextBox>
<asp:Button id="Buttonl" style="Z-INDEX: 108; LEFT: 54px;
POSITION: absolute;
TOP: 352px" runat="server" Text="IloffrBepwTb"x/asp:Buttort>
</form>
</body>
</HTML>
После того, как пользователь укажет координаты изменяемой ячейки и введет ее новое текстовое
содержимое, необходимо будет нажать на кнопку для передачи данных на сервер. Следовательно, при
разработке класса, реализующего эту Web-страницу, следует вносить код именно в обработчик ее
нажатия. Сам код искомого класса приведен в листинге 3.44.
Листинг 3.44
Public Class WebForml
Inherits System.Web.UI.Page
Protected WithEvents Labell As System.
Web.UI.WebControls.Label Protected WithEvents Label2
As System.Web.UI.WebControls.Label Protected WithEvents TextBoxl A
s System.Web.UI.WebControls.
TextBox Protected WithEvents TextBox2
As System.Web.UI.WebControls.TextBox Protected WithEvents Label3
As System.Web.UI.WebControls.Label Protected WithEvents TextBox3
As System.Web.UI.WebControls.TextBox Protected WithEvents Buttonl
As System.Web.UI.WebControls.Button Protected WithEvents Tablel
As System.Web.UI.WebControls.Table
fRegion " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender
As System.Object, ByVal
e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor. InitializeComponent() End Sub
#End Region
Private Sub Page_Load(ByVal sender
As System.Object, ByVal
e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub
Private Sub Buttonl_Click(ByVal sender-As System.Object, ByVal
e As System.EventArgs) Handles Buttonl.Click
Dim i, j As Integer
Dim t As String
i = Val(TextBoxl.Text) - 1
j = Val(TextBox2.Text) - 1 : t = TextBox3.Text
Tablel.Rows(j).Cells(i).Text = t
End Sub
End Class
Сам код достаточно прозрачен. В самом начале подпрограммы мы объявляем две целочисленные
переменные, в которых будут храниться номер строки и столбца изменяемой ячейки. Также объявляется
переменная строкового типа, в которую мы поместим текст, для размещения пользователем в ячейке
таблицы. Сама же подпрограмма достаточно проста. При помощи функции vai мы переводим текстовые
значения в целочисленные. Так как пользователь будет нумеровать строки и столбцы, начиная с
единицы, а в объекте Table их нумерация начинается с нуля, потребуется из полученных значений
вычесть по единице. А затем при помощи коллекции строк таблицы и коллекции ячеек, входящих в
состав строки, передать в ячейку строку, введенную пользователем.
Внешний вид этой Web-страницы при просмотре ее при помощи браузера Internet Explorer показан на
рис. 3.28.
Естественно, конечный HTML-код этой Web-страницы будет отличаться от того, который был создан
средой разработки. Та версия кода, которая передается конечному пользователю, приведена в листинге
3.45.
Листинг 3.45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<titlex/title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" con-tent="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form name="Forml" method="post" action="WebForml.aspx" id="Forml">
<input type="hidden" name="__VIEWSTATE" value=
"dDwtMTM2NjA40TAyMDtOPDtsPGk8MT47PjtsPHQ802w8aTw
xPjs+02w8dDw7bDxpPDA+02k8 MT47PjtsPHQ802w8aTwwPjs+02w8dDxwPHA8bDxUZXhOOz4
7bDzQstC10YDRhdC90Y/RjyDRg dGCOYDQvtC60LA7Pj47Pjs7Pjs+PjtOPDtsPGk8MT47PjtsPHQ
8cDxwPGw8VGV4dDs+02w80Y LQtdC60YHRgjs+Pjs+Ozs+Oz4+Oz4+Oz4+Oz4+Oz4=" />
<table id="Tablel" border="0" style="border-width:Ipx;border-style: Solid/height:157px;width:273px;
Z-INDEX: 101; LEFT: ЗЗрх;
POSITION: absolute;
TOP: 26px">
<tr style="border-width:lpx;border-style:solid;">
<td style="border-width:lpx;border-style:solid;">
верхняя строка </tdxtd style="border-width:Ipx;border-style:solid;">
2
</td>
</trxtr>
<td style="border-width:lpx;border-style:solid;">
3
</tdxtd style="border-width:Ipx;border-style:solid;">
текст </td>
</tr>
</table>
<input name="TextBox2" type="text" value="l" id="TextBox2"
style="height:24px;width:99px;Z-INDEX: 105;
LEFT: 180px;
POSITION: !' absolute;
TOP: 240px" />
<span id="Labell" style="Z-INDEX: 102; LEFT: 39px;
POSITION: absolute;
TOP: 207рх">Номер столбца</зрап>
<span id="Label2" style="Z-INDEX: 103; LEFT: 180px;
POSITION: absolute;
TOP: 209рх">Номер строки</зрап>
|- <input name="TextBoxl" type="text" value="l" id="TextBoxl" style="height:24px;width:99px;
Z-INDEX: 104; LEFT: 40px;
POSITION: absolute;
TOP: 239px" />
<span id="Labe!3" style="height:19px;width:231px;Z-INDEX: 106; LEFT: 45px;
POSITION: absolute;
TOP: 280рх">Содержимое ячейки</зрап>
<input name="TextBox3" type="text" value="BepxH#H строка" id="TextBox3" style="Z-INDEX: 107; LEFT:
42px; POSITION: absolute;
TOP: ЗОЭрх" />
<input type="submit" name="Buttonl" value="noflTBep,njiTb" id="Buttonl" style="Z-INDEX: 108; LEFT:
54px; POSITION: absolute;
TOP: 352px" />
</form>
</body>
</HTML>
Итак, на этом простом примере мы научились динамически изменять содержимое таблиц, размещенных
на Web-страницах. Необходимо, конечно, отметить, что разработчик имеет возможность изменять не
только содержимое таблиц, но и их структуру, добавляя новые столбцы и строки, но подобной
возможностью следует пользоваться очень осторожно, так как из-за этого может нарушиться вся верстка
Web-страницы.