Tutorial ASP.NET Web Forms: Exemple de controale utilizator

În ASP.Net, este posibil să creați cod reutilizabil. Codul reutilizabil poate fi folosit în multe locuri fără a fi nevoie să scrieți din nou codul.

Codul reutilizabil ajută la reducerea timpului petrecut de dezvoltator după scrierea codului. Poate fi realizat o singură dată și reutilizat în mai multe locuri.

Creați controlul utilizatorului în ASP.Net

ASP.Net are capacitatea de a crea controale web. Aceste controale conțin cod care poate fi reutilizat. Poate fi utilizat în întreaga aplicație, în funcție de cerințe.

Să aruncăm o privire la un exemplu despre cum putem crea un control utilizator web în ASP.Net.

În exemplul nostru:

• Vom crea un control web.
• Acesta va fi folosit pentru a crea o componentă antet.
• Va conține textul menționat mai jos: „Guru„99 de tutoriale” și „Acest tutorial este pentru ASP.Net”.

Să lucrăm cu aplicația noastră web actuală creată în secțiunile anterioare. Să urmăm pașii de mai jos pentru a crea un control de utilizator Web.

Pas 1) Primul pas este să creați un control de utilizator web și să îl adăugați la soluția noastră Visual Studio.

1. Accesați Exploratorul de soluții din Visual Studio și faceți clic dreapta pe soluția DemoApplication.
2. Selectați elementul de meniu Adăugare->Element nou.

Pas 2) În pasul următor, trebuie să alegem opțiunea de a crea un control pentru utilizatorii web.

1. În caseta de dialog al proiectului, putem vedea diverse opțiuni pentru crearea diferitelor tipuri de componente. Faceți clic pe opțiunea „Web” din partea stângă.
2. Când facem clic pe opțiunea „Web”, vedeți o opțiune pentru „Controlul utilizatorilor formularelor Web”. Faceți clic pe această opțiune.
3. Apoi dăm un nume pentru Controlul Web, „Guru„99Control”.
4. În cele din urmă, faceți clic pe butonul „Adăugați” pentru a permite Visual Studio să adauge controlul utilizatorului web la soluția noastră.

Veți vedea apoi „Guru„99Control” adăugat la soluție.

Pas 3) Acum este momentul să adăugăm codul personalizat la controlul utilizatorului web. Codul nostru se va baza pe sintaxa HTML pură. Adăugați următorul cod la 'GuruFișierul 99Control.ascx'.

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

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

Code Explicaţie:-

1. În fișierul nostru Web Control, creăm mai întâi un element de tabel. Acesta va fi folosit pentru a conține 2 rânduri de text care vor afișa „Guru„99 de tutoriale” și „Acest tutorial este pentru ASP.Net”.
2. Apoi, definim primul rând din tabel și punem textul ca „Guru99 de tutoriale.
3. Apoi definim al doilea rând de tabel și punem textul ca „Acest tutorial este pentru ASP.Net”.

NOTĂ: Acum nu putem executa acest cod și afișa rezultatul. Singura modalitate de a vedea dacă funcționează este să îl includem în aplicația noastră (fișier aspx). Vom vedea acest lucru în subiectul următor.

Înregistrarea controalelor utilizator într-un formular web ASP.NET

În secțiunea anterioară, am văzut cum putem crea un control web personalizat. Acesta poate fi folosit pentru a afișa următoarele două linii într-un formular web:

• Guru„99 de tutoriale”
• „Acest tutorial este pentru ASP.Net.”

Odată ce „controlul” personalizat este creat, trebuie să îl folosim în aplicația noastră web. Primul pas este să înregistrăm componenta în aplicația noastră (Demo.aspx). Aceasta este condiția prealabilă pentru a utiliza orice control web personalizat într-o aplicație ASP.Net.

Să vedem cum putem realiza acest lucru. Pașii de mai jos sunt o continuare a secțiunii anterioare, în care am creat controlul nostru personalizat. În această secțiune, vom folosi controlul în Demo.aspx formular web. Mai întâi, vom înregistra „controlul” nostru personalizat în fișierul Demo.aspx.

Pas 1) Asigurați-vă că lucrați la fișierul demo.aspx. În acest fișier va fi înregistrat controlul utilizatorului web. Acest lucru se poate face făcând dublu clic pe fișierul demo.aspx în Solution Explorer al soluției dvs. .Net.

După ce faceți dublu clic pe formular, probabil veți vedea codul de mai jos în formular. Acesta este codul implicit adăugat de Visual Studio atunci când un formular web este adăugat la un proiect ASP.Net. Codul implicit constă în pașii necesari pentru a asigura că formularul poate rula ca formular web ASP.Net în browser.

Pas 2) Acum haideți să adăugăm codul nostru pentru a înregistra controlul utilizatorului. Captura de ecran de mai jos arată înregistrarea controlului utilizatorului adăugată la codul de bază de mai sus.

<%@ 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 Explicaţie:-

1. Primul pas este înregistrarea controlului utilizatorului web. Aceasta cuprinde următorii parametri de bază:
   1. Cuvântul cheie „Înregistrare” este folosit pentru a înregistra controlul utilizatorului web.
   2. Parametrul Src este utilizat pentru a defini numele controlului, care în cazul nostru este Guru99Control.ascx.
   3. TagName și TagPrefix sunt nume individuale atribuite controlului. Acest lucru se face pentru ca acestea să poată fi referențiate în paginile HTML ca un control HTML normal.
2. Apoi, facem referire la controlul nostru de utilizator web prin intermediul TagPrefix:TagName, care a fost atribuit anterior. TagPrefix:TagName este un indicator că dorim să utilizăm controlul nostru web personalizat. Când pagina este procesată de serverul web, puteți vedea că am utilizat eticheta TWebControl:WebControl. Aceasta va procesa apoi „Guru„99Control” în consecință.
   1. Controlului „Antet” i se atribuie un ID opțional. În general, este o practică bună să se atribuie un ID unui control HTML.
   2. În cele din urmă, atributul runat=”server” asigură că controlul va rula pe serverul web. Pentru toate controalele ASP.Net, acesta este atributul implicit. Toate controalele ASP.Net (inclusiv controalele personalizate) trebuie să ruleze pe server. Rezultatul lor este apoi trimis de la server la client și afișat în browser în mod corespunzător.

Când codul de mai sus este setat și proiectul este executat folosind Visual Studio, veți obține rezultatul de mai jos.

Ieșire: -

Mesajul de ieșire afișat în browser arată că controlul utilizatorului web a fost executat cu succes.

Înregistrarea globală a controalelor ASP.Net în fișierul de configurare web.config

Uneori, cineva ar putea dori să utilizeze controale utilizator pe mai multe pagini într-o aplicație .Net. În acest moment, nu este necesar să înregistrați controale utilizator pe fiecare pagină ASP.Net.

• În .Net puteți efectua înregistrarea în fișierul 'web.config'.
• Fișierul web.config este un fișier de configurare comun utilizat de toate paginile web dintr-un proiect .Net.
• Conține detaliile de configurare necesare pentru proiectul web ASP.Net. De exemplu, o configurație comună în fișierul web.config este parametrul cadru țintă.
• Acest parametru este utilizat pentru a identifica versiunea .Net framework utilizată de aplicație.

Mai jos este un instantaneu al codului implicit din fișierul web.config. Partea evidențiată este partea cadru țintă.

Să vedem cum ne putem înregistra Guru99Control în fișierul web.config.

Pas 1) Deschideți fișierul web.config din Solution Explorer făcând dublu clic pe fișier.

Când deschideți fișierul web.config, este posibil să vedeți configurația de mai jos. „web.config” este adăugat automat de Visual Studio atunci când proiectul este creat. Aceasta este configurația de bază necesară pentru ca proiectul ASP.Net să funcționeze corect.

Pas 2) Acum să înregistrăm componenta noastră în fișierul web.config. Trebuie să adăugăm rândurile de mai jos pentru asta.

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

Înregistrarea cuprinde următoarele sub-etape:

1. Adăugați o etichetă numită . Înseamnă că toată configurația pentru controale va fi aplicabilă tuturor paginilor ASP.Net din soluție.
2. The eticheta înseamnă că adăugați o configurație pentru controlul utilizatorului.
3. Apoi înregistrăm controlul utilizatorului cu eticheta suplimentară. Parametrii rămași tagPrefix, tagName și src rămân aceiași ca înainte.

Pas 3) Nu uitați să accesați pagina „demo.aspx” și să eliminați liniile pentru controlul care conținea înregistrarea GuruComponenta 99. Dacă nu efectuați acest pas, atunci 'GuruFișierul „99Control.ascx” va fi executat din fișierul „demo.aspx” în loc de fișierul „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>

După ce codul de mai sus este setat și proiectul este executat folosind Visual Studio, veți obține rezultatul de mai jos.

Ieșire: -

Mesajul de ieșire arată că controlul utilizatorului web a fost executat cu succes.

Adăugarea de proprietăți publice la un control web

O proprietate este o pereche cheie-valoare asociată cu orice control. Să luăm un exemplu simplu Etichetă HTML. O captură de ecran cu aspectul etichetei este prezentată mai jos.

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

		Demo Form

	</div>
</body>
</html>

Eticheta „div” este folosită pentru a crea o secțiune într-un document HTML. Eticheta „div” are o proprietate numită proprietate de stil. Aceasta poate fi folosită pentru a da un stil diferit textului afișat în eticheta div. În mod normal, veți vedea codul pentru eticheta div, așa cum se arată mai jos.

<div style="color:#0000FF">

Deci, atributul de culoare nu este altceva decât o pereche cheie-valoare care oferă mai multe informații despre eticheta în sine. În cazul de mai sus, numele cheii este „stil”, iar valoarea cheii este „culoare:#0000FF”.

În mod similar, pentru controalele utilizatorului, puteți crea propriile proprietăți care descriu controlul.

Să luăm un exemplu simplu și să construim pe baza acestui exemplu.Guru„99Control” creat în secțiunile anterioare. În exemplul nostru, vom adăuga o proprietate întreagă simplă numită MinValue. Această valoare ar reprezenta numărul minim de caractere din textul afișat în controlul utilizator.

Să efectuăm pașii menționați mai jos pentru a pune acest lucru în aplicare.

Pas 1) Deschideți GuruFișierul 99Control.ascx. Adăugați codul pentru adăugarea proprietății 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 Explicaţie:-

Atributul scriptului runat=”server” este folosit pentru a indica faptul că adăugăm cod specific .Net și că acesta trebuie rulat pe serverul web. Acest lucru este necesar pentru procesarea oricărei proprietăți adăugate la controlul utilizatorului. Apoi adăugăm proprietatea noastră MinValue și îi atribuim valoarea implicită 0.

Pas 2) Acum să facem referire la această proprietate în fișierul nostru demo.aspx. Tot ce facem acum este doar să facem referință la proprietatea MinValue și să atribuim o nouă valoare de 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>

NOTĂ: Când rulați acest cod, nu va afișa nicio ieșire. Acest lucru se datorează faptului că ieșirea se încadrează sub limita de 100 de caractere.

Întrebări frecvente