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. Se poate face o singură dată și se poate reutiliza în mai multe locuri.
Creați controlul utilizatorului în ASP.Net
ASP.Net are capacitatea de a crea controale Web. Aceste comenzi conțin cod care poate fi reutilizat. Poate fi utilizat în întreaga aplicație conform cerințelor.
Să aruncăm o privire la un exemplu despre cum putem crea un control de utilizator web în ASP.Net
În exemplul nostru,
- Vom crea un control web.
- Acesta va fi folosit pentru a crea o componentă antet.
- Acesta va conține textul menționat mai jos.” Tutoriale Guru99 „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.
- Accesați Solution Explorer în Visual Studio și faceți clic dreapta pe DemoApplication Solution
- Alegeți elementul de meniu Add->New Item
Pas 2) În pasul următor, trebuie să alegem opțiunea de a crea un control de utilizator web
- Î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ă.
- Când facem clic pe opțiunea „Web”, vedeți o opțiune pentru „Controlul utilizatorului formularelor web”. Faceți clic pe această opțiune.
- Apoi dăm un nume pentru controlul web „Guru99Control”.
- Î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 „Guru99Control” adăugat la soluție.
Pas 4) Acum este timpul să adăugați codul personalizat la controlul utilizatorului Web. Codul nostru se va baza pe sintaxa HTML pură. Adăugați următorul cod în fișierul „Guru99Control.ascx”.
<table> <tr> <td>Guru99 Tutorials</td> </tr> <tr> <td> This Tutorial is for</td> </tr> </table>
Explicația codului: -
- În fișierul nostru de control web, mai întâi creăm un element de tabel. Acesta va fi folosit pentru a menține 2 rânduri de text care vor fi folosite pentru afișare
- „Tutoriale Guru99” și
- „Acest tutorial este pentru ASP.Net.”
- În continuare, definim primul nostru rând de tabel și punem textul ca „Tutoriale Guru99”.
- 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 arăta rezultatul. Singura modalitate de a vedea dacă funcționează este să îl includeți în aplicația noastră (fișier aspx). Vom vedea acest lucru în subiectul următor.
Înregistrarea comenzilor utilizatorului pe 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ă rânduri într-un formular web
- „Tutoriale Guru99”
- „Acest tutorial este pentru ASP.Net.”
Odată creat „controlul” personalizat, 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 utilizare în 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 secțiunea anterioară, am creat controlul nostru personalizat. În această secțiune, vom folosi controlul din nostru Demo.aspx formular web.
În primul rând, vom înregistra „controlul” 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 din Exploratorul de soluții al soluției dvs. .Net.
După ce faceți dublu clic pe formular, probabil că 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ă din pași, care sunt necesari pentru a se asigura că formularul poate rula ca formular web ASP.Net în browser.
Pas 2) Acum să adăugăm codul nostru pentru a înregistra controlul utilizatorului. Captura de ecran de mai jos arată înregistrarea controlului utilizatorului 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.ore/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="forml" runat="server”> <TWebControl:WebControl ID="Header" runat="server" /> </form> </body> </html>
Explicația codului: -
- Primul pas este să înregistrați controlul utilizatorului web. Acesta cuprinde parametrii de bază de mai jos
- Cuvântul cheie „Înregistrare” este folosit pentru a înregistra controlul utilizatorului web.
- Parametrul src este folosit pentru a defini numele controlului, care în cazul nostru este Guru99Control.ascx.
- Tagname-ul și Tagprefix sunt nume individuale date controlului. Acest lucru se face astfel încât să poată face referințe în pagini HTML ca un control HTML normal.
- În continuare, ne referim la controlul utilizatorului web prin intermediul TagPrefix:TagName care a fost atribuit mai devreme. TagPrefix:TagName este un indicator că dorim să folosim controlul web personalizat. Când pagina este procesată de serverul web, puteți vedea că am folosit eticheta TWebControl:WebControl. Apoi va procesa „Guru99Control” în consecință. În exemplul nostru, este TWebControl:WebControl.
- Un ID opțional este dat controlului „Header”. În general, este o practică bună să dai un ID unui control HTML.
- În cele din urmă, atributul runat=server, astfel încât controlul să ruleze pe serverul web. Pentru toate controalele ASP.Net, acesta este atributul implicit. Toate controalele ASP.Net (inclusiv controalele personalizate) trebuie să fie rulate pe server. Ieșirea lor este apoi trimisă de la server la client și afișată în browser în consecință.
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 controalelor asp.net la nivel global în fișierul de configurare web asp
Uneori s-ar putea dori să folosești controalele utilizatorului în mai multe pagini într-o aplicație .Net. În acest moment, nu doriți să continuați să înregistrați controalele utilizatorului 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 din proiectul .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 exploratorul de soluții 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 subpașii de mai jos
- Adăugați o etichetă numită . Înseamnă că toată configurația pentru controale va fi aplicabilă tuturor paginilor ASP.Net din soluție.
- The eticheta înseamnă că adăugați o configurație pentru controlul utilizatorului.
- Apoi înregistrăm controlul utilizatorului cu eticheta suplimentară. Restul parametrilor tagPrefix, tagName și src rămân la fel ca înainte.
Pas 3) Nu uitați să accesați pagina „demo.aspx” și să eliminați liniile pentru control, care aveau înregistrarea componentei Guru99. Dacă nu efectuați acest pas, atunci fișierul „Guru99Control.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" %> <%@ 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>
Codul de mai sus este setat, iar 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 de simplu Etichetă HTML. O captură de ecran a modului în care arată eticheta este afișată 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ă ne bazăm pe „Guru99Control” 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 utilizatorului.
Să efectuăm pașii menționați mai jos pentru a pune acest lucru în aplicare.
Pas 1) Deschideți fișierul Guru99Control.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 </tr> </table>
Explicația codului: -
Atributul script runat=server este folosit pentru a indica faptul că adăugăm un cod specific.Net și că 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 dăm o valoare implicită de 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.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>
NOTĂ: – Când rulați acest cod, nu va afișa nicio ieșire. Acest lucru se datorează faptului că rezultatul scade sub limita de 100 de caractere.
Rezumat
- ASP.Net are capacitatea de a crea controale pentru utilizator. Controalele utilizatorului sunt folosite pentru a avea cod care este utilizat de mai multe ori într-o aplicație. Controlul utilizatorului poate fi apoi reutilizat în cadrul aplicației.
- Controlul utilizatorului trebuie să fie înregistrat pe pagina ASP.Net înainte de a putea fi utilizat.
- Pentru a utiliza controlul utilizatorului în toate paginile dintr-o aplicație, înregistrați-o în fișierul web.config.
- Proprietățile pot fi, de asemenea, adăugate unui control de utilizator web.