Учебники

6) ASP.NET Web Forms

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

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

В этом уроке вы узнаете

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

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

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

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

  • Мы собираемся создать веб-контроль.
  • Он будет использоваться для создания компонента заголовка.
  • Он будет содержать нижеупомянутый текст.

    «Учебники Гуру99

    «Это руководство для ASP.Net»

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

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

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

  1. Перейдите в обозреватель решений в Visual Studio и щелкните правой кнопкой мыши решение DemoApplication.
  2. Выберите пункт меню Add-> New Item

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

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

  1. В диалоговом окне проекта мы видим различные варианты создания различных типов компонентов. Нажмите «Веб» на левой стороне.
  2. Когда мы щелкаем опцию «Интернет», вы видите опцию «Пользовательский контроль веб-форм». Нажмите эту опцию.
  3. Затем мы даем имя для веб-элемента управления «Guru99Control».
  4. Наконец, нажмите кнопку «Добавить», чтобы позволить Visual Studio добавить пользовательский веб-элемент управления в наше решение.

Вы увидите «Guru99Control», добавленный к решению.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

Шаг 4) Теперь пришло время добавить пользовательский код в пользовательский веб-элемент управления. Наш код будет основан на чистом синтаксисе HTML. Добавьте следующий код в файл ‘Guru99Control.ascx’

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

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

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

  1. В нашем файле Web Control мы сначала создаем элемент таблицы. Это будет использоваться для хранения 2 строк текста, которые будут использоваться для отображения
  • «Учебники Guru99» и
  • «Это руководство предназначено для ASP.Net».
  1. Затем мы определяем нашу первую строку таблицы и помещаем текст как «Учебники по Guru99».
  2. Затем мы определяем нашу вторую строку таблицы и помещаем текст как «Этот учебник для ASP.Net».

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

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

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

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

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

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

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

Сначала мы зарегистрируем наш пользовательский элемент управления в файле Demo.aspx.

Шаг 1) Убедитесь, что вы работаете с файлом demo.aspx. Именно в этом файле пользовательский веб-элемент управления будет зарегистрирован. Это можно сделать, дважды щелкнув файл demo.aspx в обозревателе решений вашего решения .Net.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

После того, как вы дважды щелкните форму, вы, вероятно, увидите приведенный ниже код в форме. Это код по умолчанию, добавляемый Visual Studio при добавлении веб-формы в проект ASP.Net.

Код по умолчанию состоит из шагов, которые необходимы для того, чтобы форма могла работать как веб-форма ASP.Net в браузере.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

Шаг 2) Теперь давайте добавим наш код, чтобы зарегистрировать пользовательский элемент управления. На приведенном ниже снимке экрана показана регистрация пользовательского элемента управления в приведенном выше основном коде.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

<%@ 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. Первым шагом является регистрация веб-пользователя. Это включает в себя следующие основные параметры
    1. Ключевое слово «Register» используется для регистрации веб-элемента управления.
    2. Параметр src используется для определения имени элемента управления, в нашем случае это Guru99Control.ascx.
    3. Tagname и Tagprefix — это индивидуальные имена, данные элементу управления. Это сделано для того, чтобы они могли ссылаться на HTML-страницы как на обычный HTML-элемент управления.
  2. Далее мы ссылаемся на наш пользовательский веб-элемент управления через 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. На этом этапе вы не хотите продолжать регистрировать пользовательские элементы управления на каждой странице ASP.Net.

  • В .Net вы можете выполнить регистрацию в файле «web.config».
  • Файл web.config является общим файлом конфигурации, который используется всеми веб-страницами в проекте .Net.
  • Он содержит необходимые сведения о конфигурации для веб-проекта ASP.Net. Например, одна общая конфигурация в файле web.config — это параметр целевого фреймворка .
  • Этот параметр используется для определения версии платформы .Net, используемой приложением.

Ниже приведен снимок кода по умолчанию в файле web.config. Выделенная часть является целевой частью каркаса.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

Давайте посмотрим, как мы можем зарегистрировать наш Guru99Control в файле web.config.

Шаг 1) Откройте файл web.config из обозревателя решений, дважды щелкнув файл.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

Когда вы открываете файл web.config, вы можете увидеть следующую конфигурацию. ‘Web.config’ автоматически добавляется Visual Studio при создании проекта. Это базовая конфигурация, необходимая для правильной работы проекта ASP.Net.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

Шаг 2) Теперь давайте зарегистрируем наш компонент в файле web.config. Нам нужно добавить следующие строки для этого.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

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

Шаг 3) Не забудьте зайти на страницу «demo.aspx» и удалить строки для элемента управления, для которого была зарегистрирована компонента Guru99. Если вы не выполните этот шаг, то файл ‘Guru99Control.ascx’ будет выполняться из файла ‘demo.aspx’ вместо файла ‘web.config’.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

<%@ 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. Вы получите следующий вывод.

Вывод:-

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

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

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

Свойство — это пара ключ-значение, связанная с любым элементом управления. Давайте рассмотрим пример простого тега <div> HTML. Скриншот того, как выглядит тег, показан ниже.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

<html>
<body>
	<div style="color:#0000FF">
		  
		Demo Form
			
	</div>	
		
<body>
</html>	

Тег ‘div’ используется для создания раздела в HTML-документе. Тег ‘div’ имеет свойство, называемое свойством стиля. Это может быть использовано для придания другому стилю текста, отображаемого в теге div. Обычно вы видите код для тега div, как показано ниже.

<div style = «color: # 0000FF»>

Таким образом, атрибут color — это не что иное, как пара ключ-значение, которая дает больше информации о самом теге. В приведенном выше случае имя ключа — это «стиль», а значение ключа — «цвет: # 0000FF».

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

Давайте возьмем простой пример и опираемся на наш «Guru99Control», созданный в предыдущих разделах.

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

Давайте выполним перечисленные ниже шаги, чтобы получить это на месте.

Шаг 1) Откройте файл Guru99Control.ascx. Добавьте код для добавления свойства MinValue.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

<%@ 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.

Создание элементов управления Asp.net, веб-форм и файла веб-конфигурации

!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.
  • Свойства также могут быть добавлены в веб-элемент управления.