Підручник із веб-форм ASP.NET: приклади елементів керування користувача

В ASP.Net можна створювати багаторазовий код. Багаторазовий код можна використовувати в багатьох місцях без необхідності писати код знову.

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

Створіть елемент керування користувача в ASP.Net

ASP.Net має можливість створювати веб-елементи керування. Ці елементи керування містять код, який можна використовувати повторно. Його можна використовувати в різних програмах відповідно до вимог.

Давайте поглянемо на приклад того, як ми можемо створити веб-користувацький елемент керування в ASP.Net

У нашому прикладі,

Ми збираємося створити веб-контроль.
Він буде використовуватися для створення компонента заголовка.
Він міститиме наведений нижче текст. «Навчальні посібники Guru99» Цей навчальний посібник призначений для ASP.Net»

Давайте попрацюємо з нашим поточним веб-додатком, створеним у попередніх розділах. Виконайте наведені нижче кроки, щоб створити веб-елемент керування користувача.

Крок 1) Першим кроком є створення веб-користувацького елемента керування та додавання його до нашого рішення Visual Studio.

Перейдіть до провідника рішень у Visual Studio та клацніть правою кнопкою миші рішення DemoApplication
Виберіть пункт меню Додати->Новий елемент

Крок 2) На наступному кроці нам потрібно вибрати варіант створення веб-контролю користувача

У діалоговому вікні проекту ми можемо побачити різні варіанти створення різних типів компонентів. Натисніть опцію «Інтернет» ліворуч.
Коли ми натискаємо опцію «Веб», ви побачите опцію «Керування користувачами веб-форм». Виберіть цю опцію.
Потім ми даємо назву веб-контролю «Guru99Control».
Нарешті натисніть кнопку «Додати», щоб дозволити Visual Studio додати веб-користувачеве керування до нашого рішення.

Ви побачите «Guru99Control», доданий до рішення.

Крок 4) Тепер настав час додати спеціальний код до елемента керування веб-користувачем. Наш код базуватиметься на чистому синтаксисі HTML. Додайте наступний код до файлу "Guru99Control.ascx".

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>
	
	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

Пояснення коду: -

У нашому файлі Web Control ми спочатку створюємо елемент таблиці. Це використовуватиметься для розміщення 2 рядків тексту, які використовуватимуться для відображення

«Навчальні посібники Guru99» і
«Цей посібник для ASP.Net».

Далі ми визначаємо наш перший рядок таблиці та розміщуємо текст як «Guru99 Tutorials».
Потім ми визначаємо другий рядок таблиці та розміщуємо текст як «Цей посібник для ASP.Net».

ПРИМІТКА: Тепер ми не можемо виконати цей код і показати результат. Єдиний спосіб перевірити, чи це працює, — включити його в нашу програму (файл aspx). Ми побачимо це в наступній темі.

Реєстрація елементів керування користувача у веб-формах ASP.NET

У попередньому розділі ми бачили, як можна створити настроюваний веб-елемент керування. Це можна використовувати для відображення наступних двох рядків у веб-формі

«Навчальні посібники Guru99»
«Цей посібник для ASP.Net».

Після того, як настроюваний «елемент керування» буде створено, нам потрібно використовувати його в нашій веб-програмі. Першим кроком є реєстрація компонента в нашій програмі (Demo.aspx). Це обов’язкова умова для використання в будь-якому спеціальному веб-контролі в програмі ASP.Net.

Давайте подивимося, як ми можемо цього досягти. Наведені нижче дії є продовженням попереднього розділу. У попередньому розділі ми створили наш настроюваний елемент керування. У цьому розділі ми будемо використовувати елемент керування в нашому Demo.aspx веб-форма.

По-перше, ми зареєструємо наш власний «контроль» у файлі Demo.aspx.

Крок 1) Переконайтеся, що ви працюєте над файлом demo.aspx. Саме в цьому файлі буде зареєстровано веб-контроль користувача. Це можна зробити, двічі клацнувши файл demo.aspx у провіднику рішень вашого рішення .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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

Пояснення коду: -

Першим кроком є реєстрація веб-контролю користувача. Він складається з наведених нижче основних параметрів
1. Ключове слово «Реєстрація» використовується для реєстрації веб-користувача.
2. Параметр src використовується для визначення назви елемента керування, яким у нашому випадку є Guru99Control.ascx.
3. Тег і префікс тегу — це окремі імена, надані елементу керування. Це зроблено для того, щоб вони могли посилатися на HTML-сторінки як звичайний елемент керування HTML.
Далі ми посилаємося на наш елемент керування веб-користувачем через TagPrefix:TagName, який було призначено раніше. TagPrefix:TagName є індикатором того, що ми хочемо використовувати наш настроюваний веб-контроль. Коли сторінка обробляється веб-сервером, ви можете побачити, що ми використали тег TWebControl:WebControl. Потім він відповідно оброблятиме «Guru99Control». У нашому прикладі це TWebControl:WebControl.
1. Додатковий ідентифікатор надається елементу керування «Заголовок». Загалом корисно надавати ідентифікатор елементу керування HTML.
2. Нарешті, атрибут runat=server, щоб елемент керування запускався на веб-сервері. Для всіх елементів керування ASP.Net це атрибут за замовчуванням. Усі елементи керування ASP.Net (включно з настроюваними елементами керування) мають запускатися на сервері. Потім їх вихідні дані надсилаються із сервера клієнту та відповідно відображаються у браузері.

Коли наведений вище код встановлено, і проект виконується за допомогою Visual Studio. Ви отримаєте наведений нижче результат.

Вихід:-

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

Реєстрація asp.net контролює глобально у конфігураційному файлі веб-конфігурації asp

Іноді може знадобитися використовувати елементи керування користувачами на кількох сторінках програми .Net. На даний момент ви не хочете продовжувати реєструвати елементи керування користувачами на кожній сторінці ASP.Net.

У .Net ви можете здійснити реєстрацію у файлі web.config.
Файл web.config — це загальний файл конфігурації, який використовується всіма веб-сторінками в проекті .Net.
Він містить необхідні деталі конфігурації для веб-проекту ASP.Net. Наприклад, однією з поширених конфігурацій у файлі web.config є параметр цільової рамки.
Цей параметр використовується для ідентифікації версії .Net framework, яку використовує програма.

Нижче наведено знімок коду за замовчуванням у файлі web.config. Виділена частина — це частина цільової рамки.

Давайте подивимося, як ми можемо зареєструвати наш Guru99Control у файлі web.config.

Крок 1) Відкрийте файл web.config у провіднику рішень, двічі клацнувши файл.

Коли ви відкриєте файл 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. Якщо ви не виконаєте цей крок, то файл «Guru99Control.ascx» буде виконано з файлу «demo.aspx» замість файлу «web.config».

<%@ 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.ore/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».

Подібним чином для елементів керування користувача можна створити власні властивості, які описують елемент керування.

Давайте візьмемо простий приклад і побудуємо наш «Guru99Control», створений у попередніх розділах.

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

Давайте виконаємо наведені нижче кроки, щоб отримати це місце.

Крок 1) Відкрийте файл Guru99Control.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
	</tr>
</table>

Пояснення коду: -

Атрибут сценарію runat=server використовується, щоб вказати, що ми додаємо певний код .Net і що його потрібно запустити на веб-сервері.

Це потрібно для обробки будь-якої властивості, доданої до елемента керування користувача. Потім ми додаємо нашу властивість MinValue і надаємо їй стандартне значення 0.

Крок 2) Тепер давайте посилаємося на цю властивість у нашому файлі demo.aspx. Все, що ми зараз робимо, це просто посилання на властивість MinValue і призначення нового значення 100.

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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 символів.

Підсумки

ASP.Net має можливість створювати елементи керування користувачами. Елементи керування користувачами використовуються для коду, який використовується кілька разів у програмі. Після цього користувальницький елемент керування можна повторно використовувати в програмі.
Елемент керування користувача потрібно зареєструвати на сторінці ASP.Net, перш ніж його можна буде використовувати.
Щоб керувати всіма сторінками програми, зареєструйте її у файлі web.config.
Властивості також можна додати до елемента керування веб-користувачем.

Вам може сподобатися:

Створіть елемент керування користувача в ASP.Net

Реєстрація елементів керування користувача у веб-формах ASP.NET

Реєстрація asp.net контролює глобально у конфігураційному файлі веб-конфігурації asp

СТАТТІ ПО ТЕМІ

Додавання загальнодоступних властивостей до веб-елемента керування

Підсумки