Handledning för ASP.NET Web Forms: Exempel på användarkontroller

I ASP.Net är det möjligt att skapa återanvändbar kod. Den återanvändbara koden kan användas på många ställen utan att behöva skriva koden igen.

Återanvändbar kod hjälper till att minska den tid som utvecklaren lägger på att skriva koden. Den kan göras en gång och återanvändas på flera ställen.

Skapa användarkontroll i ASP.Net

ASP.Net har möjlighet att skapa webbkontroller. Dessa kontroller innehåller kod som kan återanvändas. Den kan användas i en applikation enligt behov.

Låt oss ta en titt på ett exempel på hur vi kan skapa en webbanvändarkontroll i ASP.Net.

I vårt exempel:

• Vi ska skapa en webbkontroll.
• Den kommer att användas för att skapa en rubrikkomponent.
• Den kommer att innehålla följande text: "Guru99 handledningar” och ”Denna handledning är för ASP.Net”.

Låt oss arbeta med vår nuvarande webbapplikation skapad i de tidigare avsnitten. Låt oss följa stegen nedan för att skapa en webbanvändarkontroll.

Steg 1) Det första steget är att skapa en webbanvändarkontroll och lägga till den i vår Visual Studio-lösning.

1. Gå till Solution Explorer i Visual Studio och högerklicka på DemoApplication-lösningen.
2. Välj menyalternativet Lägg till->Nytt objekt.

Steg 2) I nästa steg måste vi välja alternativet att skapa en webbanvändarkontroll.

1. I projektdialogrutan kan vi se olika alternativ för att skapa olika typer av komponenter. Klicka på alternativet "Webb" på vänster sida.
2. När vi klickar på alternativet "Webb" ser du ett alternativ för "Användarkontroll för webbformulär". Klicka på det här alternativet.
3. Sedan ger vi webbkontrollen ett namn, "Guru99 Kontroll”.
4. Klicka slutligen på knappen "Lägg till" för att låta Visual Studio lägga till webbanvändarkontrollen till vår lösning.

Du kommer då att se "Guru99Control” har lagts till i lösningen.

Steg 3) Nu är det dags att lägga till den anpassade koden i webbanvändarkontrollen. Vår kod kommer att baseras på ren HTML-syntax. Lägg till följande kod i 'Guru99Control.ascx'-filen.

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

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

Code Förklaring:-

1. I vår Web Control-fil skapar vi först ett tabellelement. Detta kommer att användas för att innehålla två rader text som visar "Guru99 handledningar” och ”Denna handledning är för ASP.Net.”
2. Därefter definierar vi vår första tabellrad och skriver texten som "Guru99 handledningar.
3. Vi definierar sedan vår andra tabellrad och lägger texten som "Denna handledning är för ASP.Net."

OBS: Nu kan vi inte köra den här koden och visa utdata. Det enda sättet att se om det fungerar är att inkludera det i vår applikation (aspx-fil). Vi kommer att se detta i nästa avsnitt.

Registrera användarkontroller i ett ASP.NET-webbformulär

I det tidigare avsnittet såg vi hur vi kan skapa en anpassad webbkontroll. Denna kan användas för att visa följande två rader i ett webbformulär:

• "Guru99 handledningar
• "Denna handledning är för ASP.Net."

När den anpassade 'kontrollen' har skapats behöver vi använda den i vår webbapplikation. Det första steget är att registrera komponenten i vår applikation (Demo.aspx). Detta är en förutsättning för att använda en anpassad webbkontroll i en ASP.Net-applikation.

Låt oss titta på hur vi kan uppnå detta. Stegen nedan är en fortsättning på föregående avsnitt, där vi skapade vår anpassade kontroll. I det här avsnittet kommer vi att använda kontrollen i vår Demo.aspx webbformulär. Först registrerar vi vår anpassade 'kontroll' i Demo.aspx-filen.

Steg 1) Se till att du arbetar med demo.aspx-filen. Det är i den här filen som webbanvändarkontrollen kommer att registreras. Detta kan göras genom att dubbelklicka på demo.aspx-filen i Solution Explorer i din .Net-lösning.

När du dubbelklickar på formuläret kommer du förmodligen att se koden nedan i formuläret. Detta är standardkoden som läggs till av Visual Studio när ett webbformulär läggs till i ett ASP.Net-projekt. Standardkoden består av steg som krävs för att säkerställa att formuläret kan köras som ett ASP.Net-webbformulär i webbläsaren.

Steg 2) Nu ska vi lägga till vår kod för att registrera användarkontrollen. Skärmdumpen nedan visar registreringen av användarkontrollen som lagts till i ovanstående grundläggande 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.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 Förklaring:-

1. Det första steget är att registrera webbanvändarkontrollen. Detta omfattar följande grundläggande parametrar:
   1. Nyckelordet 'Registrera' används för att registrera webbanvändarkontrollen.
   2. Parametern Src används för att definiera namnet på kontrollen, vilket i vårt fall är Guru99Control.ascx.
   3. TagName och TagPrefix är individuella namn som ges till kontrollen. Detta görs så att de kan refereras till på HTML-sidor som en vanlig HTML-kontroll.
2. Nästa steg är att referera vår webbanvändarkontroll via TagPrefix:TagName som tilldelades tidigare. TagPrefix:TagName är en indikator på att vi vill använda vår anpassade webbkontroll. När sidan bearbetas av webbservern kan du se att vi har använt TWebControl:WebControl-taggen. Den kommer sedan att bearbeta 'Guru99Control' i enlighet därmed.
   1. Ett valfritt ID ges till kontrollen "Header". Det är generellt sett bra att ge ett ID till en HTML-kontroll.
   2. Slutligen säkerställer attributet runat="server" att kontrollen körs på webbservern. För alla ASP.Net-kontroller är detta standardattributet. Alla ASP.Net-kontroller (inklusive anpassade kontroller) måste köras på servern. Deras utdata skickas sedan från servern till klienten och visas i webbläsaren i enlighet därmed.

När ovanstående kod är inställd och projektet exekveras med Visual Studio, får du utdata nedan.

Produktion:-

Utdatameddelandet som visas i webbläsaren visar att webbanvändarkontrollen har utförts.

Registrera ASP.Net-kontroller globalt i web.config-konfigurationsfilen

Ibland kan man vilja använda användarkontroller på flera sidor i en .Net-applikation. I det här fallet vill man inte fortsätta registrera användarkontroller på varje ASP.Net-sida.

• I .Net kan du utföra registreringen i filen 'web.config'.
• web.config-filen är en vanlig konfigurationsfil som används av alla webbsidor i ett .Net-projekt.
• Den innehåller nödvändiga konfigurationsdetaljer för webbprojektet ASP.Net. Till exempel är en vanlig konfiguration i web.config-filen målramparameter.
• Denna parameter används för att identifiera .Net framework-versionen som används av applikationen.

Nedan är en ögonblicksbild av standardkoden i web.config-filen. Den markerade delen är målramdelen.

Låt oss se hur vi kan registrera oss Guru99Control i web.config-filen.

Steg 1) Öppna web.config-filen från Solution Explorer genom att dubbelklicka på filen.

När du öppnar filen web.config kan du se konfigurationen nedan. "web.config" läggs till automatiskt av Visual Studio när projektet skapas. Detta är den grundläggande konfigurationen som krävs för att få ASP.Net-projektet att fungera korrekt.

Steg 2) Låt oss nu registrera vår komponent i filen web.config. Vi måste lägga till raderna nedan för 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 omfattar följande delsteg:

1. Lägg till en tagg som heter . Det betyder att all konfiguration för kontrollerna kommer att gälla för alla ASP.Net-sidor i lösningen.
2. De tag betyder att du lägger till en konfiguration för användarkontrollen.
3. Sedan registrerar vi användarkontrollen med den extra taggen. De återstående parametrarna tagPrefix, tagName och src förblir desamma som tidigare.

Steg 3) Kom ihåg att gå till sidan 'demo.aspx' och ta bort raderna för kontrollen som hade registreringen av Guru99-komponenten. Om du inte utför detta steg, då 'GuruFilen 99Control.ascx kommer att köras från filen 'demo.aspx' istället för 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 ovanstående kod är konfigurerad och projektet har körts med Visual Studio får du följande utdata.

Produktion:-

Utmatningsmeddelandet visar att webbanvändarkontrollen har utförts.

Lägga till offentliga egenskaper till en webbkontroll

En egenskap är ett nyckel-värde-par som är associerat med en kontroll. Låt oss ta ett exempel på det enkla HTML-tagg. En skärmdump av hur taggen ser ut visas nedan.

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

		Demo Form

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

Taggen 'div' används för att skapa ett avsnitt i ett HTML-dokument. Taggen 'div' har en egenskap som kallas stilegenskap. Detta kan användas för att ge en annan stil till texten som visas i div-taggen. Normalt ser du koden för div-taggen som visas nedan.

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

Så färgattributet är inget annat än ett nyckel-värdepar som ger mer information om själva taggen. I ovanstående fall är nyckelnamnet 'stil' och nyckelvärdet är 'färg:#0000FF'.

På samma sätt, för användarkontroller, kan du skapa dina egna egenskaper som beskriver kontrollen.

Låt oss ta ett enkelt exempel och bygga vidare på vårtGuru99Control' som skapades i de tidigare avsnitten. I vårt exempel ska vi lägga till en enkel heltalsegenskap som heter MinValue. Detta värde representerar det minsta antalet tecken i texten som visas i användarkontrollen.

Låt oss utföra de nedan nämnda stegen för att få detta på plats.

Steg 1) Öppna Guru99Control.ascx-filen. Lägg till koden för att lägga till egenskapen 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 Förklaring:-

Attributet script runat="server" används för att indikera att vi lägger till .Net-specifik kod och att den behöver köras på webbservern. Detta krävs för att bearbeta alla egenskaper som läggs till i användarkontrollen. Vi lägger sedan till vår egenskap MinValue och ger den standardvärdet 0.

Steg 2) Låt oss nu referera till den här egenskapen i vår demo.aspx-fil. Allt vi gör nu är att bara referera till MinValue-egenskapen och tilldela ett nytt värde 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>

OBS: När du kör den här koden visas ingen utdata. Detta beror på att utdata ligger under gränsen på 100 tecken.

Vanliga frågor