Vodič za ASP.NET web obrasce: Primjeri korisničkih kontrola
U ASP.Net-u je moguće stvoriti kod koji se može ponovno koristiti. Kôd koji se može ponovno koristiti može se koristiti na mnogim mjestima bez potrebe ponovnog pisanja koda.
Kôd koji se može ponovno koristiti pomaže u smanjenju vremena koje razvojni programer potroši nakon pisanja koda. Može se učiniti jednom i ponovno upotrijebiti na više mjesta.
Stvorite korisničku kontrolu u ASP.Netu
ASP.Net ima mogućnost stvaranja web kontrola. Ove kontrole sadrže kod koji se može ponovno koristiti. Može se koristiti u svim aplikacijama prema zahtjevu.
Pogledajmo primjer kako možemo stvoriti web korisničku kontrolu u ASP.Netu
U našem primjeru,
- Napravit ćemo web kontrolu.
- Koristit će se za stvaranje komponente zaglavlja.
- Sadržavat će dolje navedeni tekst.”Guru99 Tutorials”Ovaj Tutorial je za ASP.Net”
Radimo s našom trenutnom web aplikacijom stvorenom u prethodnim odjeljcima. Slijedimo korake u nastavku za stvaranje web korisničke kontrole.
Korak 1) Prvi korak je stvoriti web korisničku kontrolu i dodati je u naše rješenje Visual Studio.
- Idite na Solution Explorer u Visual Studiju i desnom tipkom miša kliknite DemoApplication Solution
- Odaberite stavku izbornika Dodaj->Nova stavka
Korak 2) U sljedećem koraku trebamo odabrati opciju kreiranja web korisničke kontrole
- U dijaloškom okviru projekta možemo vidjeti različite opcije za izradu različitih vrsta komponenti. Kliknite opciju "Web" na lijevoj strani.
- Kada kliknemo opciju "Web", vidjet ćete opciju za "Korisničku kontrolu web obrazaca". Pritisnite ovu opciju.
- Zatim dajemo naziv za web kontrolu "Guru99Control".
- Na kraju, kliknite gumb "Dodaj" kako biste dopustili Visual Studio-u da našem rješenju doda web korisničku kontrolu.
Vidjet ćete "Guru99Control" dodan rješenju.
Korak 4) Sada je vrijeme za dodavanje prilagođenog koda web korisničkoj kontroli. Naš kôd će se temeljiti na čistoj HTML sintaksi. Dodajte sljedeći kod u datoteku 'Guru99Control.ascx'
<table> <tr> <td>Guru99 Tutorials</td> </tr> <tr> <td> This Tutorial is for</td> </tr> </table>
Objašnjenje koda:-
- U našoj datoteci web kontrole prvo stvaramo element tablice. Ovo će se koristiti za držanje 2 retka teksta koji će se koristiti za prikaz
- “Guru99 Tutorials” i
- "Ovaj vodič je za ASP.Net."
- Zatim definiramo naš prvi red tablice i stavljamo tekst kao "Guru99 Tutorials."
- Zatim definiramo naš drugi red tablice i stavimo tekst kao "Ovaj vodič je za ASP.Net."
BILJEŠKA: Sada ne možemo izvršiti ovaj kod i prikazati izlaz. Jedini način da provjerimo radi li ovo jest da ga uključimo u našu aplikaciju (aspx datoteka). To ćemo vidjeti u sljedećoj temi.
Registriranje korisničkih kontrola na ASP.NET web obrascima
U prethodnom odjeljku vidjeli smo kako možemo stvoriti prilagođenu web kontrolu. Ovo se može koristiti za prikaz sljedeća dva retka u web obrascu
- “Guru99 Vodiči”
- "Ovaj vodič je za ASP.Net."
Nakon što se stvori prilagođena 'kontrola', trebamo je koristiti u našoj web aplikaciji. Prvi korak je registracija komponente u našoj aplikaciji (Demo.aspx). Ovo je preduvjet za korištenje u bilo kojoj prilagođenoj web kontroli u ASP.Net aplikaciji.
Pogledajmo kako to možemo postići. Koraci u nastavku nastavak su prethodnog odjeljka. U prethodnom odjeljku stvorili smo našu prilagođenu kontrolu. U ovom odjeljku koristit ćemo kontrolu u našem Demo.aspx web obrazac.
Prvo ćemo registrirati našu prilagođenu 'kontrolu' u datoteku Demo.aspx.
Korak 1) Provjerite radite li na datoteci demo.aspx. U ovoj će datoteci biti registrirana web korisnička kontrola. To možete učiniti dvostrukim klikom na datoteku demo.aspx u pregledniku rješenja vašeg .Net rješenja.
Nakon što dvaput kliknete obrazac, vjerojatno ćete vidjeti donji kod u obrascu. Ovo je zadani kod koji dodaje Visual Studio kada se web obrazac dodaje ASP.Net projektu.
Zadani kod sastoji se od koraka koji su potrebni kako bi se osiguralo da se obrazac može pokrenuti kao ASP.Net web obrazac u pregledniku.
Korak 2) Dodajmo sada naš kod za registraciju korisničke kontrole. Snimka zaslona u nastavku prikazuje registraciju korisničke kontrole na gornji osnovni kod.
<%@ 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>
Objašnjenje koda:-
- Prvi korak je registracija web korisničke kontrole. Ovo se sastoji od dolje navedenih osnovnih parametara
- Ključna riječ 'Registracija' koristi se za registraciju web korisničke kontrole.
- Parametar src koristi se za definiranje naziva kontrole, što je u našem slučaju Guru99Control.ascx.
- Naziv oznake i prefiks oznake su pojedinačni nazivi koji se daju kontroli. To je učinjeno kako bi mogli referencirati na HTML stranicama kao normalnu HTML kontrolu.
- Zatim referenciramo našu web korisničku kontrolu putem TagPrefix:TagName koji je ranije dodijeljen. TagPrefix:TagName je pokazatelj da želimo koristiti našu prilagođenu web kontrolu. Kada stranicu obradi web poslužitelj, možete vidjeti da smo upotrijebili oznaku TWebControl:WebControl. Zatim će u skladu s tim obraditi 'Guru99Control'. U našem primjeru to je TWebControl:WebControl.
- Izborni ID dodijeljen je kontroli "Zaglavlja". Općenito je dobra praksa dati ID HTML kontroli.
- Na kraju, atribut runat=server tako da se kontrola izvodi na web poslužitelju. Za sve ASP.Net kontrole ovo je zadani atribut. Sve ASP.Net kontrole (uključujući prilagođene kontrole) moraju se izvoditi na poslužitelju. Njihov se izlaz zatim šalje s poslužitelja klijentu i u skladu s tim prikazuje u pregledniku.
Kada je gornji kod postavljen, a projekt se izvodi pomoću Visual Studio. Dobit ćete donji izlaz.
Izlaz:-
Izlazna poruka prikazana u pregledniku pokazuje da je web korisnička kontrola uspješno izvršena.
Registriranje asp.net kontrolira globalno u konfiguracijskoj datoteci web konfiguracije asp
Ponekad se može htjeti koristiti korisničke kontrole na više stranica u .Net aplikaciji. U ovom trenutku ne želite nastaviti registrirati korisničke kontrole na svakoj pojedinoj ASP.Net stranici.
- U .Netu možete izvršiti registraciju u 'web.config' datoteci.
- Datoteka web.config uobičajena je konfiguracijska datoteka koju koriste sve web stranice u .Net projektu.
- Sadrži potrebne detalje konfiguracije za ASP.Net web projekt. Na primjer, jedna uobičajena konfiguracija u datoteci web.config je ciljni okvirni parametar.
- Ovaj se parametar koristi za identifikaciju verzije okvira .Net koju koristi aplikacija.
Ispod je snimka zadanog koda u datoteci web.config. Istaknuti dio je ciljni dio okvira.
Pogledajmo kako možemo registrirati naš Guru99Control u datoteci web.config.
Korak 1) Otvorite datoteku web.config iz Solution Explorera dvostrukim klikom na datoteku.
Kada otvorite datoteku web.config, mogli biste vidjeti donju konfiguraciju. Visual Studio automatski dodaje 'web.config' kada se projekt kreira. Ovo je osnovna konfiguracija potrebna da bi ASP.Net projekt ispravno radio.
Korak 2) Sada registrirajmo našu komponentu u datoteci web.config. Za to moramo dodati donje retke.
<configuration> <system.web> <compilation debug="true" targetFramework="4.5" /> <pages> <controls> <add tagPrefix="TWebControl" src ="~/Guru99Control.ascx" tagName="WebControl"/> </controls> </pages> </system.web> </configuration>
Registracija se sastoji od dolje navedenih podkoraka
- Dodajte oznaku pod nazivom . To znači da će sva konfiguracija za kontrole biti primjenjiva na sve ASP.Net stranice u rješenju.
- The oznaka znači da dodajete konfiguraciju za korisničku kontrolu.
- Zatim registriramo korisničku kontrolu s dodatnom oznakom. Preostali parametri tagPrefix, tagName i src ostaju isti kao i prije.
Korak 3) Ne zaboravite otići na stranicu 'demo.aspx' i ukloniti retke za kontrolu, koji su imali registraciju Guru99 komponente. Ako ne izvršite ovaj korak, tada će se datoteka 'Guru99Control.ascx' pokrenuti iz datoteke 'demo.aspx' umjesto datoteke '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>
Gornji kod je postavljen, a projekt se izvodi pomoću Visual Studija. Dobit ćete donji izlaz.
Izlaz:-
Izlazna poruka pokazuje da je web korisnička kontrola uspješno izvršena.
Dodavanje javnih svojstava web kontroli
Svojstvo je par ključ-vrijednost povezan s bilo kojom kontrolom. Uzmimo primjer jednostavnog HTML oznaka. Dolje je prikazan snimak zaslona kako oznaka izgleda.
<html> <body> <div style="color:#0000FF"> Demo Form </div> <body> </html>
Oznaka 'div' koristi se za stvaranje odjeljka u HTML dokumentu. Oznaka 'div' ima svojstvo koje se zove svojstvo stila. Ovo se može koristiti za davanje drugačijeg stila tekstu prikazanom u oznaci div. Obično biste vidjeli kod za oznaku div kao što je prikazano u nastavku.
<div style="color:#0000FF">
Dakle, atribut boje nije ništa drugo nego par ključ-vrijednost koji daje više informacija o samoj oznaci. U gornjem slučaju, naziv ključa je 'style', a vrijednost ključa je 'color:#0000FF'.
Slično tome, za korisničke kontrole možete kreirati vlastita svojstva koja opisuju kontrolu.
Uzmimo jednostavan primjer i nadogradimo naš 'Guru99Control' stvoren u ranijim odjeljcima.
U našem primjeru ćemo dodati jednostavno svojstvo cijelog broja pod nazivom MinValue. Ova bi vrijednost predstavljala minimalni broj znakova u tekstu prikazanom u korisničkoj kontroli.
Provedimo dolje navedene korake da ovo postavimo na mjesto.
Korak 1) Otvorite datoteku Guru99Control.ascx. Dodajte kod za dodavanje svojstva 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>
Objašnjenje koda:-
Atribut runat=server skripte koristi se za označavanje da dodajemo neki specifični kod za .Net i da ga treba pokrenuti na web poslužitelju.
Ovo je potrebno za obradu bilo kojeg svojstva dodanog korisničkoj kontroli. Zatim dodajemo svojstvo MinValue i dajemo mu zadanu vrijednost 0.
Korak 2) Sada ćemo referencirati ovo svojstvo u našoj datoteci demo.aspx. Sve što sada radimo je samo pozivanje na svojstvo MinValue i dodjeljivanje nove vrijednosti 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>
BILJEŠKA: – Kada pokrenete ovaj kod, on neće prikazati nikakav izlaz. To je zato što izlaz pada ispod ograničenja od 100 znakova.
Rezime
- ASP.Net ima mogućnost stvaranja korisničkih kontrola. Korisničke kontrole koriste se za kod koji se koristi više puta u aplikaciji. Korisnička kontrola tada se može ponovno koristiti u cijeloj aplikaciji.
- Korisnička kontrola mora biti registrirana na ASP.Net stranici prije nego što se može koristiti.
- Za korištenje korisničke kontrole na svim stranicama u aplikaciji, registrirajte je u datoteku web.config.
- Svojstva se također mogu dodati web korisničkoj kontroli.