User Controls
используются в большинстве приложений ASP.NET. Многие иэ них имеют
статус Enterprise и стоят денег (и много). Про преимущества контролов не
буду тут говорить. Уже люди это сделали. :-) В обычном ASP, мы
использовали include файлы, в них описывали функции и в ASP коде
вызывали эти функции: call MyFunction
Однако, в .NET, мы можем сделать это покруче. Можно строить
приложение как дом из кирпичей.
В этой статье я продемонстрирую 2 механизма (честно говоря, облазив
интернет, не встречал подобного подхода, хотя наверняка существуют
подобные решения) Я использую эти механизмы во всех приложениях, и они
перешли со мной из ASP в ASP.NET (конечно видоизменившись):
- Header и Footer (особенно важен Header)
- Графические растягивающиеся рамки вокруг таблиц.
Мини проект содержит:
- 1. Класс "Бизнес логики" (нужны же какие-то данные)
Components/Person.cs
- 2. Контролы :
Controls/Draw_StartHTMLHeader.ascx
Controls/Draw_HTMLFooter.ascx
Controls/Draw_UpBorder.ascx
Controls/Draw_BorderStart.ascx
Controls/Draw_EndBorder.ascx
Controls/Draw_BorderEnd.ascx
- 3. Стили :
CSS/graphics.css
- 4. Клиентский скрипт, использующийся в Draw_HTMLFooter:
Javascript/Status.js
- 5. Тестовые страницы :
Main/FirstPage.aspx
Main/SecondPage.aspx
Часть 1
Header и Footer
//Header
//Draw_StartHTMLHeader.ascx + Codebehind:
//=============================================================================
//CODEBEHIND
using System;
using System.IO;
namespace HTMLControls.Controls
{
public class Draw_StartHTMLHeader : System.Web.UI.UserControl
{
public string _title = "";
public string _charset = "";
public string _styles = "";
public string Title
{
set { _title = value; }
}
public string Charset
{
set { _charset = value; }
}
public string Styles
{
set { _styles = value; }
}
}
}
//CODEBEHIND END
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><%=_title %></title>
<meta http-equiv="content-type" content="text/html; charset=<%=_charset %>">
<meta http-equiv="expires" content="-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<!----- ******* STYLES ********* --------------->
<link rel="stylesheet" href="<%=_styles %>" type="text/css">
//=============================================================================
//Status.js
Clock();
function Clock()
{
window.setTimeout("Clock()", 1000);
today = new Date();
self.status = today.toLocaleString();
}
//Footer
//Draw_HTMLFooter.ascx:
<script language="JavaScript" src="../Javascript/Status.js"></script>
</body>
</html>
Footer, кроме тривиального окончания HTML, показывает точное время в
Status Bar
Header даёт нам возможность одной строчкой заменить строчек десять
(title, charset, styles - параметры). Обратите внимание на Codebehind.
Как просто!
Часть 2
Графические растягивающиеся рамки вокруг таблиц. Чтобы заполнить
интерфейс данными напишем класс Person
Person.cs
using System;
using System.Web;
using System.Collections;
namespace HTMLControls.Components
{
public class Person : System.Web.UI.Page
{
int _age = 0;
string _name = "";
public Person()
{
}
public Person(string name, int age)
{
this._name = name;
this._age = age;
}
public int Age
{
get { return _age; }
set
{
if (value < 0)
throw new ArgumentException("The age must be a positive number");
_age = value;
}
}
public string Name
{
get { return _name; }
set { _name = value; }
}
}
}
Часто хочется нарисовать красивую рамку вокруг таблицы, чтобы таблица
растягивалась горизонтально и вертикально. Но для этого надо правильно
нарезать гифы (сказать дизайнеру) 4 уголка и 4 квадратных фрагмента
перекладинок (уф) И написать код, которого будет в обычном случае много.
:(
Но мы пойдём другим путём и создадим несколько юзер контролов:
Draw_UpBorder
<tr>
<td><img src="../Images/Desktop/left_up_corner.gif" border="0"></td>
<td background="../Images/Desktop/up_border.gif" border="0"><img src="../Images/1px_0.gif" border="0"></td>
<td><img src="../Images/Desktop/right_up_corner.gif" border="0"></td>
</tr>
Draw_BorderStart
<tr>
<td background="../Images/Desktop/left_border.gif" border="0" width="4">
<img src="../Images/1px_0.gif" border="0" style="width:4px;"></td>
<td>
Draw_BorderEnd
</td>
<td background="../Images/Desktop/right_border.gif" border="0" width="4">
<img src="../Images/1px_0.gif" border="0" style="width:4px;"></td>
</tr>
Draw_EndBorder
<tr>
<td><img src="../Images/Desktop/left_down_corner.gif" border="0"></td>
<td background="../Images/Desktop/down_border.gif" border="0"><img src="../Images/1px_0.gif" border="0"></td>
<td><img src="../Images/Desktop/right_down_corner.gif" border="0"></td>
</tr>
Используются эти юзер контролы следующим образом:
- Открываем таблицу (вставляем начальный тег <table>)
- Вставляем контролы Draw_UpBorder и Draw_BorderStart (порядок
важен)
- Вставляем табличу с данными
- Вставляем контролы Draw_BorderEnd и Draw_EndBorder (порядок
важен)
- Закрываем таблицу
Протестируем вышеизложенное на примере:
//CODEBEHIND
using System;
using System.Collections;
using HTMLControls.Components;
namespace HTMLControls.Main
{
public class FirstPage : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid gridPerson;
void Page_Load(object sender, EventArgs e)
{
ArrayList coll = new ArrayList();
coll.Add(new Person("Person 1", 10));
coll.Add(new Person("Person 2", 20));
coll.Add(new Person("Person 3", 30));
coll.Add(new Person("Person 4", 40));
coll.Add(new Person("Person 5", 50));
coll.Add(new Person("Person 6", 60));
coll.Add(new Person("Person 7", 10));
coll.Add(new Person("Person 8", 20));
coll.Add(new Person("Person 9", 30));
coll.Add(new Person("Person 10", 40));
gridPerson.DataSource = coll;
gridPerson.DataBind();
}
}
}
Заполняем DataGrid, пользуясь нашим классом Person
<%@ Page language="c#" CodeBehind="FirstPage.aspx.cs" Inherits="HTMLControls.Main.FirstPage" %>
<%@ Import Namespace="HTMLControls.Components" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_StartHTMLHeader" Src="../Controls/Draw_StartHTMLHeader.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_UpBorder" Src="../Controls/Draw_UpBorder.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderStart" Src="../Controls/Draw_BorderStart.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderEnd" Src="../Controls/Draw_BorderEnd.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_EndBorder" Src="../Controls/Draw_EndBorder.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_HTMLFooter" Src="../Controls/Draw_HTMLFooter.ascx" %>
<HTMLControls:Draw_StartHTMLHeader Charset="ISO-8859-1" Title="FirstPage" Styles="../CSS/graphics.css" runat="server" />
</head>
<body class="lightBackGround" style="overflow:hidden;">
<form id="lg" name="lg" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="450" align="center">
<HTMLControls:Draw_UpBorder runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" class="whiteBackGround">
<tr height="30"><td class="header"> First Page </td></tr>
<tr><td bgcolor="#336699"><img src="../Images/1px_0.gif" border="0"></td></tr>
<tr>
<td>
<asp:DataGrid EnableViewState="false" class="data" id="gridPerson" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn HeaderStyle-Font-Bold="true"
HeaderText="<span style='padding-left:20px;'>Name</span>"
ItemStyle-Width="250">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Name %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderStyle-Font-Bold="true"
HeaderText="<span style='padding-left:20px;'>Age</span>"
ItemStyle-Width="200">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Age %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</td>
</tr>
</table>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</form>
<HTMLControls:Draw_HTMLFooter runat="server" />
Всё.
Следующий пример посложнее, но и его я сделал секунд за 20 используя
Copy-Paste
А вот и его код:
<%@ Page language="c#" CodeBehind="SecondPage.aspx.cs" Inherits="HTMLControls.Main.SecondPage" %>
<%@ Import Namespace="HTMLControls.Components" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_StartHTMLHeader" Src="../Controls/Draw_StartHTMLHeader.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_UpBorder" Src="../Controls/Draw_UpBorder.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderStart" Src="../Controls/Draw_BorderStart.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_BorderEnd" Src="../Controls/Draw_BorderEnd.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_EndBorder" Src="../Controls/Draw_EndBorder.ascx" %>
<%@ Register TagPrefix="HTMLControls" TagName="Draw_HTMLFooter" Src="../Controls/Draw_HTMLFooter.ascx" %>
<HTMLControls:Draw_StartHTMLHeader Charset="ISO-8859-1" Title="SecondPage" Styles="../CSS/graphics.css" runat="server" />
</head>
<body class="lightBackGround" style="overflow:hidden;">
<form id="lg" name="lg" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<HTMLControls:Draw_UpBorder runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" class="whiteBackGround">
<tr height="30"><td class="header" colspan="2"> Second Page </td></tr>
<tr><td bgcolor="#336699" colspan="2"><img src="../Images/1px_0.gif" border="0"></td></tr>
<tr>
<td style="padding:10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<HTMLControls:Draw_UpBorder runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<asp:DataGrid EnableViewState="false" class="data" id="gridPerson1" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Name</span>"
ItemStyle-Width="200">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Name %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Age</span>"
ItemStyle-Width="150">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Age %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</td>
<td style="padding:10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<HTMLControls:Draw_UpBorder runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<asp:DataGrid EnableViewState="false" class="data" id="gridPerson2" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Name</span>"
ItemStyle-Width="200">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Name %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Age</span>"
ItemStyle-Width="150">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Age %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</td>
</tr>
<tr>
<td style="padding:10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<HTMLControls:Draw_UpBorder runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<asp:DataGrid EnableViewState="false" class="data" id="gridPerson3" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Name</span>"
ItemStyle-Width="200">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Name %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Age</span>"
ItemStyle-Width="150">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Age %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</td>
<td style="padding:10px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<HTMLControls:Draw_UpBorder runat="server" />
<HTMLControls:Draw_BorderStart runat="server" />
<asp:DataGrid EnableViewState="false" class="data" id="gridPerson4" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn HeaderStyle-Font-Bold="true"
HeaderText="<span style='padding-left:20px;'>Name</span>"
ItemStyle-Width="200">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Name %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn
HeaderStyle-Font-Bold="true" HeaderText="<span style='padding-left:20px;'>Age</span>"
ItemStyle-Width="150">
<ItemTemplate>
<span style="padding-left:20px;"><%# ((Person)Container.DataItem).Age %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</td>
</tr>
</table>
<HTMLControls:Draw_BorderEnd runat="server" />
<HTMLControls:Draw_EndBorder runat="server" />
</table>
</form>
<HTMLControls:Draw_HTMLFooter runat="server" />
Вот и все. Всего 6 простых юзер контролов, но как они облегчают
процесс создания веб приложений :)
Продолжение следует... |