Výukový program webových formulářů ASP.NET: Příklady uživatelských ovládacích prvků

Od: Jacob Lee Jacob Lee
Hours aktualizováno

V ASP.Net je možné vytvořit znovu použitelný kód. Znovu použitelný kód lze použít na mnoha místech, aniž by bylo nutné kód znovu psát.

Znovu použitelný kód pomáhá snížit množství času stráveného vývojářem po napsání kódu. Lze jej provést jednou a znovu použít na více místech.

Vytvořte User Control v ASP.Net

ASP.Net má schopnost vytvářet webové ovládací prvky. Tyto ovládací prvky obsahují kód, který lze znovu použít. Lze jej použít napříč aplikacemi dle požadavku.

Podívejme se na příklad, jak můžeme vytvořit webový uživatelský ovládací prvek v ASP.Net

V našem příkladu

  • Vytvoříme webový ovládací prvek.
  • Bude použit k vytvoření komponenty záhlaví.
  • Bude obsahovat níže uvedený text.”Guru99 Tutorials”This Tutorial is for ASP.Net”

Pojďme pracovat s naší aktuální webovou aplikací vytvořenou v předchozích částech. Při vytváření webového uživatelského ovládacího prvku postupujte podle níže uvedených kroků.

Krok 1) Prvním krokem je vytvoření webového uživatelského ovládacího prvku a jeho přidání do našeho řešení Visual Studio.

Vytvořte User Control v ASP.Net

  1. Přejděte do Průzkumníka řešení v sadě Visual Studio a klikněte pravým tlačítkem na Řešení DemoApplication
  2. Zvolte položku nabídky Přidat->Nová položka

Krok 2) V dalším kroku musíme zvolit možnost vytvoření webového uživatelského ovládání

Vytvořte User Control v ASP.Net

  1. V dialogovém okně projektu můžeme vidět různé možnosti vytváření různých typů komponent. Klikněte na možnost „Web“ na levé straně.
  2. Když klikneme na možnost „Web“, zobrazí se možnost „Kontrola uživatele webových formulářů“. Klepněte na tuto možnost.
  3. Poté pojmenujeme webový ovládací prvek „Guru99Control“.
  4. Nakonec klikněte na tlačítko „Přidat“, aby Visual Studio přidalo do našeho řešení ovládání webového uživatele.

Uvidíte „Guru99Control“ přidaný k řešení.

Vytvořte User Control v ASP.Net

Krok 4) Nyní je čas přidat vlastní kód do webového uživatelského ovládacího prvku. Náš kód bude založen na čisté syntaxi HTML. Přidejte následující kód do souboru 'Guru99Control.ascx'

Vytvořte User Control v ASP.Net

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

Vysvětlení kódu:-

  1. V našem souboru Web Control nejprve vytváříme prvek tabulky. To bude použito pro uložení 2 řádků textu, který bude použit k zobrazení
  • „Výukové programy Guru99“ a
  • "Tento návod je pro ASP.Net."
  1. Dále definujeme náš první řádek tabulky a vložíme text jako „Guru99 Tutorials“.
  2. Poté definujeme náš druhý řádek tabulky a vložíme text jako „Tento návod je pro ASP.Net“.

POZNÁMKA: Nyní nemůžeme tento kód spustit a zobrazit výstup. Jediný způsob, jak zjistit, zda to funguje, je zahrnout jej do naší aplikace (soubor aspx). To uvidíme v následujícím tématu.

Registrace uživatelských ovládacích prvků na webových formulářích ASP.NET

V předchozí části jsme viděli, jak můžeme vytvořit vlastní webový ovládací prvek. To lze použít k zobrazení následujících dvou řádků ve webovém formuláři

  • "Výukové programy Guru99"
  • "Tento návod je pro ASP.Net."

Jakmile je vlastní „ovládací prvek“ vytvořen, musíme jej použít v naší webové aplikaci. Prvním krokem je registrace komponenty v naší aplikaci (Demo.aspx). Toto je nezbytný předpoklad pro použití v jakémkoli vlastním webovém ovládacím prvku v aplikaci ASP.Net.

Registrace uživatelských ovládacích prvků v ASP.NET

Podívejme se, jak toho můžeme dosáhnout. Níže uvedené kroky jsou pokračováním předchozí části. V předchozí části jsme vytvořili vlastní ovládací prvek. V této části použijeme ovládací prvek v našem Demo.aspx webový formulář.

Nejprve zaregistrujeme náš vlastní 'ovládací prvek' do souboru Demo.aspx.

Krok 1) Ujistěte se, že pracujete na souboru demo.aspx. V tomto souboru bude registrován webový uživatelský ovládací prvek. To lze provést dvojitým kliknutím na soubor demo.aspx v Průzkumníku řešení vašeho řešení .Net.

Registrace uživatelských ovládacích prvků v ASP.NET

Jakmile dvakrát kliknete na formulář, pravděpodobně ve formuláři uvidíte níže uvedený kód. Toto je výchozí kód přidaný aplikací Visual Studio, když je webový formulář přidán do projektu ASP.Net.

Výchozí kód se skládá z kroků, které jsou nutné k zajištění toho, aby formulář mohl běžet jako webový formulář ASP.Net v prohlížeči.

Registrace uživatelských ovládacích prvků v ASP.NET

Krok 2) Nyní přidejte náš kód pro registraci uživatelského ovládání. Snímek obrazovky níže ukazuje registraci uživatelského ovládání k výše uvedenému základnímu kódu.

Registrace uživatelských ovládacích prvků v 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>

Vysvětlení kódu:-

  1. Prvním krokem je registrace uživatelského ovládání webu. To zahrnuje níže uvedené základní parametry
    1. Klíčové slovo 'Registrovat' se používá k registraci webového uživatelského ovládání.
    2. Parametr src se používá k definování názvu ovládacího prvku, což je v našem případě Guru99Control.ascx.
    3. Tagname a Tagprefix jsou individuální názvy dané ovládacímu prvku. To je provedeno tak, aby mohli odkazovat na stránky HTML jako běžný ovládací prvek HTML.
  2. Dále odkazujeme na naše webové uživatelské ovládání pomocí TagPrefix:TagName, který byl přiřazen dříve. TagPrefix:TagName je indikátor toho, že chceme používat náš vlastní webový ovládací prvek. Když je stránka zpracována webovým serverem, můžete vidět, že jsme použili značku TWebControl:WebControl. Potom podle toho zpracuje 'Guru99Control'. V našem příkladu je to TWebControl:WebControl.
    1. Volitelné ID je přiděleno ovládacímu prvku „Záhlaví“. Obecně je dobrým zvykem přidělit ID ovládacímu prvku HTML.
    2. Nakonec atribut runat=server, takže ovládání poběží na webovém serveru. Pro všechny ovládací prvky ASP.Net je to výchozí atribut. Všechny ovládací prvky ASP.Net (včetně vlastních ovládacích prvků) musí být spuštěny na serveru. Jejich výstup je pak odeslán ze serveru klientovi a podle toho zobrazen v prohlížeči.

Když je nastaven výše uvedený kód a projekt je spuštěn pomocí Visual Studio. Získáte níže uvedený výstup.

Výstup:-

Registrace uživatelských ovládacích prvků v ASP.NET

Výstupní zpráva zobrazená v prohlížeči ukazuje, že uživatelská kontrola webu byla úspěšně provedena.

Globální registrace ovládacích prvků asp.net ve webovém konfiguračním souboru asp

Někdy můžete chtít použít uživatelské ovládací prvky na více stránkách v aplikaci .Net. V tomto okamžiku nechcete nadále registrovat uživatelské ovládací prvky na každé stránce ASP.Net.

  • V .Net můžete provést registraci v souboru 'web.config'.
  • Soubor web.config je společný konfigurační soubor používaný všemi webovými stránkami v projektu .Net.
  • Obsahuje potřebné konfigurační detaily pro webový projekt ASP.Net. Například jedna běžná konfigurace v souboru web.config je parametr cílového rámce.
  • Tento parametr se používá k identifikaci verze rozhraní .Net, kterou aplikace používá.

Níže je snímek výchozího kódu v souboru web.config. Zvýrazněná část je cílová rámcová část.

SOUVISEJÍCÍ ČLÁNKY

Globální registrace ovládacích prvků asp.net ve webové konfiguraci

Podívejme se, jak můžeme zaregistrovat náš Guru99Control v souboru web.config.

Krok 1) Dvojitým kliknutím na soubor otevřete soubor web.config z průzkumníka řešení.

Globální registrace ovládacích prvků asp.net ve webové konfiguraci

Když otevřete soubor web.config, můžete vidět níže uvedenou konfiguraci. Soubor 'web.config' je automaticky přidán aplikací Visual Studio při vytvoření projektu. Toto je základní konfigurace požadovaná pro správné fungování projektu ASP.Net.

Globální registrace ovládacích prvků asp.net ve webové konfiguraci

Krok 2) Nyní zaregistrujeme naši komponentu do souboru web.config. K tomu musíme přidat níže uvedené řádky.

Globální registrace ovládacích prvků asp.net ve webové konfiguraci

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

Registrace se skládá z níže uvedených dílčích kroků

  1. Přidejte značku s názvem . To znamená, že veškerá konfigurace ovládacích prvků bude použitelná pro všechny stránky ASP.Net v řešení.
  2. The tag znamená, že přidáváte konfiguraci pro uživatelský ovládací prvek.
  3. Poté zaregistrujeme uživatelský ovládací prvek s přídavnou značkou. Zbývající parametry tagPrefix, tagName a src zůstávají stejné jako dříve.

Krok 3) Nezapomeňte přejít na stránku 'demo.aspx' a odstranit řádky pro kontrolu, které měly registraci komponenty Guru99. Pokud tento krok neprovedete, bude soubor 'Guru99Control.ascx' a soubor spuštěn ze souboru 'demo.aspx' namísto souboru 'web.config'.

Globální registrace ovládacích prvků asp.net ve webové konfiguraci

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

Výše uvedený kód je nastaven a projekt je spuštěn pomocí sady Visual Studio. Získáte níže uvedený výstup.

Výstup:-

Globální registrace ovládacích prvků asp.net ve webové konfiguraci

Výstupní zpráva ukazuje, že uživatelská kontrola webu byla úspěšně provedena.

Přidání veřejných vlastností do webového ovládacího prvku

Vlastnost je pár klíč–hodnota přidružený k libovolnému ovládacímu prvku. Vezměme si příklad toho jednoduchého HTML tag. Snímek obrazovky, jak značka vypadá, je uveden níže.

Přidání veřejných vlastností do webového ovládacího prvku

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

Značka 'div' se používá k vytvoření sekce v dokumentu HTML. Značka 'div' má vlastnost zvanou vlastnost style. To lze použít k tomu, aby se textu zobrazenému v tagu div dal jiný styl. Normálně byste viděli kód pro značku div, jak je uvedeno níže.

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

Atribut barva tedy není nic jiného než pár klíč-hodnota, který poskytuje více informací o samotné značce. Ve výše uvedeném případě je název klíče 'style' a hodnota klíče je 'color:#0000FF'.

Podobně pro uživatelské ovládací prvky můžete vytvořit vlastní vlastnosti, které ovládací prvek popisují.

Vezměme si jednoduchý příklad a stavme na našem 'Guru99Control' vytvořeném v předchozích částech.

V našem příkladu přidáme jednoduchou celočíselnou vlastnost nazvanou MinValue. Tato hodnota by představovala minimální počet znaků v textu zobrazeném v uživatelském ovládacím prvku.

Proveďme níže uvedené kroky, abychom to uvedli na místo.

Krok 1) Otevřete soubor Guru99Control.ascx. Přidejte kód pro přidání vlastnosti MinValue.

Přidání veřejných vlastností do webového ovládacího prvku

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

Vysvětlení kódu:-

Atribut skriptu runat=server se používá k označení, že přidáváme nějaký specifický kód.Net a že je třeba jej spustit na webovém serveru.

To je nutné pro zpracování jakékoli vlastnosti přidané do uživatelského ovládacího prvku. Poté přidáme naši vlastnost MinValue a dáme jí výchozí hodnotu 0.

Krok 2) Nyní se podívejme na tuto vlastnost v našem souboru demo.aspx. Vše, co nyní děláme, je pouze odkazování na vlastnost MinValue a přiřazení nové hodnoty 100.

Přidání veřejných vlastností do webového ovládacího prvku

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

POZNÁMKA: – Když spustíte tento kód, nezobrazí se žádný výstup. Důvodem je, že výstup spadá pod limit 100 znaků.

Shrnutí

  • ASP.Net má schopnost vytvářet uživatelské ovládací prvky. Uživatelské ovládací prvky se používají k tomu, aby měl kód, který se v aplikaci používá vícekrát. Uživatelský ovládací prvek lze poté znovu použít v celé aplikaci.
  • Než bude možné uživatelský ovládací prvek použít, musí být zaregistrován na stránce ASP.Net.
  • Chcete-li používat uživatelské ovládání na všech stránkách v aplikaci, zaregistrujte ji do souboru web.config.
  • Vlastnosti lze také přidat do webového uživatelského ovládacího prvku.

Denní zpravodaj Guru99

Začněte svůj den s nejnovějšími a nejdůležitějšími zprávami o umělé inteligenci, které vám přinášíme právě teď.