ASP.NET Web Forms Tutorial: Eksempler på brukerkontroller

I ASP.Net er det mulig å lage gjenbrukbar kode. Den gjenbrukbare koden kan brukes mange steder uten å måtte skrive koden på nytt.

Gjenbrukbar kode bidrar til å redusere tiden utvikleren bruker etter å ha skrevet koden. Det kan gjøres én gang og brukes om igjen flere steder.

Opprett brukerkontroll i ASP.Net

ASP.Net har muligheten til å lage webkontroller. Disse kontrollene inneholder kode som kan brukes på nytt. Den kan brukes på tvers av en applikasjon etter behov.

La oss ta en titt på et eksempel på hvordan vi kan opprette en webbrukerkontroll i ASP.Net.

I vårt eksempel:

• Vi skal lage en webkontroll.
• Den vil bli brukt til å lage en overskriftskomponent.
• Den vil inneholde følgende tekst: «Guru99 veiledninger» og «Denne veiledningen er for ASP.Net».

La oss jobbe med vår nåværende nettapplikasjon laget i de tidligere delene. La oss følge trinnene nedenfor for å opprette en nettbrukerkontroll.

Trinn 1) Det første trinnet er å lage en nettbrukerkontroll og legge den til i Visual Studio Solution.

1. Gå til løsningsutforskeren i Visual Studio, og høyreklikk på DemoApplication-løsningen.
2. Velg menyvalget Legg til->Nytt element.

Trinn 2) I neste trinn må vi velge alternativet for å opprette en webbrukerkontroll.

1. I prosjektdialogboksen kan vi se ulike alternativer for å lage ulike typer komponenter. Klikk på "Web"-alternativet på venstre side.
2. Når vi klikker på alternativet «Web», ser du et alternativ for «Brukerkontroll for webskjemaer». Klikk på dette alternativet.
3. Deretter gir vi webkontrollen et navn, «Guru99 Kontroll”.
4. Til slutt klikker du på "Legg til"-knappen for å la Visual Studio legge til nettbrukerkontrollen til løsningen vår.

Du vil da se «Guru99Control» lagt til i løsningen.

Trinn 3) Nå er det på tide å legge til den tilpassede koden i webbrukerkontrollen. Koden vår vil være basert på ren HTML-syntaks. Legg til følgende kode i 'Guru99Control.ascx'-filen.

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

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

Code Forklaring:-

1. I webkontrollfilen vår oppretter vi først et tabellelement. Dette vil bli brukt til å holde to rader med tekst som vil vise «Guru99 veiledninger» og «Denne veiledningen er for ASP.Net».
2. Deretter definerer vi den første tabellraden vår og setter inn teksten som «Guru99 veiledninger.
3. Vi definerer deretter vår andre tabellrad og setter teksten som "Denne opplæringen er for ASP.Net."

NOTAT: Nå kan vi ikke kjøre denne koden og vise resultatet. Den eneste måten å se om dette fungerer på er å inkludere det i applikasjonen vår (aspx-filen). Vi skal se på dette i det neste emnet.

Registrere brukerkontroller på et ASP.NET-nettskjema

I den tidligere delen så vi hvordan vi kan opprette en tilpasset webkontroll. Denne kan brukes til å vise følgende to linjer i et webskjema:

• "Guru99 veiledninger
• "Denne opplæringen er for ASP.Net."

Når den tilpassede «kontrollen» er opprettet, må vi bruke den i webapplikasjonen vår. Det første trinnet er å registrere komponenten i applikasjonen vår (Demo.aspx). Dette er en forutsetning for å bruke en tilpasset webkontroll i en ASP.Net-applikasjon.

La oss se på hvordan vi kan oppnå dette. Trinnene nedenfor er en fortsettelse av forrige avsnitt, der vi opprettet vår egendefinerte kontroll. I denne delen skal vi bruke kontrollen i vår Demo.aspx nettskjema. Først registrerer vi vår egendefinerte «kontroll» i Demo.aspx-filen.

Trinn 1) Sørg for at du jobber med demo.aspx-filen. Det er i denne filen at nettbrukerkontrollen registreres. Dette kan gjøres ved å dobbeltklikke på demo.aspx-filen i løsningsutforskeren i .Net-løsningen din.

Når du dobbeltklikker på skjemaet, vil du sannsynligvis se koden nedenfor i skjemaet. Dette er standardkoden som legges til av Visual Studio når et webskjema legges til i et ASP.Net-prosjekt. Standardkoden består av trinn som er nødvendige for å sikre at skjemaet kan kjøres som et ASP.Net-webskjema i nettleseren.

Trinn 2) La oss nå legge til koden vår for å registrere brukerkontrollen. Skjermbildet nedenfor viser registrering av brukerkontrollen lagt til i den grunnleggende koden ovenfor.

<%@ 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 Forklaring:-

1. Det første trinnet er å registrere nettbrukerkontrollen. Dette omfatter følgende grunnleggende parametere:
   1. Nøkkelordet 'Registrer' brukes til å registrere nettbrukerkontrollen.
   2. Src-parameteren brukes til å definere navnet på kontrollen, som i vårt tilfelle er Guru99Control.ascx.
   3. TagName og TagPrefix er individuelle navn gitt til kontrollen. Dette gjøres slik at de kan refereres til på HTML-sider som en vanlig HTML-kontroll.
2. Deretter refererer vi til vår webbrukerkontroll via TagPrefix:TagName som ble tildelt tidligere. TagPrefix:TagName er en indikator på at vi ønsker å bruke vår tilpassede webkontroll. Når siden behandles av webserveren, kan du se at vi har brukt TWebControl:WebControl-taggen. Den vil deretter behandle 'Guru99Control' deretter.
   1. Kontrollen «Header» får en valgfri ID. Det er generelt god praksis å gi en ID til en HTML-kontroll.
   2. Til slutt sikrer attributtet runat="server" at kontrollen kjører på webserveren. For alle ASP.Net-kontroller er dette standardattributtet. Alle ASP.Net-kontroller (inkludert tilpassede kontroller) må kjøre på serveren. Utdataene sendes deretter fra serveren til klienten og vises deretter i nettleseren.

Når koden ovenfor er satt, og prosjektet utføres ved hjelp av Visual Studio, vil du få utgangen nedenfor.

Produksjon:-

Utdatameldingen som vises i nettleseren viser at nettbrukerkontrollen ble utført.

Registrere ASP.Net-kontroller globalt i web.config-konfigurasjonsfilen

Noen ganger kan man ønske å bruke brukerkontroller på flere sider i et .Net-program. På dette tidspunktet ønsker du ikke å fortsette å registrere brukerkontroller på hver eneste ASP.Net-side.

• I .Net kan du utføre registreringen i 'web.config'-filen.
• web.config-filen er en vanlig konfigurasjonsfil som brukes av alle nettsider i et .Net-prosjekt.
• Den inneholder nødvendige konfigurasjonsdetaljer for ASP.Net-nettprosjektet. For eksempel er en vanlig konfigurasjon i web.config-filen målrammeparameter.
• Denne parameteren brukes til å identifisere .Net framework-versjonen som brukes av applikasjonen.

Nedenfor er et øyeblikksbilde av standardkoden i web.config-filen. Den uthevede delen er målrammedelen.

La oss se hvordan vi kan registrere oss Guru99Control i web.config-filen.

Trinn 1) Åpne web.config-filen fra Solution Explorer ved å dobbeltklikke på filen.

Når du åpner web.config-filen, kan det hende du ser konfigurasjonen nedenfor. 'web.config' legges til automatisk av Visual Studio når prosjektet er opprettet. Dette er den grunnleggende konfigurasjonen som kreves for å få ASP.Net-prosjektet til å fungere skikkelig.

Trinn 2) La oss nå registrere komponenten vår i web.config-filen. Vi må legge til linjene nedenfor for det.

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

Registreringen består av følgende deltrinn:

1. Legg til en tag kalt . Det betyr at all konfigurasjon for kontrollene vil gjelde for alle ASP.Net-sidene i løsningen.
2. De tag betyr at du legger til en konfigurasjon for brukerkontrollen.
3. Deretter registrerer vi brukerkontrollen med den ekstra taggen. De resterende parameterne tagPrefix, tagName og src forblir de samme som før.

Trinn 3) Husk å gå til siden 'demo.aspx' og fjerne linjene for kontrollen som hadde registreringen til Guru99-komponenten. Hvis du ikke utfører dette trinnet, vil 'GuruFilen 99Control.ascx' vil bli kjørt fra filen 'demo.aspx' i stedet for filen '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>

Når koden ovenfor er satt, og prosjektet er utført med Visual Studio, vil du få utdataene nedenfor.

Produksjon:-

Utgangsmeldingen viser at nettbrukerkontrollen ble utført.

Legge til offentlige egenskaper til en nettkontroll

En egenskap er et nøkkel-verdi-par knyttet til en hvilken som helst kontroll. La oss ta et eksempel på den enkle HTML-tag. Et skjermbilde av hvordan taggen ser ut vises nedenfor.

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

		Demo Form

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

'div'-taggen brukes til å lage en seksjon i et HTML-dokument. 'div'-taggen har en egenskap som kalles en stilegenskap. Dette kan brukes til å gi en annen stil til teksten som vises i div-taggen. Normalt vil du se koden for div-taggen som vist nedenfor.

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

Så fargeattributtet er ikke annet enn et nøkkelverdi-par som gir mer informasjon om selve taggen. I tilfellet ovenfor er nøkkelnavnet 'stil' og nøkkelverdien er 'farge:#0000FF'.

På samme måte, for brukerkontroller, kan du opprette dine egne egenskaper som beskriver kontrollen.

La oss ta et enkelt eksempel og bygge videre på vårtGuru99Control' som ble opprettet i de tidligere avsnittene. I vårt eksempel skal vi legge til en enkel heltallsegenskap kalt MinValue. Denne verdien representerer minimum antall tegn i teksten som vises i brukerkontrollen.

La oss utføre trinnene nedenfor for å få dette på plass.

Trinn 1) Åpne Guru99Control.ascx-filen. Legg til koden for å legge til MinValue-egenskapen.

<%@ 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 Forklaring:-

Attributtet script runat="server" brukes til å indikere at vi legger til .Net-spesifikk kode, og at den må kjøres på webserveren. Dette er nødvendig for å behandle enhver egenskap som legges til brukerkontrollen. Deretter legger vi til egenskapen MinValue og gir den en standardverdi på 0.

Trinn 2) La oss nå referere til denne egenskapen i vår demo.aspx-fil. Alt vi gjør nå er bare å referere til MinValue-egenskapen og tilordne en ny verdi på 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>

NOTAT: Når du kjører denne koden, vil den ikke vise noen utdata. Dette er fordi utdataene faller under grensen på 100 tegn.

Spørsmål og svar