Підручник із веб-форм ASP.NET: приклади елементів керування користувача
Джейкоб Лі
⚡ Розумний підсумок
Елементи керування користувача ASP.NET Web Forms дозволяють створювати компоненти інтерфейсу користувача, які можна повторно використовувати, один раз і використовувати на багатьох сторінках. У ньому показано, як створити елемент керування користувача, зареєструвати його на сторінці та глобально в web.config, а також додати публічні властивості.
В ASP.Net можна створювати багаторазовий код. Багаторазовий код можна використовувати в багатьох місцях без необхідності писати код знову.
Повторно використовуваний код допомагає скоротити час, який розробник витрачає після написання коду. Його можна зробити один раз і використовувати повторно в кількох місцях.
Створіть елемент керування користувача в ASP.Net
ASP.Net має можливість створювати веб-елементи керування. Ці елементи керування містять код, який можна використовувати повторно. Його можна використовувати в різних програмах відповідно до вимог.
Давайте розглянемо приклад того, як ми можемо створити веб-елемент керування користувача в ASP.Net.
У нашому прикладі:
- Ми збираємося створити веб-контроль.
- Він буде використовуватися для створення компонента заголовка.
- Він міститиме наступний текст: «Guru«99 навчальних посібників» та «Цей навчальний посібник призначений для ASP.Net».
Давайте попрацюємо з нашим поточним веб-додатком, створеним у попередніх розділах. Виконайте наведені нижче кроки, щоб створити веб-елемент керування користувача.
Крок 1) Першим кроком є створення веб-користувацького елемента керування та додавання його до нашого рішення Visual Studio.
- Перейдіть до Solution Explorer у Visual Studio та клацніть правою кнопкою миші на DemoApplication Solution.
- Виберіть пункт меню Додати->Новий елемент.
Крок 2) На наступному кроці нам потрібно вибрати варіант створення веб-елементу керування користувача.
- У діалоговому вікні проекту ми можемо побачити різні варіанти створення різних типів компонентів. Натисніть опцію «Інтернет» ліворуч.
- Коли ми натискаємо опцію «Веб», ви бачите опцію «Елемент керування користувачами веб-форм». Натисніть цю опцію.
- Потім ми даємо назву веб-елементу керування, «Guru99Контроль”.
- Нарешті натисніть кнопку «Додати», щоб дозволити Visual Studio додати веб-користувачеве керування до нашого рішення.
Тоді ви побачите «Guru«99Control» додано до розчину.
Крок 3) Тепер час додати користувацький код до веб-елементу керування. Наш код буде базуватися на чистому синтаксисі HTML. Додайте наступний код до 'GuruФайл 99Control.ascx.
<table> <tr> <td>Guru99 Tutorials</td> </tr> <tr> <td> This Tutorial is for</td> </tr> </table>
Code Пояснення:
- У нашому файлі веб-елементу керування ми спочатку створюємо елемент таблиці. Він буде використовуватися для зберігання 2 рядків тексту, які відображатимуть «Guru«99 навчальних посібників» та «Цей навчальний посібник призначений для ASP.Net».
- Далі ми визначаємо перший рядок таблиці та записуємо текст у вигляді «Guru99 навчальних посібників.
- Потім ми визначаємо другий рядок таблиці та розміщуємо текст як «Цей посібник для ASP.Net».
ПРИМІТКА: Тепер ми не можемо виконати цей код і показати результат. Єдиний спосіб перевірити, чи це працює, – це включити його в нашу програму (aspx-файл). Ми побачимо це в наступній темі.
Реєстрація елементів керування користувача у веб-формі ASP.NET
У попередньому розділі ми розглянули, як можна створити власний веб-елемент керування. Його можна використовувати для відображення наступних двох рядків у веб-формі:
- "Guru99 навчальних посібників”
- «Цей посібник для ASP.Net».
Після створення користувацького «елементу керування» нам потрібно використовувати його в нашій веб-програмі. Першим кроком є реєстрація компонента в нашій програмі (Demo.aspx). Це є необхідною умовою для використання будь-якого користувацького веб-елементу керування в ASP.Net-програмі.
Давайте розглянемо, як ми можемо цього досягти. Наведені нижче кроки є продовженням попереднього розділу, в якому ми створили наш власний елемент керування. У цьому розділі ми використовуватимемо цей елемент керування в нашому Demo.aspx веб-форма. Спочатку ми зареєструємо наш користувацький «елемент керування» у файлі Demo.aspx.
Крок 1) Переконайтеся, що ви працюєте над файлом demo.aspx. Саме в цьому файлі буде зареєстровано веб-елемент керування користувача. Це можна зробити, двічі клацнувши файл demo.aspx у Solution Explorer вашого рішення .Net.
Після подвійного клацання на формі ви, ймовірно, побачите наведений нижче код. Це код за замовчуванням, який додається Visual Studio, коли веб-форма додається до проекту ASP.Net. Код за замовчуванням складається з кроків, необхідних для забезпечення роботи форми як веб-форми ASP.Net у браузері.
Крок 2) Тепер додамо наш код для реєстрації користувацького елемента керування. На скріншоті нижче показано реєстрацію користувацького елемента керування, доданого до наведеного вище базового коду.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %> <%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <TWebControl:WebControl ID="Header" runat="server" /> </form> </body> </html>
Code Пояснення:
- Перший крок – реєстрація веб-елементу керування користувача. Це включає наведені нижче основні параметри.
- Ключове слово «Реєстрація» використовується для реєстрації веб-користувача.
- Параметр Src використовується для визначення імені елемента керування, яке в нашому випадку таке Guru99Control.ascx.
- TagName та TagPrefix – це окремі імена, що надаються елементу керування. Це зроблено для того, щоб на них можна було посилатися на HTML-сторінках як на звичайний елемент керування HTML.
- Далі ми посилаємося на наш веб-елемент керування користувачем через TagPrefix:TagName, який було призначено раніше. TagPrefix:TagName – це індикатор того, що ми хочемо використовувати наш власний веб-елемент керування. Коли сторінка обробляється веб-сервером, ви можете бачити, що ми використали тег TWebControl:WebControl. Потім він обробить 'GuruВідповідно, «99Контроль».
- Елементу керування «Заголовок» надається необов’язковий ідентифікатор. Зазвичай гарною практикою є надання ідентифікатора елементу керування HTML.
- Нарешті, атрибут runat=”server” гарантує, що елемент керування працюватиме на веб-сервері. Для всіх елементів керування ASP.Net це атрибут за замовчуванням. Усі елементи керування ASP.Net (включно з користувацькими) повинні працювати на сервері. Їхній вивід потім надсилається із сервера на клієнт і відповідно відображається у браузері.
Коли наведений вище код встановлено, і проект виконується за допомогою Visual Studio, ви отримаєте наведений нижче результат.
Вихід:-
Вихідне повідомлення, яке відображається в браузері, показує, що керування веб-користувачем було успішно виконано.
Глобальна реєстрація елементів керування ASP.Net у файлі конфігурації web.config
Іноді може знадобитися використовувати елементи керування користувача на кількох сторінках у .Net-застосунку. На цьому етапі вам не потрібно постійно реєструвати елементи керування користувача на кожній сторінці ASP.Net.
- У .Net ви можете здійснити реєстрацію у файлі web.config.
- Файл web.config – це загальний файл конфігурації, який використовується всіма веб-сторінками в проекті .Net.
- Він містить необхідні деталі конфігурації для веб-проекту ASP.Net. Наприклад, однією з поширених конфігурацій у файлі web.config є параметр цільової рамки.
- Цей параметр використовується для ідентифікації версії .Net framework, яку використовує програма.
Нижче наведено знімок коду за замовчуванням у файлі web.config. Виділена частина — це частина цільової рамки.
Давайте розглянемо, як ми можемо зареєструвати нашу Guru99Control у файлі web.config.
Крок 1) Відкрийте файл web.config з Solution Explorer, двічі клацнувши його.
Коли ви відкриєте файл web.config, ви можете побачити наведену нижче конфігурацію. «web.config» автоматично додається Visual Studio під час створення проекту. Це базова конфігурація, необхідна для належної роботи проекту ASP.Net.
Крок 2) Тепер давайте зареєструємо наш компонент у файлі web.config. Для цього нам потрібно додати рядки нижче.
<configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <pages> <controls> <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" /> </controls> </pages> </system.web> </configuration>
Реєстрація включає наступні підетапи:
- Додайте тег під назвою . Це означає, що вся конфігурація для елементів керування буде застосовна до всіх сторінок ASP.Net у рішенні.
- The тег означає, що ви додаєте конфігурацію для елемента керування користувача.
- Потім ми реєструємо користувацький елемент керування з додатковим тегом. Решта параметрів tagPrefix, tagName та src залишаються такими ж, як і раніше.
Крок 3) Не забудьте перейти на сторінку 'demo.aspx' та видалити рядки для елемента керування, в якому була реєстрація Guru99 компонент. Якщо ви не виконаєте цей крок, то 'GuruФайл 99Control.ascx буде виконано з файлу 'demo.aspx' замість файлу 'web.config'.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <TWebControl:WebControl ID="Header" runat="server" /> </form> </body> </html>
Після встановлення наведеного вище коду та виконання проекту за допомогою Visual Studio ви отримаєте наведений нижче результат.
Вихід:-
Вихідне повідомлення показує, що керування веб-користувачем було успішно виконано.
Додавання загальнодоступних властивостей до веб-елемента керування
Властивість — це пара ключ-значення, пов’язана з будь-яким елементом керування. Розглянемо простий приклад Тег HTML. Знімок екрана того, як виглядає тег, показано нижче.
<html> <body> <div style="color:#0000FF"> Demo Form </div> </body> </html>
Тег div використовується для створення розділу в документі HTML. Тег div має властивість під назвою стиль. Це можна використовувати для надання іншого стилю тексту, який відображається в тезі div. Зазвичай ви бачите код для тегу div, як показано нижче.
<div style="color:#0000FF">
Отже, атрибут color — це не що інше, як пара ключ-значення, яка надає більше інформації про сам тег. У наведеному вище випадку ім’я ключа – «style», а значення ключа – «color:#0000FF».
Подібним чином для елементів керування користувача можна створити власні властивості, які описують елемент керування.
Візьмемо простий приклад і розглянемо його даліGuru«99Control», створений у попередніх розділах. У нашому прикладі ми додамо просту цілочисельну властивість під назвою MinValue. Це значення представлятиме мінімальну кількість символів у тексті, що відображається в користувацькому елементі керування.
Давайте виконаємо наведені нижче кроки, щоб отримати це місце.
Крок 1) Відкрийте GuruФайл 99Control.ascx. Додайте код для додавання властивості MinValue.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %> <script runat="server"> public int MinValue = 0; </script> <table> <tr> <td>Guru99 Tutorials</td> </tr> <tr> <td> This Tutorial is for</td> </tr> </table>
Code Пояснення:
Атрибут скрипта runat="server" використовується для позначення того, що ми додаємо певний код, специфічний для .Net, і що його потрібно запускати на веб-сервері. Це необхідно для обробки будь-якої властивості, доданої до користувацького елемента керування. Потім ми додаємо нашу властивість MinValue та надаємо їй значення за замовчуванням 0.
Крок 2) Тепер давайте посилаємося на цю властивість у нашому файлі demo.aspx. Все, що ми зараз робимо, це просто посилання на властивість MinValue і призначення нового значення 100.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <TWebControl:WebControl ID="Header" runat="server" MinValue="100" /> </form> </body> </html>
ПРИМІТКА: Коли ви запустите цей код, він не відобразить жодного виводу. Це тому, що вивід не перевищує ліміту в 100 символів.
