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

Доброго вечора! Сьогодні я опишу та продемонструю динамічне створення елементів управління в ASP .NET.

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

Пам’ятаєте як створюються елементи управління в ASP .NET? Якщо вони статичні (в .aspx файлах), то певний аналізатор (Parser), аналізує сторінку, створює об’єктну модель, запускає життєвий цикл сторінки (серверний код), перетворює весь вміст в HTML  та передає його назад клієнту, який надіслав запит.

Прочитавши попередній абзац, можна зрозуміти, що динамічне створення можна засунути в серверний код.

Створіть звичайний ASP .NET  проект:

1.1

Мал. 1.1

Відкрийте код сторінки Default.aspx та добавте один контейнер:

1 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 2 <h2> 3 Welcome to ASP.NET! 4 </h2> 5 <p> 6 To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>. 7 </p> 8 <p> 9 You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409" 10 title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>. 11 </p> 12 <div id="divDynamicControls" runat="server"> 13 14 </div> 15 </asp:Content> 16

Відкрийте серверний код цієї сторінки (Default.aspx.cs). Цей код має наступний вигляд:

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 namespace DynamicControls 9 { 10 public partial class _Default : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 15 } 16 } 17 } 18

Добавте в обробник події Load такий код:

1 protected void Page_Load(object sender, EventArgs e) 2 { 3 TextBox dynamicTextBox = new TextBox(); 4 divDynamicControls.Controls.Add(dynamicTextBox); 5 } 6

Запустіть сторінку, після чого перегляньте її вигляд у вікні браузера:

1.2

Мал. 1.2

Отже, нам вдалось створити цей елемент управління. Все що потрібно – це створити екземпляр необхідного елементу та добавити його в якийсь контейнер.

Тепер в вас може виникнути питання, яке відноситься до отримання введеної інформації після відправлення постбеку (Postback).

Я можу вас обрадувати Smile. Інформацію можна легко отримати з мінімальними зусиллями:

 

  • Добавте кнопку Submit на сторінку:
1 <asp:Button ID="btnSubmit" runat="server" Text="Submit" />

  • Перемістіть створення елементу управління з обробнику події Load в обробник події Init:

TextBox dynamicTextBox;

1 TextBox dynamicTextBox; 2 protected void Page_Init(object sender, EventArgs e) 3 { 4 dynamicTextBox = new TextBox(); 5 dynamicTextBox.ID = "dynamicText"; 6 divDynamicControls.Controls.Add(dynamicTextBox); 7 } 8 protected void Page_Load(object sender, EventArgs e) 9 { 10 11 } 12

Тепер протестуйте результат: запустіть сторінку, введіть якийсь текст та натисніть кнопку Submit:

1.3

Мал. 1.3

1.4

Мал. 1.4

Тепер ще раз коротко підсумую все, що потрібно для створення динамічного елементу, з якого потім можна витягнути інформацію:

  1. Створювати та добавляти його на події Init.
  2. Встановити властивість ID.

Тепер, можете сміливо приступати до створення своїх сторінок з динамічними елементами управління. Успіхів Smile

Скачати код

Advertisements

, ,

  1. #1 by Sashka Korshunov (@sashkakit) on January 9, 2012 - 09:19

    g9Ky|-O

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: