ASP.NET Web Forms oktatóanyag: Példák felhasználói vezérlőkre

Az ASP.Netben lehetőség van újrafelhasználható kód létrehozására. Az újrafelhasználható kód sok helyen használható anélkül, hogy újra meg kellene írnia a kódot.

Az újrafelhasználható kód segít csökkenteni a fejlesztő által a kód megírása után eltöltött időt. Egyszer megírható, és több helyen is felhasználható.

Felhasználói vezérlés létrehozása az ASP.Netben

Az ASP.Net képes webes vezérlőket létrehozni. Ezek a vezérlők olyan kódot tartalmaznak, amely újra felhasználható. Az igényeknek megfelelően egy alkalmazáson belül használhatók.

Nézzünk egy példát arra, hogyan hozhatunk létre webes felhasználói vezérlőt az ASP.Net-ben.

A példánkban:

• Webes vezérlőt fogunk létrehozni.
• Ez egy fejléc komponens létrehozására szolgál.
• Az alábbi szöveget fogja tartalmazni: „Guru99 oktatóanyag” és „Ez az oktatóanyag az ASP.Net-hez készült”.

Dolgozzunk a jelenlegi webalkalmazásunkkal, amelyet a korábbi részekben készítettünk. Kövesse az alábbi lépéseket webes felhasználói vezérlő létrehozásához.

Step 1) Az első lépés egy webes felhasználói vezérlő létrehozása, és hozzáadása a Visual Studio megoldásunkhoz.

1. Nyissa meg a Megoldáskezelőt a Visual Studio-ban, és kattintson a jobb gombbal a DemoApplication megoldásra.
2. Válassza a Hozzáadás->Új elem menüpontot.

Step 2) A következő lépésben ki kell választanunk egy webes felhasználói vezérlő létrehozásának lehetőségét.

1. A projekt párbeszédablakban különféle lehetőségeket láthatunk a különböző típusú komponensek létrehozására. Kattintson a „Web” lehetőségre a bal oldalon.
2. Amikor a „Web” opcióra kattintunk, megjelenik egy „Webűrlapok felhasználói vezérlése” opció. Kattintson erre az opcióra.
3. Ezután nevet adunk a webvezérlőnek: „Guru99Control”.
4. Végül kattintson a "Hozzáadás" gombra, hogy a Visual Studio hozzáadja a webes felhasználói vezérlést a megoldásunkhoz.

Ezután látni fogja a „GuruA „99Control” hozzáadva a megoldáshoz.

Step 3) Most itt az ideje, hogy hozzáadjuk az egyéni kódot a webes felhasználói vezérlőhöz. A kódunk tiszta HTML szintaxisra fog épülni. Adja hozzá a következő kódot a következőhöz: 'Guru99Control.ascx' fájl.

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

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

Code Magyarázat:-

1. A Web Control fájlunkban először egy táblázat elemet hozunk létre. Ez két sornyi szöveg tárolására szolgál majd, amelyek a következőt fogják megjeleníteni: „Guru99 oktatóanyag” és „Ez az oktatóanyag az ASP.Net-hez készült.”
2. Ezután definiáljuk az első táblázatsort, és a szöveget a következőképpen írjuk be: „Guru99 Oktatóanyag.
3. Ezután meghatározzuk a második táblázatsorunkat, és a szöveget így írjuk be: „Ez az oktatóanyag az ASP.Net számára készült”.

JEGYZET: Most nem tudjuk végrehajtani ezt a kódot és megjeleníteni a kimenetet. Az egyetlen módja annak, hogy megnézzük, működik-e, az, ha beillesztjük az alkalmazásunkba (aspx fájl). Ezt a következő témában fogjuk látni.

Felhasználói vezérlők regisztrálása ASP.NET webes űrlapon

Az előző szakaszban láthattuk, hogyan hozhatunk létre egyéni webes vezérlőelemet. Ez a következő két sor megjelenítésére használható egy webes űrlapon:

• "Guru99 oktatóanyag
• "Ez az oktatóanyag az ASP.Net számára készült."

Miután létrehoztuk az egyéni „vezérlőt”, használnunk kell azt a webes alkalmazásunkban. Az első lépés a komponens regisztrálása az alkalmazásunkban (Demo.aspx). Ez az előfeltétele annak, hogy bármilyen egyéni webes vezérlőt használhassunk egy ASP.Net alkalmazásban.

Nézzük meg, hogyan érhetjük el ezt. Az alábbi lépések az előző szakasz folytatásai, amelyben létrehoztuk az egyéni vezérlőnket. Ebben a szakaszban a vezérlőt fogjuk használni a miénkben Demo.aspx webes űrlap. Először regisztráljuk az egyéni „vezérlőelemet” a Demo.aspx fájlban.

Step 1) Győződjön meg róla, hogy a demo.aspx fájlon dolgozik. Ebben a fájlban lesz regisztrálva a webes felhasználói vezérlő. Ezt úgy teheti meg, hogy duplán kattint a demo.aspx fájlra a .Net megoldás Megoldáskezelőjében.

Miután duplán kattintott az űrlapra, valószínűleg az alábbi kódot fogja látni az űrlapon. Ez az alapértelmezett kód, amelyet a Visual Studio ad hozzá, amikor egy webes űrlapot hozzáadnak egy ASP.Net projekthez. Az alapértelmezett kód olyan lépésekből áll, amelyek szükségesek ahhoz, hogy az űrlap ASP.Net webes űrlapként fusson a böngészőben.

Step 2) Most adjuk hozzá a kódunkat a felhasználói vezérlő regisztrálásához. Az alábbi képernyőkép a fenti alapkódhoz hozzáadott felhasználói vezérlő regisztrációját mutatja.

<%@ 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 Magyarázat:-

1. Az első lépés a webes felhasználói vezérlő regisztrálása. Ez az alábbi alapvető paramétereket tartalmazza:
   1. A „Regisztráció” kulcsszó a webes felhasználói vezérlő regisztrálására szolgál.
   2. Az Src paraméterrel definiáljuk a vezérlő nevét, ami esetünkben a következő: Guru99Control.ascx.
   3. A TagName és a TagPrefix a vezérlőelemnek adott egyedi nevek. Erre azért van szükség, hogy a HTML-oldalakon normál HTML-vezérlőelemként lehessen rájuk hivatkozni.
2. Ezután a korábban hozzárendelt TagPrefix:TagName tag segítségével hivatkozunk a webes felhasználói vezérlésünkre. A TagPrefix:TagName azt jelzi, hogy az egyéni webes vezérlésünket szeretnénk használni. Amikor a webszerver feldolgozza az oldalt, láthatjuk, hogy a TWebControl:WebControl taget használtuk. Ezután a szerver feldolgozza a következőt: 'Guru99Control' ennek megfelelően.
   1. A „Fejléc” vezérlőelemhez egy opcionális azonosító tartozik. Általában jó gyakorlat, ha egy HTML vezérlőelemhez azonosítót rendelünk.
   2. Végül a runat="server" attribútum biztosítja, hogy a vezérlő a webszerveren fusson. Minden ASP.Net vezérlő esetében ez az alapértelmezett attribútum. Minden ASP.Net vezérlőnek (beleértve az egyéni vezérlőket is) a szerveren kell futnia. A kimenetüket ezután a szerver elküldi a kliensnek, és ennek megfelelően jelenik meg a böngészőben.

Amikor a fenti kód be van állítva, és a projekt a következővel fut Visual Studio, akkor az alábbi kimenetet kapja.

Kimenet:-

A böngészőben megjelenő kimeneti üzenet azt mutatja, hogy a webes felhasználói vezérlés sikeresen végrehajtva.

ASP.Net vezérlők globális regisztrálása a web.config konfigurációs fájlban

Előfordulhat, hogy egy .Net alkalmazás több oldalán is szeretnénk felhasználói vezérlőket használni. Ilyenkor nem szeretnénk minden egyes ASP.Net oldalon felhasználói vezérlőket regisztrálni.

• A .Net-ben a regisztrációt a 'web.config' fájlban végezheti el.
• A web.config fájl egy gyakori konfigurációs fájl, amelyet egy .Net projekt összes weboldala használ.
• Az ASP.Net webprojekthez szükséges konfigurációs részleteket tartalmazza. Például a web.config fájl egyik gyakori konfigurációja a célkeret-paraméter.
• Ez a paraméter az alkalmazás által használt .Net keretrendszer verziójának azonosítására szolgál.

Az alábbiakban a web.config fájl alapértelmezett kódjának pillanatképe látható. A kiemelt rész a célkeret rész.

Nézzük meg, hogyan tudjuk regisztrálni a Guru99Control a web.config fájlban.

Step 1) Nyissa meg a web.config fájlt a Megoldáskezelőből a fájlra duplán kattintva.

Amikor megnyitja a web.config fájlt, az alábbi konfigurációt láthatja. A „web.config” fájlt a Visual Studio automatikusan hozzáadja a projekt létrehozásakor. Ez az ASP.Net projekt megfelelő működéséhez szükséges alapvető konfiguráció.

Step 2) Most regisztráljuk az összetevőnket a web.config fájlba. Ehhez hozzá kell adnunk az alábbi sorokat.

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

A regisztráció a következő részlépésekből áll:

1. Adjon hozzá egy címkét . Ez azt jelenti, hogy a vezérlők összes konfigurációja alkalmazható lesz a megoldás összes ASP.Net oldalán.
2. A címke azt jelenti, hogy konfigurációt ad hozzá a felhasználói vezérlőhöz.
3. Ezután regisztráljuk a felhasználói vezérlőt a további címkével. A tagPrefix, tagName és src többi paramétere változatlan marad.

Step 3) Ne felejtsd el a 'demo.aspx' oldalra lépni, és eltávolítani a vezérlőelemhez tartozó sorokat, amelyek a következő regisztrációval rendelkeztek: Guru99 komponens. Ha ezt a lépést nem hajtja végre, akkor a 'GuruA 99Control.ascx fájl a 'demo.aspx' fájlból fog végrehajtódni a 'web.config' fájl helyett.

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

Miután a fenti kódot beállítottuk, és a projektet a Visual Studio segítségével végrehajtottuk, az alábbi kimenetet kapjuk.

Kimenet:-

A kimeneti üzenet azt mutatja, hogy a webes felhasználói vezérlés sikeresen végrehajtva.

Nyilvános tulajdonságok hozzáadása egy webes vezérlőhöz

Egy tulajdonság egy kulcs-érték pár, amely bármely vezérlőelemhez van társítva. Vegyünk egy példát az egyszerűre HTML-címke. Az alábbiakban egy képernyőkép látható a címke kinézetéről.

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

		Demo Form

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

A „div” címke egy szakasz létrehozására szolgál egy HTML-dokumentumban. A „div” címkének van egy stílustulajdonságnak nevezett tulajdonsága. Ezzel más stílust adhatunk a div címkében megjelenő szövegnek. Általában a div címke kódját látja az alábbiak szerint.

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

Tehát a color attribútum nem más, mint egy kulcs-érték pár, amely magáról a címkéről ad több információt. A fenti esetben a kulcs neve 'style', a kulcs értéke pedig 'color:#0000FF'.

Hasonlóképpen, a felhasználói vezérlők esetében létrehozhat saját tulajdonságokat, amelyek leírják a vezérlőt.

Vegyünk egy egyszerű példát, és építsünk a sajátunkra:Guru„99Control” tulajdonságot hoztam létre a korábbi szakaszokban. Példánkban egy egyszerű egészértékű tulajdonságot fogunk hozzáadni, a MinValue-t. Ez az érték a felhasználói vezérlőben megjelenített szövegben szereplő karakterek minimális számát jelölné.

Végezzük el az alábbi lépéseket, hogy ez a helyére kerüljön.

Step 1) Nyissa meg a Guru99Control.ascx fájl. Adja hozzá a MinValue tulajdonság hozzáadásához szükséges kódot.

<%@ 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 Magyarázat:-

A runat="server" szkript attribútuma azt jelzi, hogy .Net-specifikus kódot adunk hozzá, és azt a webszerveren kell futtatni. Ez szükséges a felhasználói vezérlőhöz hozzáadott tulajdonságok feldolgozásához. Ezután hozzáadjuk a MinValue tulajdonságot, és alapértelmezett 0 értéket adunk neki.

Step 2) Most hivatkozzunk erre a tulajdonságra a demo.aspx fájlunkban. Most csak hivatkozunk a MinValue tulajdonságra, és hozzárendelünk egy új 100-as értéket.

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

JEGYZET: Amikor futtatod ezt a kódot, nem fog semmilyen kimenetet megjeleníteni. Ez azért van, mert a kimenet a 100 karakteres korlát alá esik.

GYIK