ASP.NET Web Forms Tutorial: Eksempler på brugerkontrol

I ASP.Net er det muligt at oprette genbrugelig kode. Den genanvendelige kode kan bruges mange steder uden at skulle skrive koden igen.

Genbrugelig kode hjælper med at reducere den tid, udvikleren bruger efter at have skrevet koden. Det kan gøres én gang og genbruges flere steder.

Opret brugerkontrol i ASP.Net

ASP.Net har muligheden for at oprette webkontroller. Disse kontroller indeholder kode, der kan genbruges. Den kan bruges på tværs af en applikation efter behov.

Lad os se på et eksempel på, hvordan vi kan oprette en webbrugerkontrol i ASP.Net.

I vores eksempel:

• Vi skal lave en webkontrol.
• Det vil blive brugt til at oprette en header-komponent.
• Den vil indeholde nedenstående tekst: "Guru99 vejledninger” og “Denne vejledning er til ASP.Net”.

Lad os arbejde med vores nuværende webapplikation, der er oprettet i de tidligere afsnit. Lad os følge nedenstående trin for at oprette en webbrugerkontrol.

Trin 1) Det første trin er at oprette en webbrugerkontrol og tilføje den til vores Visual Studio-løsning.

1. Gå til Solution Explorer i Visual Studio, og højreklik på DemoApplication-løsningen.
2. Vælg menupunktet Tilføj->Nyt element.

Trin 2) I næste trin skal vi vælge muligheden for at oprette en webbrugerkontrol.

1. I projektdialogboksen kan vi se forskellige muligheder for at lave forskellige typer komponenter. Klik på "Web"-indstillingen i venstre side.
2. Når vi klikker på "Web", ser du en mulighed for "Brugerkontrol af webformularer". Klik på denne mulighed.
3. Vi giver derefter webkontrollen et navn, "Guru99Kontrol”.
4. Til sidst skal du klikke på knappen 'Tilføj' for at lade Visual Studio tilføje webbrugerkontrollen til vores løsning.

Du vil derefter se “Guru"99Control" tilføjet til løsningen.

Trin 3) Nu er det tid til at tilføje den brugerdefinerede kode til webbrugerkontrollen. Vores kode vil være baseret på ren HTML-syntaks. Tilføj følgende kode til 'Guru99Control.ascx'-filen.

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

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

Code Forklaring:-

1. I vores Web Control-fil opretter vi først et tabelelement. Dette vil blive brugt til at indeholde 2 rækker tekst, som viser "Guru99 vejledninger” og “Denne vejledning er til ASP.Net.”
2. Dernæst definerer vi vores første tabelrække og skriver teksten som "Guru99 vejledninger.
3. Vi definerer derefter vores anden tabelrække og sætter teksten som "Denne vejledning er til ASP.Net."

BEMÆRK VENLIGST: Nu kan vi ikke udføre denne kode og vise outputtet. Den eneste måde at se om det virker, er at inkludere det i vores applikation (aspx-fil). Vi vil se på dette i det efterfølgende emne.

Registrering af brugerkontroller på en ASP.NET-webformular

I det tidligere afsnit så vi, hvordan vi kan oprette et brugerdefineret webkontrolelement. Dette kan bruges til at vise følgende to linjer i en webformular:

• "Guru99 vejledninger
• "Denne vejledning er til ASP.Net."

Når den brugerdefinerede 'kontrol' er oprettet, skal vi bruge den i vores webapplikation. Det første trin er at registrere komponenten i vores applikation (Demo.aspx). Dette er forudsætningen for at bruge en brugerdefineret webkontrol i en ASP.Net-applikation.

Lad os se på, hvordan vi kan opnå dette. Trinene nedenfor er en fortsættelse af det forrige afsnit, hvor vi oprettede vores brugerdefinerede kontrolelement. I dette afsnit vil vi bruge kontrollen i vores Demo.aspx webformular. Først registrerer vi vores brugerdefinerede 'kontrol' i Demo.aspx-filen.

Trin 1) Sørg for, at du arbejder på demo.aspx-filen. Det er i denne fil, at webbrugerkontrollen registreres. Dette kan gøres ved at dobbeltklikke på demo.aspx-filen i Solution Explorer i din .Net-løsning.

Når du dobbeltklikker på formularen, vil du sandsynligvis se nedenstående kode i formularen. Dette er standardkoden, der tilføjes af Visual Studio, når en webformular tilføjes til et ASP.Net-projekt. Standardkoden består af trin, der er nødvendige for at sikre, at formularen kan køre som en ASP.Net-webformular i browseren.

Trin 2) Lad os nu tilføje vores kode til at registrere brugerkontrollen. Skærmbilledet nedenfor viser registreringen af ​​brugerkontrollen, som er tilføjet til ovenstående grundlæggende kode.

<%@ 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 trin er at registrere webbrugerkontrollen. Dette omfatter nedenstående grundlæggende parametre:
   1. Nøgleordet 'Registrer' bruges til at registrere webbrugerkontrollen.
   2. Parameteren Src bruges til at definere navnet på kontrollen, som i vores tilfælde er Guru99Control.ascx.
   3. TagName og TagPrefix er individuelle navne, der gives til kontrollen. Dette gøres, så de kan refereres til på HTML-sider som et normalt HTML-kontrolelement.
2. Dernæst refererer vi til vores webbrugerkontrol via TagPrefix:TagName, som blev tildelt tidligere. TagPrefix:TagName er en indikator for, at vi vil bruge vores brugerdefinerede webkontrol. Når siden behandles af webserveren, kan du se, at vi har brugt TWebControl:WebControl-tagget. Det vil derefter behandle 'Guru99Control' i overensstemmelse hermed.
   1. Kontrollen "Header" gives et valgfrit ID. Det er generelt god praksis at give et ID til en HTML-kontrol.
   2. Endelig sikrer attributten runat="server", at kontrollen kører på webserveren. For alle ASP.Net-kontroller er dette standardattributten. Alle ASP.Net-kontroller (inklusive brugerdefinerede kontroller) skal køre på serveren. Deres output sendes derefter fra serveren til klienten og vises i browseren i overensstemmelse hermed.

Når ovenstående kode er indstillet, og projektet udføres vha Visual Studio, får du nedenstående output.

Produktion:-

Outputmeddelelsen, der vises i browseren, viser, at webbrugerkontrollen blev udført.

Registrering af ASP.Net-kontroller globalt i web.config-konfigurationsfilen

Nogle gange kan man ønske at bruge brugerkontroller på flere sider i en .Net-applikation. På nuværende tidspunkt ønsker man ikke at blive ved med at registrere brugerkontroller på hver eneste ASP.Net-side.

• I .Net kan du foretage registreringen i filen 'web.config'.
• Web.config-filen er en almindelig konfigurationsfil, der bruges af alle websider i et .Net-projekt.
• Den indeholder nødvendige konfigurationsdetaljer for ASP.Net-webprojektet. For eksempel er en almindelig konfiguration i web.config-filen målrammeparameter.
• Denne parameter bruges til at identificere .Net framework-versionen, der bruges af applikationen.

Nedenfor er et øjebliksbillede af standardkoden i web.config-filen. Den fremhævede del er målrammedelen.

Lad os se, hvordan vi kan registrere vores Guru99Control i web.config-filen.

Trin 1) Åbn web.config-filen fra Solution Explorer ved at dobbeltklikke på filen.

Når du åbner web.config-filen, kan du muligvis se nedenstående konfiguration. 'web.config' tilføjes automatisk af Visual Studio, når projektet oprettes. Dette er den grundlæggende konfiguration, der kræves for at få ASP.Net-projektet til at fungere korrekt.

Trin 2) Lad os nu registrere vores komponent i web.config-filen. Vi skal tilføje nedenstående linjer 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 omfatter følgende deltrin:

1. Tilføj et tag kaldet . Det betyder, at al konfiguration af kontrollerne vil være gældende for alle ASP.Net-siderne i løsningen.
2. Det tag betyder, at du tilføjer en konfiguration for brugerkontrollen.
3. Derefter registrerer vi brugerkontrollen med det ekstra tag. De resterende parametre for tagPrefix, tagName og src forbliver de samme som før.

Trin 3) Husk at gå til siden 'demo.aspx' og fjerne linjerne for den kontrol, der havde registreringen af Guru99-komponenten. Hvis du ikke udfører dette trin, så 'GuruFilen 99Control.ascx' vil blive udfø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 ovenstående kode er indstillet, og projektet er udført ved hjælp af Visual Studio, får du nedenstående output.

Produktion:-

Outputmeddelelsen viser, at webbrugerkontrollen blev udført.

Tilføjelse af offentlige egenskaber til en webkontrol

En egenskab er et nøgle-værdi-par, der er knyttet til et hvilket som helst kontrolelement. Lad os tage et eksempel på den simple HTML-tag. Et skærmbillede af, hvordan tagget ser ud, vises nedenfor.

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

		Demo Form

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

'div'-tagget bruges til at oprette en sektion i et HTML-dokument. 'div'-tagget har en egenskab kaldet en stilegenskab. Dette kan bruges til at give en anden stil til teksten, der vises i div-tagget. Normalt vil du se koden for div-tagget som vist nedenfor.

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

Så farveattributten er intet andet end et nøgle-værdi-par, som giver flere oplysninger om selve tagget. I ovenstående tilfælde er nøglenavnet 'stil', og nøgleværdien er 'farve:#0000FF'.

Tilsvarende kan du for brugerkontroller oprette dine egne egenskaber, der beskriver kontrolelementet.

Lad os tage et simpelt eksempel og bygge videre på vores 'Guru99Control' oprettet i de tidligere afsnit. I vores eksempel tilføjer vi en simpel heltalsegenskab kaldet MinValue. Denne værdi repræsenterer det mindste antal tegn i teksten, der vises i brugerkontrollen.

Lad os udføre de nedenstående trin for at få dette på plads.

Trin 1) Åbne Guru99Control.ascx-filen. Tilføj koden til at tilføje egenskaben 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 Forklaring:-

Attributten script runat="server" bruges til at angive, at vi tilføjer .Net-specifik kode, og at den skal køres på webserveren. Dette er nødvendigt for at behandle enhver egenskab, der tilføjes til brugerkontrollen. Vi tilføjer derefter vores egenskab MinValue og giver den en standardværdi på 0.

Trin 2) Lad os nu referere til denne egenskab i vores demo.aspx-fil. Alt, hvad vi gør nu, er blot at henvise til MinValue-egenskaben og tildele en ny værdi 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>

BEMÆRK VENLIGST: Når du kører denne kode, vil den ikke vise noget output. Dette skyldes, at outputtet falder under grænsen på 100 tegn.

Ofte Stillede Spørgsmål