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

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

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

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

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

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

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

Ще създадем уеб контрола.
Той ще се използва за създаване на компонент за заглавка.
Той ще съдържа посочения по-долу текст.”Уроци на Guru99”Този урок е за ASP.Net”

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

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

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

Стъпка 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>

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

В нашия файл за уеб контрол ние първо създаваме елемент на таблица. Това ще се използва за съхранение на 2 реда текст, които ще се използват за показване

„Уроци на Guru99“ и
„Този урок е за ASP.Net.“

След това дефинираме първия ред на таблицата и поставяме текста като „Уроци на Guru99“.
След това дефинираме нашия втори ред от таблица и поставяме текста като „Този урок е за 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.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 от 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>

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

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

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

Oбобщение

ASP.Net има способността да създава потребителски контроли. Потребителските контроли се използват за код, който се използва многократно в приложение. След това потребителският контрол може да се използва повторно в приложението.
Потребителският контрол трябва да бъде регистриран на страницата ASP.Net, преди да може да се използва.
За да използвате потребителски контрол на всички страници в приложение, регистрирайте го във файла web.config.
Свойствата могат също да се добавят към уеб потребителска контрола.

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

Регистриране на потребителски контроли в уеб формуляри на ASP.NET

Регистрирането на asp.net контролира глобално в конфигурационния файл за уеб конфигурация asp

СВЪРЗАНИ СТАТИИ

Добавяне на публични свойства към уеб контрола

Oбобщение

Регистрирайте се за бюлетина