Учебное пособие по веб-формам ASP.NET: примеры пользовательских элементов управления

В ASP.Net можно создавать повторно используемый код. Повторно используемый код можно использовать во многих местах без необходимости писать код заново.

Повторно используемый код помогает сократить время, затрачиваемое разработчиком после его написания. Его можно написать один раз и использовать многократно.

Создание пользовательского элемента управления в ASP.Net

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

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

В нашем примере:

• Мы собираемся создать веб-элемент управления.
• Он будет использоваться для создания компонента заголовка.
• В нём будет содержаться следующий текст: «Guru«99 уроков» и «Этот урок предназначен для ASP.Net».

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

Шаг 1) Первым шагом является создание пользовательского веб-элемента управления и добавление его в наше решение Visual Studio.

1. В Visual Studio откройте обозреватель решений и щелкните правой кнопкой мыши по решению DemoApplication.
2. Выберите пункт меню «Добавить» -> «Новый элемент».

Шаг 2) На следующем шаге нам нужно выбрать вариант создания веб-элемента управления для пользователя.

1. В диалоговом окне проекта мы можем увидеть различные варианты создания разных типов компонентов. Нажмите опцию «Интернет» слева.
2. При нажатии на опцию «Веб» вы увидите опцию «Управление пользователем веб-форм». Нажмите на эту опцию.
3. Затем мы даём имя элементу управления веб-интерфейсом: «Guru99Control”.
4. Наконец, нажмите кнопку «Добавить», чтобы позволить 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 Объяснение:-

1. В файле Web Control мы сначала создаём элемент таблицы. Он будет использоваться для размещения двух строк текста, которые будут отображать «Guru«99 уроков» и «Этот урок предназначен для ASP.Net».
2. Далее мы определяем первую строку таблицы и размещаем текст как «Guru99 уроков.
3. Затем мы определяем вторую строку таблицы и помещаем текст «Это руководство предназначено для 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.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 Объяснение:-

1. Первый шаг — регистрация веб-контроля пользователя. Она включает в себя следующие основные параметры:
   1. Ключевое слово «Регистрация» используется для регистрации пользовательского веб-элемента управления.
   2. Параметр Src используется для определения имени элемента управления, которое в нашем случае — это Guru99Control.ascx.
   3. TagName и TagPrefix — это индивидуальные имена, присвоенные элементу управления. Это делается для того, чтобы на них можно было ссылаться на HTML-страницах как на обычные HTML-элементы управления.
2. Далее мы ссылаемся на наш пользовательский веб-элемент управления через тег TagPrefix:TagName, который был присвоен ранее. TagPrefix:TagName указывает на то, что мы хотим использовать наш пользовательский веб-элемент управления. Когда страница обрабатывается веб-сервером, вы можете увидеть, что мы использовали тег TWebControl:WebControl. Затем он обработает 'GuruСоответственно, 99Control'.
   1. Элементу управления «Заголовок» присваивается необязательный идентификатор. Как правило, рекомендуется присваивать идентификатор элементам управления HTML.
   2. Наконец, атрибут 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, используемой приложением.

Ниже приведен снимок кода по умолчанию в файле 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>

Процесс регистрации включает в себя следующие этапы:

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

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

Атрибут `script 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 символов.

Часто задаваемые вопросы (FAQ)