Samouczek dotyczący formularzy sieci Web ASP.NET: przykłady kontrolek użytkownika

Przez: Jacob Lee Jacob Lee
Hours Zaktualizowano

W ASP.Net możliwe jest tworzenie kodu wielokrotnego użytku. Kod wielokrotnego użytku można wykorzystać w wielu miejscach, bez konieczności ponownego pisania kodu.

Kod wielokrotnego użytku pomaga zmniejszyć ilość czasu spędzanego przez programistę po napisaniu kodu. Można to zrobić raz i wykorzystać ponownie w wielu miejscach.

Utwórz kontrolę użytkownika w ASP.Net

ASP.Net ma możliwość tworzenia kontrolek internetowych. Te elementy sterujące zawierają kod, który można ponownie wykorzystać. Można go stosować w różnych aplikacjach zgodnie z wymaganiami.

Przyjrzyjmy się przykładowi, w jaki sposób możemy utworzyć kontrolkę użytkownika sieci Web w ASP.Net

W naszym przykładzie

  • Stworzymy kontrolę sieciową.
  • Zostanie on użyty do utworzenia komponentu nagłówka.
  • Będzie zawierał poniższy tekst.”Poradniki Guru99”Ten samouczek jest przeznaczony dla ASP.Net”

Pracujmy z naszą obecną aplikacją internetową stworzoną we wcześniejszych sekcjach. Wykonajmy poniższe kroki, aby utworzyć kontrolkę użytkownika sieci Web.

Krok 1) Pierwszym krokiem jest utworzenie kontrolki użytkownika sieci Web i dodanie jej do naszego rozwiązania Visual Studio.

Utwórz kontrolę użytkownika w ASP.Net

  1. Przejdź do Eksploratora rozwiązań w programie Visual Studio i kliknij prawym przyciskiem myszy rozwiązanie DemoApplication
  2. Wybierz z menu opcję Dodaj->Nowy element

Krok 2) W kolejnym kroku musimy wybrać opcję utworzenia kontrolki użytkownika sieciowego

Utwórz kontrolę użytkownika w ASP.Net

  1. W oknie dialogowym projektu możemy zobaczyć różne opcje tworzenia różnych typów komponentów. Kliknij opcję „Web” po lewej stronie.
  2. Kiedy klikniemy opcję „Sieć”, zobaczysz opcję „Kontrola użytkownika formularzy internetowych”. Kliknij tę opcję.
  3. Następnie nadajemy nazwę kontroli internetowej „Guru99Control”.
  4. Na koniec kliknij przycisk „Dodaj”, aby program Visual Studio dodał kontrolkę użytkownika internetowego do naszego rozwiązania.

Zobaczysz, że do rozwiązania dodano „Guru99Control”.

Utwórz kontrolę użytkownika w ASP.Net

Krok 4) Teraz czas dodać niestandardowy kod do kontrolki użytkownika sieci Web. Nasz kod będzie oparty na czystej składni HTML. Dodaj następujący kod do pliku 'Guru99Control.ascx'

Utwórz kontrolę użytkownika w ASP.Net

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

Wyjaśnienie kodu: -

  1. W naszym pliku kontroli sieci najpierw tworzymy element tabeli. Będzie to używane do przechowywania 2 wierszy tekstu, który będzie używany do wyświetlania
  • „Poradniki Guru99” i
  • „Ten samouczek jest przeznaczony dla ASP.Net.”
  1. Następnie definiujemy nasz pierwszy wiersz tabeli i umieszczamy tekst jako „Poradniki Guru99”.
  2. Następnie definiujemy drugi wiersz tabeli i umieszczamy tekst „Ten samouczek jest przeznaczony dla ASP.Net”.

UWAGA: Teraz nie możemy wykonać tego kodu i wyświetlić wyniku. Jedynym sposobem sprawdzenia, czy to działa, jest włączenie go do naszej aplikacji (plik aspx). Zobaczymy to w kolejnym temacie.

Rejestrowanie kontroli użytkownika w formularzach internetowych ASP.NET

W poprzedniej sekcji zobaczyliśmy, jak możemy utworzyć niestandardową kontrolkę internetową. Można jej użyć do wyświetlenia następujących dwóch wierszy w formularzu internetowym

  • „Poradniki Guru99”
  • „Ten samouczek jest przeznaczony dla ASP.Net.”

Po utworzeniu niestandardowej „kontrolki” musimy jej użyć w naszej aplikacji internetowej. Pierwszym krokiem jest zarejestrowanie komponentu w naszej aplikacji (Demo.aspx). Jest to warunek wstępny użycia w dowolnej niestandardowej kontrolce internetowej w aplikacji ASP.Net.

Rejestrowanie kontroli użytkownika w ASP.NET

Przyjrzyjmy się, jak możemy to osiągnąć. Poniższe kroki stanowią kontynuację poprzedniej sekcji. W poprzedniej sekcji stworzyliśmy naszą niestandardową kontrolkę. W tej sekcji użyjemy kontrolki w naszym Demo.aspx formularz internetowy.

Najpierw zarejestrujemy naszą niestandardową „kontrolę” w pliku Demo.aspx.

Krok 1) Upewnij się, że pracujesz nad plikiem demo.aspx. To właśnie w tym pliku zostanie zarejestrowana kontrolka użytkownika sieci web. Można to zrobić, klikając dwukrotnie plik demo.aspx w eksploratorze rozwiązań swojego rozwiązania .Net.

Rejestrowanie kontroli użytkownika w ASP.NET

Po dwukrotnym kliknięciu formularza prawdopodobnie zobaczysz poniższy kod w formularzu. Jest to domyślny kod dodawany przez Visual Studio, gdy formularz internetowy jest dodawany do projektu ASP.Net.

Domyślny kod składa się z kroków, które są wymagane, aby formularz mógł działać jako formularz internetowy ASP.Net w przeglądarce.

Rejestrowanie kontroli użytkownika w ASP.NET

Krok 2) Dodajmy teraz nasz kod, aby zarejestrować kontrolę użytkownika. Poniższy zrzut ekranu przedstawia rejestrację kontroli użytkownika do powyższego kodu podstawowego.

Rejestrowanie kontroli użytkownika w 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>

Wyjaśnienie kodu: -

  1. Pierwszym krokiem jest zarejestrowanie kontroli użytkownika sieciowego. Obejmuje to poniższe podstawowe parametry
    1. Słowo kluczowe „Register” służy do rejestrowania kontroli użytkownika sieciowego.
    2. Parametr src służy do zdefiniowania nazwy kontrolki, która w naszym przypadku to Guru99Control.ascx.
    3. Zmienna i przedrostek znacznika są indywidualnymi nazwami nadawanymi kontrolce. Odbywa się to tak, że mogą one zawierać odniesienia na stronach HTML jako normalny element sterujący HTML.
  2. Następnie odwołujemy się do naszej kontrolki użytkownika sieci Web poprzez TagPrefix:TagName, który został przypisany wcześniej. TagPrefix:TagName wskazuje, że chcemy używać naszej niestandardowej kontroli internetowej. Kiedy strona jest przetwarzana przez serwer WWW, widać, że użyliśmy tagu TWebControl:WebControl. Następnie odpowiednio przetworzy „Guru99Control”. W naszym przykładzie jest to TWebControl:WebControl.
    1. Opcjonalny identyfikator jest nadawany kontrolce „Nagłówka”. Ogólnie dobrą praktyką jest nadawanie identyfikatora kontrolce HTML.
    2. Na koniec atrybut runat=server, aby kontrolka działała na serwerze internetowym. Dla wszystkich kontrolek ASP.Net jest to domyślny atrybut. Wszystkie kontrolki ASP.Net (w tym kontrole niestandardowe) muszą być uruchamiane na serwerze. Ich dane wyjściowe są następnie wysyłane z serwera do klienta i odpowiednio wyświetlane w przeglądarce.

Gdy powyższy kod jest ustawiony, a projekt jest wykonywany przy użyciu visual Studio. Otrzymasz poniższe dane wyjściowe.

Wynik:-

Rejestrowanie kontroli użytkownika w ASP.NET

Komunikat wyjściowy wyświetlany w przeglądarce informuje, że kontrolka użytkownika została pomyślnie wykonana.

Globalne rejestrowanie elementów sterujących asp.net w pliku konfiguracyjnym konfiguracji internetowej asp

Czasami można chcieć użyć elementów sterujących użytkownika na wielu stronach aplikacji .Net. W tym momencie nie chcesz już rejestrować kontrolek użytkownika na każdej stronie ASP.Net.

  • W .Net możesz dokonać rejestracji w pliku 'web.config'.
  • Plik web.config jest powszechnym plikiem konfiguracyjnym używanym przez wszystkie strony internetowe w projekcie .Net.
  • Zawiera niezbędne szczegóły konfiguracji dla projektu internetowego ASP.Net. Na przykład jedną z typowych konfiguracji w pliku web.config jest docelowy parametr struktury.
  • Parametr ten służy do identyfikacji wersji frameworku .Net używanej przez aplikację.

Poniżej znajduje się migawka domyślnego kodu w pliku web.config. Podświetlona część to docelowa część szkieletu.

POWIĄZANE ARTYKUŁY

Rejestrowanie formantów asp.net globalnie w konfiguracji internetowej

Zobaczmy jak możemy zarejestrować nasz Guru99Control w pliku web.config.

Krok 1) Otwórz plik web.config w Eksploratorze rozwiązań, klikając go dwukrotnie.

Rejestrowanie formantów asp.net globalnie w konfiguracji internetowej

Po otwarciu pliku web.config możesz zobaczyć poniższą konfigurację. Plik 'web.config' jest automatycznie dodawany przez program Visual Studio podczas tworzenia projektu. Jest to podstawowa konfiguracja wymagana do prawidłowego działania projektu ASP.Net.

Rejestrowanie formantów asp.net globalnie w konfiguracji internetowej

Krok 2) Zarejestrujmy teraz nasz komponent w pliku web.config. W tym celu musimy dodać poniższe linie.

Rejestrowanie formantów asp.net globalnie w konfiguracji internetowej

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

Rejestracja składa się z poniższych podetapów

  1. Dodaj tag o nazwie . Oznacza to, że cała konfiguracja kontrolek będzie miała zastosowanie do wszystkich stron ASP.Net w rozwiązaniu.
  2. The tag oznacza, że ​​dodajesz konfigurację dla kontrolki użytkownika.
  3. Następnie rejestrujemy kontrolę użytkownika za pomocą dodatkowego tagu. Pozostałe parametry tagPrefix, tagName i src pozostają takie same jak poprzednio.

Krok 3) Pamiętaj, aby przejść na stronę „demo.aspx” i usunąć linie kontroli, które zawierały rejestrację komponentu Guru99. Jeśli nie wykonasz tego kroku, plik „Guru99Control.ascx” zostanie wykonany z pliku „demo.aspx” zamiast z pliku „web.config”.

Rejestrowanie formantów asp.net globalnie w konfiguracji internetowej

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

Powyższy kod jest ustawiony, a projekt jest wykonywany za pomocą Visual Studio. Otrzymasz poniższy wynik.

Wynik:-

Rejestrowanie formantów asp.net globalnie w konfiguracji internetowej

Komunikat wyjściowy pokazuje, że kontrola użytkownika WWW została pomyślnie wykonana.

Dodawanie właściwości publicznych do kontrolki internetowej

Właściwość to para klucz-wartość powiązana z dowolną kontrolką. Weźmy przykład prosty Znacznik HTML. Zrzut ekranu przedstawiający wygląd tagu pokazano poniżej.

Dodawanie właściwości publicznych do kontrolki internetowej

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

Tag 'div' służy do tworzenia sekcji w dokumencie HTML. Tag 'div' ma właściwość zwaną style property. Może być ona używana do nadawania innego stylu tekstowi wyświetlanemu w tagu div. Normalnie kod tagu div jest pokazany poniżej.

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

Zatem atrybut koloru to nic innego jak para klucz-wartość, która dostarcza więcej informacji o samym tagu. W powyższym przypadku nazwa klucza to „styl”, a wartość klucza to „kolor:#0000FF”.

Podobnie w przypadku kontrolek użytkownika można utworzyć własne właściwości opisujące formant.

Weźmy prosty przykład i oprzyjmy się na naszym „Guru99Control” utworzonym we wcześniejszych sekcjach.

W naszym przykładzie dodamy prostą właściwość całkowitą o nazwie MinValue. Ta wartość będzie reprezentować minimalną liczbę znaków w tekście wyświetlanym w kontrolce użytkownika.

Wykonajmy poniższe kroki, aby to wdrożyć.

Krok 1) Otwórz plik Guru99Control.ascx. Dodaj kod umożliwiający dodanie właściwości MinValue.

Dodawanie właściwości publicznych do kontrolki internetowej

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

Wyjaśnienie kodu: -

Atrybut skryptu runat=server służy do wskazania, że ​​dodajemy jakiś specyficzny kod .Net i że należy go uruchomić na serwerze WWW.

Jest to wymagane do przetwarzania dowolnej właściwości dodanej do kontrolki użytkownika. Następnie dodajemy naszą właściwość MinValue i nadajemy jej domyślną wartość 0.

Krok 2) Teraz odwołajmy się do tej właściwości w naszym pliku demo.aspx. Jedyne, co teraz robimy, to po prostu odwołujemy się do właściwości MinValue i przypisujemy nową wartość 100.

Dodawanie właściwości publicznych do kontrolki internetowej

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

UWAGA: – Po uruchomieniu tego kodu nie zostaną wyświetlone żadne dane wyjściowe. Dzieje się tak dlatego, że wynik nie przekracza limitu 100 znaków.

Podsumowanie

  • ASP.Net ma możliwość tworzenia kontrolek użytkownika. Kontrole użytkownika służą do posiadania kodu, który jest używany wielokrotnie w aplikacji. Kontrolę użytkownika można następnie ponownie wykorzystać w całej aplikacji.
  • Formant użytkownika musi zostać zarejestrowany na stronie ASP.Net, zanim będzie można go użyć.
  • Aby korzystać z kontroli użytkownika na wszystkich stronach aplikacji, zarejestruj ją w pliku web.config.
  • Właściwości można również dodać do kontrolki użytkownika sieci Web.