Исходники.Ру - Программирование
Исходники
Статьи
Книги и учебники
Скрипты
Новости RSS
Магазин программиста

Главная » Статьи по программированию » .NET - Все статьи »

Обсудить на форуме Обсудить на форуме

Пользовательские элементы управления в ASP.NET (Часть 1)

User Controls используются в большинстве приложений ASP.NET. Многие иэ них имеют статус Enterprise и стоят денег (и много). Про преимущества контролов не буду тут говорить. Уже люди это сделали. :-)

В обычном ASP, мы использовали include файлы, в них описывали функции и в ASP коде вызывали эти функции: call MyFunction

Однако, в .NET, мы можем сделать это покруче. Можно строить приложение как дом из кирпичей.

В этой статье я продемонстрирую 2 механизма (честно говоря, облазив интернет, не встречал подобного подхода, хотя наверняка существуют подобные решения) Я использую эти механизмы во всех приложениях, и они перешли со мной из ASP в ASP.NET (конечно видоизменившись):

  1. Header и Footer (особенно важен Header)
  2. Графические растягивающиеся рамки вокруг таблиц.

Мини проект содержит:

  1. 1. Класс "Бизнес логики" (нужны же какие-то данные)
          Components/Person.cs
    
  2. 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. 3. Стили :
          CSS/graphics.css
    
  4. 4. Клиентский скрипт, использующийся в Draw_HTMLFooter:
          Javascript/Status.js
    
  5. 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>

Используются эти юзер контролы следующим образом:

  1. Открываем таблицу (вставляем начальный тег <table>)
  2. Вставляем контролы Draw_UpBorder и Draw_BorderStart (порядок важен)
  3. Вставляем табличу с данными
  4. Вставляем контролы Draw_BorderEnd и Draw_EndBorder (порядок важен)
  5. Закрываем таблицу

 

Протестируем вышеизложенное на примере:

//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 простых юзер контролов, но как они облегчают процесс создания веб приложений :)

Продолжение следует...


Текст примеров данной статьи можно выкачать здесь


Может пригодится:


Автор: Anatoly Lubarsky
Прочитано: 4481
Рейтинг:
Оценить: 1 2 3 4 5

Комментарии: (0)

Добавить комментарий
Ваше имя*:
Ваш email:
URL Вашего сайта:
Ваш комментарий*:
Код безопастности*:

Рассылка новостей
Рейтинги
© 2007, Программирование Исходники.Ру