Власні серверні елементи управління в ASP .NET

Доброї пори часу Winking smile. Я так і не навчився керувати своїм часом більш ефективніше, тому не пишу так часто на цьому блозі. Але деякі успіхи в цьому є Smile, тому буду старатись частіше викладати якусь корисну інформацію про технології розробки від Microsoft.

Сьогодні я напишу статтю про те, як створювати власні елементи управління в ASP .NET, які називаються серверними. В попередній статтія продемонстрував як створити елементи управління, які комбінуються з розміткою та файлом коду. Елементи управління, про які ви прочитаєте тут відрізняються тим, що вони:

  • Не мають файлу з розміткою (весь їх вміст має генеруватись динамічно)
  • Покращена підтримка у вікні дизайнера Visual Studio
  • Унаслідуються від класів Control або WebControl

Отже тепер можна приступити до створення серверного елементу управління.

Створіть звичайний ASP .NET проект, після чого у вікні Object Browser виберіть Add->New Project->ASP .NET Server Control:

1

Мал 1.1

2

 

Мал 1.2

Після чого автоматично буде згенерований ось такий код:

1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Linq; 5 using System.Text; 6 using System.Web; 7 using System.Web.UI; 8 using System.Web.UI.WebControls; 9 10 namespace CustomServerControl 11 { 12 [DefaultProperty("Text")] 13 [ToolboxData("<{0}:CustomControl runat=server></{0}:CustomControl>")] 14 public class CustomControl : WebControl 15 { 16 [Bindable(true)] 17 [Category("Appearance")] 18 [DefaultValue("")] 19 [Localizable(true)] 20 public string Text 21 { 22 get 23 { 24 String s = (String)ViewState["Text"]; 25 return ((s == null) ? "[" + this.ID + "]" : s); 26 } 27 28 set 29 { 30 ViewState["Text"] = value; 31 } 32 } 33 34 protected override void RenderContents(HtmlTextWriter output) 35 { 36 output.Write(Text); 37 } 38 } 39 } 40

Як я вже казав, серверні елементи управління унаслідуються від класів Control або WebControl. Різниця полягає в тому, що другий надає більше властивостей, які пов’язані з налаштуванням вигляду елементу управління: колір фону, рамки, шрифту, сам шрифт і т.д. (для докладнішої документації клацніть зверху).

З цього коду видно, що автоматично згенерований файл містить відразу властивість, яку він зберігає в колекції ViewState.

Зверніть увагу на метод RenderContents, в ньому якраз і відбувається записування властивості Text в середину елемента управління. Наприклад, якщо у ваш елемент управління генерує html елемент span, то згенерований код буде виглядати наступним чином:

<span>Текст, який знаходився у властивості Text</span>

Звичайно в тегу span будуть встановлені атрибути, які відповідають форматуванню заданому властивостями вашого елемента.

Як ви напевно здогадались, ви можете самі встановити тег, який буде згенерований вашим елементом управління. Для цього добавте конструктор без параметрів, який викликає конструктор базового класу:

public CustomControl() : base(HtmlTextWriterTag.H1) { }

 

З коду видно, що конструктор базового класу приймає якесь значення з перечислення HtmlTextWriterTag, яке ідентифікує html тег. В нашому випадку це буде тег H1.

Тепер добавте цей елемент управління на вашу сторінку:

1. В вікні Toolbox відкрийте контекстне меню та виберіть Choose Items:

3

Мал 1.3

2. Відкриється вікно, в якому потрібно натиснути кнопку Browse та вибрати скомпільований dll файл з елементом управління, після чого натисніть ОК:

4

Мал 1.4

3. Тепер звичайною drag&drop операцією перетягніть елемент на вашу сторінку. Visual Studio автоматично додасть посилання на цю dll файл, який містить елемент управління та добавить ось такий код до вашої сторінки:

1 <%@ Register Assembly="CustomServerControl" Namespace="CustomServerControl" TagPrefix="cc1" %> 2 ......... 3 <cc1:CustomControl runat="server"></cc1:CustomControl> 4 ......... 5

Коли елемент управління успішно доданий на вашу сторінку, виберіть його в дизайнері та гляньте на вікно Properties:

5

Мал 1.5

Як ви бачите, ви можете налаштовувати властивості та підписуватись на події так само як і у випадку звичайного елементу управління (комбінований ASPX розмітка та C#/VB код). Але ось такого в звичайному контролі зробити точно не можна:

1. Відкрийте файл CustomControl.cs

2. Позначте властивість Text атрибутом Description:

1 [Description("Enter text that should be displayed in control")] 2 public string Text 3 { 4 get 5 { 6 String s = (String)ViewState["Text"]; 7 return ((s == null) ? "[" + this.ID + "]" : s); 8 } 9 10 set 11 { 12 ViewState["Text"] = value; 13 } 14 } 15

3. Перекомпілюйте проект (мені прийшлось видаляти посилання на елемент управління та знову добавляти його)

4. Перегляньте вікно з властивостями та виберіть властивість Text:

6

Мал 1.6

З малюнку видно, що тепер є опис властивості, а значить користуватись такими елементами управління вже на багато легше.

Отже ви вже знаєте як створювати серверні елементи управління, тепер залишилось два питання, без відповідей на які ви не зможете створювати дійсно корисні елементи управління:

1. Як додати свої атрибути до тегу, який буде згенерований елементом управління?

2. Як скомбінувати елемент управління з кількох вже готових елементів?

Тепер відповіді по порядку:

1. Перевизначіть метод AddAttributesToRender, в тілі якого використовуйте методи AddAttribute та AddStyleAttribute класу HtmlTextWriter для додавання звичайних атрибутів та додавання CSS атрибутів відповідно:

1 protected override void AddAttributesToRender(HtmlTextWriter writer) 2 { 3 writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none"); 4 writer.AddAttribute(HtmlTextWriterAttribute.Nowrap, "nowrap"); 5 base.AddAttributesToRender(writer); 6 } 7

Згенерований html буде виглядати ось так:

7

Мал 1.7

2. Потрібно унаслідуватись від CompositeControl, перевизначити метод CreateChildControls та добавити елементи управління, які ви хочете використовувати та відображати в вашому елементі. Також витріть метод RenderContents, в іншому випадку він перетре весь код згенерований вкладеними компонентами:

1 public class CustomControl : CompositeControl 2 { 3 ….. 4 protected override void CreateChildControls() 5 { 6 TextBox textBox = new TextBox(); 7 textBox.EnableViewState = false; 8 textBox.Text = Text; 9 Controls.Add(textBox); 10 } 11 } 12

Цієї інформації має бути достатньо для того, щоб приступити до більш ретельнішого вивчення механізму створення власних серверних контролів, які можна буде повторно використовувати та ділитись з іншими розробниками Smile.

П.С. Весь код відформатований плагіном CodeFormatter для Windows Live Writer. Форматування коду тепер забирає не більше ніж кілька хвилин.

Advertisements

, , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: