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.

Den genanvendelige kode hjælper med at reducere mængden af ​​tid brugt af udvikleren efter at have skrevet koden. Det kan gøres én gang og genbruges flere steder.

Opret brugerkontrol i ASP.Net

ASP.Net har evnen til at oprette webkontroller. Disse kontroller indeholder kode, som kan genbruges. Det kan bruges på tværs af applikationer i henhold til kravet.

Lad os tage et kig 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 Tutorials"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.

Opret brugerkontrol i ASP.Net

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

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

Opret brugerkontrol i ASP.Net

  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"-indstillingen, ser du en mulighed for "Web Forms User control." Klik på denne mulighed.
  3. Vi giver derefter et navn til webkontrollen "Guru99Control".
  4. Til sidst skal du klikke på knappen 'Tilføj' for at lade Visual Studio tilføje webbrugerkontrollen til vores løsning.

Du vil se "Guru99Control" tilføjet til løsningen.

Opret brugerkontrol i ASP.Net

Trin 4) 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 filen 'Guru99Control.ascx'

Opret brugerkontrol i ASP.Net

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

Kodeforklaring:-

  1. I vores webkontrolfil opretter vi først et tabelelement. Dette vil blive brugt til at holde 2 rækker tekst, som vil blive brugt til at vise
  • "Guru99 Tutorials" og
  • "Denne vejledning er til ASP.Net."
  1. Dernæst definerer vi vores første tabelrække og sætter teksten som "Guru99 Tutorials."
  2. Vi definerer derefter vores anden tabelrække og sætter teksten som "Denne vejledning er til ASP.Net."

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

Registrering af brugerkontroller på en ASP.NET-webformular

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

  • “Guru99 Tutorials”
  • "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 i enhver brugerdefineret webkontrol i en ASP.Net-applikation.

Registrering af brugerkontroller på en ASP.NET

Lad os se på, hvordan vi kan opnå dette. Nedenstående trin er en fortsættelse til forrige afsnit. I det foregående afsnit har vi lavet vores brugerdefinerede kontrol. I dette afsnit vil vi bruge kontrollen i vores Demo.aspx webformular.

Først vil vi registrere vores brugerdefinerede 'kontrol' i Demo.aspx-filen.

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

Registrering af brugerkontroller på en ASP.NET

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, som er nødvendige for at sikre, at formularen kan køre som en ASP.Net webformular i browseren.

Registrering af brugerkontroller på en ASP.NET

Trin 2) Lad os nu tilføje vores kode for at registrere brugerkontrollen. Skærmbilledet nedenfor viser registrering af brugerkontrollen til ovenstående grundkode.

Registrering af brugerkontroller på en ASP.NET

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

Kodeforklaring:-

  1. Det første trin er at registrere webbrugerkontrollen. Dette består af 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. Tagnavnet og Tagpræfikset er individuelle navne givet til kontrolelementet. Dette gøres, så de kan referere i HTML-sider som en normal HTML-kontrol.
  2. Dernæst refererer vi til vores webbrugerkontrol via TagPrefix:TagName, som blev tildelt tidligere. TagPrefix:TagName er en indikator for, at vi ønsker at 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. I vores eksempel er det TWebControl:WebControl.
    1. Et valgfrit ID gives til kontrollen af ​​"Header". Det er generelt en god praksis at give et ID til en HTML-kontrol.
    2. Til sidst attributten runat=server, så kontrollen kører på webserveren. For alle ASP.Net-kontroller er dette standardattributten. Alle ASP.Net-kontroller (inklusive brugerdefinerede kontroller) skal køres 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. Du får nedenstående output.

Produktion:-

Registrering af brugerkontroller på en ASP.NET

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

Registrering af asp.net kontrollerer globalt i webkonfigurationsfilen asp

Nogle gange vil man måske bruge brugerkontroller på flere sider i en .Net-applikation. På dette tidspunkt ønsker du 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 .Net-projektet.
  • 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.

Registrering af asp.net kontroller globalt i webkonfigurationen

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.

Registrering af asp.net kontroller globalt i webkonfigurationen

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.

Registrering af asp.net kontroller globalt i webkonfigurationen

Trin 2) Lad os nu registrere vores komponent i web.config-filen. Vi skal tilføje nedenstående linjer for det.

Registrering af asp.net kontroller globalt i webkonfigurationen

<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 af nedenstående undertrin

  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. Så 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 'demo.aspx'-siden og fjerne linjerne for kontrol, som havde registreringen af ​​Guru99-komponenten. Hvis du ikke udfører dette trin, vil 'Guru99Control.ascx'-filen blive udført fra 'demo.aspx'-filen i stedet for 'web.config'-filen.

Registrering af asp.net kontroller globalt i webkonfigurationen

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

Ovenstående kode er indstillet, og projektet udføres ved hjælp af Visual Studio. Du får nedenstående output.

Produktion:-

Registrering af asp.net kontroller globalt i webkonfigurationen

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 enhver kontrol. Lad os tage et eksempel på det enkle HTML tag. Et skærmbillede af, hvordan tagget ser ud, er vist nedenfor.

Tilføjelse af offentlige egenskaber til en webkontrol

<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' skabt i de tidligere afsnit.

I vores eksempel vil vi tilføje 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) Åbn filen Guru99Control.ascx. Tilføj koden for tilføjelse af MinValue-egenskaben.

Tilføjelse af offentlige egenskaber til en webkontrol

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

Kodeforklaring:-

Scriptet runat=server-attributten bruges til at indikere, at vi tilføjer some.Net-specifik kode, og at den skal køres på webserveren.

Dette er påkrævet for at behandle enhver egenskab, der er tilføjet 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.

Tilføjelse af offentlige egenskaber til en webkontrol

!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>

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

Resumé

  • ASP.Net har mulighed for at oprette brugerkontroller. Brugerkontroller bruges til at have kode, som bruges flere gange i en applikation. Brugerkontrollen kan derefter genbruges på tværs af applikationen.
  • Brugerkontrollen skal registreres på ASP.Net-siden, før den kan bruges.
  • For at bruge brugerkontrol på tværs af alle sider i et program, skal du registrere det i web.config-filen.
  • Egenskaber kan også tilføjes til en webbrugerkontrol.