|
» ASP
для новичков
» Главная
страница
»
ASP
для новичков
Табличные
компоненты
Теперь рассмотрим
использование таблиц в оформлении Web-страниц. В предыдущем разделе мы видели,
как используется стандартная таблица, создаваемая компонентом с вкладки HTML.
Всем хорош этот компонент, кроме одного — у разработчика нет возможности
изменять его параметры. Точнее, при помощи некоторых достаточно запутанных
ухищрений можно динамически менять содержимое ячеек и управлять их видимостью,
используя для этого различные элементы стилевого оформления и свойства види-'
мости, но слишком уж это неблагодарная работа. ASP.NET дал разработчику именно
свободу творчества, устранив от необходимости использовать различные ухищрения.
Если вся работа в ASP.NET оставляет ощущение стройности, логичности и
прозрачности, то почему использование таблиц должно создавать подобные проблемы?
Поэтому в данном разделе мы
рассмотрим применение компонента таblе с вкладки Web Forms (Web формы).
Начнем мы как обычно с рассмотрения его структуры. Конечно, нет нужды приводить
здесь полный список всех свойств или методов, так как немалая их часть
унаследована от классов-предков, и они не так уж важны для работы с этим
компонентом. Но действительно важные свойства и события, входящие в состав
объекта таblе, мы упомянем. Начнем, как всегда, со свойств.
- Backcoior. Свойство задает
цвет фона для создаваемой таблицы.
- BackimageUri. Свойство типа
string, в котором указывается URL графического файла. Этот файл должен содержать
изображение, которое будет служить фоном создаваемой таблице.
- BorderCoior. Свойство
устанавливает цвет границ ячеек и всей таблицы в целом.
- Borderstyie. Свойство имеет
значение одноименного перечислимого типа Borderstyie. Оно устанавливает тип
отображаемых границ ячеек и всей таблицы.
- Borderwidth. Свойство
задает ширину границ таблицы.
- ceiiPadding. Свойство
устанавливает размер отступа между содержимым ячеек и их границами в пикселах.
- Cellspacing. Свойство типа
integer. Устанавливает дистанцию между ячейками таблицы.
- GridLines. Свойство имеет
значение одноименного перечислимого типа GridLines. Оно указывает, какие именно
границы будут отображаться в таблице. Используются следующие значения:
- Both. Отображаются
вертикальные и горизонтальные границы;
- Horizontal. Отображаются
только горизонтальные линии, разделяющие строки таблицы;
- None. He отображаются ни
горизонтальные, ни вертикальные границы;
- vertical. Отображаются
только вертикальные линии, разделяющие столбцы таблицы.
- HorizontaiAiign. Свойство
имеет значение одноименного перечислимого типа HorizontaiAiign. Оно
устанавливает, как будет выравниваться таблица по горизонтали на Web-странице.
Используются следующие значения:
- Center. Таблица будет
отображена в центре Web-страницы;
- justify. Браузер попытается
растянуть таблицу по ширине своего окна просмотра;
- Left. Таблица будет прижата
к левому краю Web-страницы;
- Notset. Значение
используется по умолчанию. Означает, что никакого горизонтального выравнивания
явно для таблицы не задано;
- Right. Таблица будет
прижата к правому краю Web-страницы.
- rows. Это свойство является
коллекцией, в которой содержатся все строки таблицы. Свойство имеет тип
TableRowcollection. Коллекция состоит из элементов типа TabieRow, который мы
рассмотрим несколько позже.
- width. Свойство задает
ширину создаваемой таблицы.
На этом список
рассматриваемых свойств объекта Table заканчивается. Теперь упомянем о
нескольких событиях, входящих в состав этого объекта.
- DataBinding. Событие
инициализируется, когда таблица связывается с ее источником данных. В таблицу
разработчик может помещать информацию как в режиме проектирования, так и
программно. В программном режиме он может либо самостоятельно указывать данные
для каждой ячейки, либо — набор данных, которые и будут отображены в таблице.
Вот в тот момент, когда будет установлена связь таблицы с источником данных, и
возникнет искомое событие.
- init. Событие возникает,
когда таблица только инициализируется. Это самый первый шаг в отображении
таблицы. Сначала создается таблица, как объект, затем она помещается на
Web-страницу, в объект Page, и только после этого отображается в окне просмотра
браузера. Событие init возникает на самом первом этапе этой последовательности.
- Load. Событие возникает,
когда таблица передается на Web-страницу.
- PreRender. Событие
возникает в тот момент, когда сама таблица уже передана Web-странице, но еще не
отображена в окне просмотра браузера.
Теперь, как и было оговорено
выше, перейдем к рассмотрению структуры объекта TabieRow, который реализует
отдельную строку таблицы. Мы уже знаем, что сама таблица по своей структуре
является именно коллекцией строк, которые в свою очередь
являются коллекциями ячеек. Подобная структура описания таблицы явно
унаследована из обычного HTML, поэтому при создании таблицы разработчику будет
удобно использовать привычные представления. Но перейдем все-таки к структуре
TabieRow. Как мы уже знаем, это просто коллекция ячеек, которая унаследовала
многие свойства от своих предков. Поэтому мы рассмотрим только те свойства,
которые регулируют внешний вид строки или описывают ее структуру.
- BackCoior. Свойство
устанавливает цвет фона всех ячеек строки.
- BorderCoior. Свойство
задает цвет границ ячеек, входящих в состав строки.
- BorderWidth. Свойство
устанавливает ширину границ ячеек строки.
- cells. Свойство имеет тип
TabieCeiicoiiection и является коллекцией объектов TabieCeii, которые реализуют
отдельные ячейки таблицы, входящие в состав строки. Этот тип тоже следует
пристально рассмотреть, но к нему мы перейдем чуть позже.
- Font. Свойство задает
шрифт, которым будет отображаться содержимое ячеек таблицы, входящих в состав
данной строки.
- Forecoior. Свойство
устанавливает цвет, которым будет отображаться содержимое ячеек. В нашем случае,
это будет цвет текстового содержимого ячеек.
- Height. Свойство задает
высоту строки таблицы.
- HorizontaiAiign. Свойство
устанавливает горизонтальное выравнивание . для содержимого каждой ячейки,
входящей в данную строку. По умолчанию используется значение Notset.
- verticalAlign. Свойство
устанавливает вертикальное выравнивание для содержимого каждой ячейки, входящей
в данную строку. По умолчанию используется значение Notset. Помимо него также
используются значения Top, Middle И Bottom.
- width. Свойство задает
ширину строки. Однако его явное использование чаще всего будет не нужно, так как
все строки наследуют общую ширину таблицы, и нет нужды устанавливать ширину для
каждой строки отдельно.
Итак, мы узнали, что
основным строительным материалом для таблицы является ячейка, которая
реализуется при помощи объекта TabieCeii. Пришла очередь рассмотреть и его.
- BackCoior. Свойство
устанавливает цвет фона данной ячейки. Если для ячейки не задано значение этого
свойства, используется цвет фона, который был установлен для всей строки, в
состав которой входит эта ячейка.
- BorderCoior. Свойство
задает цвет границ ячейки.
- BorderWidth. Свойство
устанавливает ширину границ ячейки.
- coiumnSpan. Свойство имеет
целочисленное значение, которое указывает, сколько столбцов объединено в этой
ячейке. По умолчанию, каждая ячейка занимает пространство в одном столбце, но мы
можем и объединять несколько соседних столбцов в одной ячейке, как и с обычными
HTML-таблицами.
- Font. Свойство задает
шрифт, которым будет отображаться текстовое содержимое этой ячейки.
- ForeCoior. В свойстве
указывается цвет, которым будет отображаться содержимое ячейки.
- Height. Свойство задает
высоту ячейки.
- HorizontalAiign. Как и
одноименное свойство всей строки, это свойство устанавливает горизонтальное
выравнивание содержимого ячейки.
- RowSpan. Целочисленное
значение этого свойства указывает, сколько соседних строк объединяет ячейка.
- Text. Свойство имеет тип
string. Строка, содержащаяся в этом свойстве, отображается в качестве
содержимого ячейки.
- verticaiAiign. Свойство
устанавливает вертикальное выравнивание для текстового содержимого ячейки.
- width. Свойство задает
ширину ячейки.
- 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-страницы.
Следующий
урок
|
