Урок за уеб формуляри на ASP.NET: Примери за потребителски контроли

В ASP.Net е възможно да се създаде повторно използваем код. Кодът за многократна употреба може да се използва на много места, без да е необходимо да пишете кода отново.

Многократно използваемият код помага за намаляване на времето, прекарано от разработчика след написването му. Може да се направи веднъж и да се използва повторно на множество места.

Създайте потребителски контрол в ASP.Net

ASP.Net има възможността да създава уеб контроли. Тези контроли съдържат код, който може да се използва повторно. Може да се използва в приложение, според изискванията.

Нека да разгледаме пример за това как можем да създадем уеб потребителски контрол в ASP.Net.

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

• Ще създадем уеб контрола.
• Той ще се използва за създаване на компонент за заглавка.
• Той ще съдържа следния текст: „Guru99 урока“ и „Този ​​урок е за ASP.Net“.

Нека работим с настоящото ни уеб приложение, създадено в предишните раздели. Нека следваме стъпките по-долу, за да създадем уеб потребителска контрола.

Стъпка 1) Първата стъпка е да създадете уеб потребителска контрола и да я добавите към нашето Visual Studio Solution.

1. Отидете в Solution Explorer във Visual Studio и щракнете с десния бутон върху DemoApplication Solution.
2. Изберете елемента от менюто Добавяне->Нов елемент.

Стъпка 2) В следващата стъпка трябва да изберем опцията за създаване на потребителски контрол за уеб.

1. В диалоговия прозорец на проекта можем да видим различни опции за създаване на различни видове компоненти. Кликнете върху опцията „Уеб“ от лявата страна.
2. Когато щракнем върху опцията „Уеб“, виждате опция за „Потребителски контрол на уеб формуляри“. Щракнете върху тази опция.
3. След това даваме име на уеб контрола, „Guru99Контрол“.
4. Накрая щракнете върху бутона „Добавяне“, за да позволите на Visual Studio да добави контрола за уеб потребител към нашето решение.

След това ще видите „Guru99Control“, добавен към разтвора.

Стъпка 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 файл първо създаваме табличен елемент. Той ще се използва за съхраняване на 2 реда текст, които ще показват „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 в 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 Обяснение:

1. Първата стъпка е да регистрирате уеб потребителския контрол. Това включва следните основни параметри:
   1. Ключовата дума „Регистриране“ се използва за регистриране на уеб потребителския контрол.
   2. Параметърът Src се използва за дефиниране на името на контрола, което в нашия случай е Guru99Control.ascx.
   3. TagName и TagPrefix са индивидуални имена, дадени на контрола. Това се прави, за да може да се използва в HTML страници като нормален HTML контрол.
2. След това, ние се позоваваме на нашия уеб потребителски контрол чрез TagPrefix:TagName, който беше зададен по-рано. TagPrefix:TagName е индикатор, че искаме да използваме нашия персонализиран уеб контрол. Когато страницата бъде обработена от уеб сървъра, можете да видите, че сме използвали тага TWebControl:WebControl. След това той ще обработи 'Guru99Контрол“ съответно.
   1. На контролата „Header“ се дава незадължителен идентификатор. Обикновено е добра практика да се дава идентификатор на 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 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>

Регистрацията включва следните подстъпки:

1. Добавете етикет, наречен . Това означава, че цялата конфигурация за контролите ще бъде приложима за всички ASP.Net страници в решението.
2. The означава, че добавяте конфигурация за потребителския контрол.
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">

Така че цветният атрибут не е нищо друго освен двойка ключ-стойност, която дава повече информация за самия таг. В горния случай името на ключа е „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</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 знака.

Въпроси и Отговори