Учебное пособие по веб-формам 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>

Объяснение кода: -

В нашем файле веб-контроля мы сначала создаем элемент таблицы. Это будет использоваться для хранения двух строк текста, которые будут использоваться для отображения

«Уроки Guru99» и
«Это руководство предназначено для ASP.Net».

Затем мы определяем нашу первую строку таблицы и помещаем текст как «Guru99 Tutorials».
Затем мы определяем вторую строку таблицы и помещаем текст «Это руководство предназначено для ASP.Net».

ЗАМЕТКА: Теперь мы не можем выполнить этот код и показать результат. Единственный способ проверить, работает ли это, — включить его в наше приложение (файл aspx). Мы увидим это в следующей теме.

Регистрация пользовательских элементов управления в веб-формах ASP.NET

В предыдущем разделе мы увидели, как создать собственный веб-элемент управления. Это можно использовать для отображения следующих двух строк в веб-форме.

«Уроки Guru99»
«Это руководство предназначено для ASP.Net».

После создания пользовательского элемента управления нам нужно использовать его в нашем веб-приложении. Первым шагом является регистрация компонента в нашем приложении (Demo.aspx). Это необходимое условие для использования в любом пользовательском веб-элементе управления в приложении ASP.Net.

Давайте посмотрим, как мы можем этого добиться. Следующие шаги являются продолжением предыдущего раздела. В предыдущем разделе мы создали наш пользовательский элемент управления. В этом разделе мы будем использовать элемент управления в нашем Демо.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, используемой приложением.

Ниже приведен снимок кода по умолчанию в файле 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 в решении.
означает, что вы добавляете конфигурацию для пользовательского элемента управления.
Затем мы регистрируем пользовательский элемент управления с дополнительным тегом. Остальные параметры 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">

Таким образом, атрибут цвета — это не что иное, как пара ключ-значение, которая дает дополнительную информацию о самом теге. В приведенном выше случае имя ключа — «стиль», а значение ключа — «цвет:#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

СТАТЬИ ПО ТЕМЕ

Добавление общедоступных свойств в веб-элемент управления

Итого