ASP.NET veebivormide õpetus: kasutaja juhtelementide näited

ASP.Netis on võimalik luua korduvkasutatavat koodi. Taaskasutatavat koodi saab kasutada paljudes kohtades, ilma et oleks vaja koodi uuesti kirjutada.

Korduvkasutatav kood aitab vähendada arendaja aega pärast koodi kirjutamist. Seda saab teha üks kord ja kasutada mitmes kohas.

Looge kasutajakontroll ASP.Netis

ASP.Net suudab luua veebikontrolle. Need juhtelemendid sisaldavad koodi, mida saab taaskasutada. Seda saab vastavalt vajadusele kasutada kogu rakenduses.

Vaatame näidet, kuidas ASP.Netis veebikasutaja juhtelementi luua.

Meie näites:

• Loome veebikontrolli.
• Seda kasutatakse päisekomponendi loomiseks.
• See sisaldab allpool mainitud teksti: „Guru99 õpetust” ja „See õpetus on mõeldud ASP.Neti jaoks”.

Töötame oma praeguse veebirakendusega, mis on loodud varasemates jaotistes. Järgime veebikasutaja juhtelemendi loomiseks alltoodud samme.

Step 1) Esimene samm on luua veebikasutaja juhtelement ja lisada see meie Visual Studio lahendusse.

1. Minge Visual Studio lahenduste otsijasse ja paremklõpsake DemoApplication lahendusel.
2. Vali menüüpunkt Lisa -> Uus element.

Step 2) Järgmises etapis peame valima veebikasutaja juhtimise loomise valiku.

1. Projekti dialoogiboksis näeme erinevaid võimalusi erinevat tüüpi komponentide loomiseks. Klõpsake vasakus servas valikut "Veeb".
2. Kui klõpsame valikul „Veeb“, näete valikut „Veebivormide kasutajakontroll“. Klõpsake seda valikut.
3. Seejärel anname veebikontrollile nime, „Guru99Kontroll”.
4. Lõpuks klõpsake nuppu "Lisa", et lasta Visual Studiol lisada meie lahendusele veebikasutaja juhtimine.

Seejärel näete teksti „GuruLahendusele lisati „99Control”.

Step 3) Nüüd on aeg lisada kohandatud kood veebikasutaja juhtelemendile. Meie kood põhineb puhtal HTML-i süntaksil. Lisage järgmine kood reale 'Guru99Control.ascx' faili.

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

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

Code Selgitus:-

1. Meie veebikontrolli failis loome esmalt tabeli elemendi. Seda kasutatakse kahe tekstirea hoidmiseks, mis kuvavad „Guru99 õpetust” ja „See õpetus on mõeldud ASP.Neti jaoks.”
2. Järgmisena defineerime oma esimese tabeli rea ja paneme teksti kujule „Guru99 õpetust.
3. Seejärel määratleme oma teise tabelirea ja paneme tekstiks "See õpetus on mõeldud ASP.Neti jaoks".

MÄRKUS: Nüüd ei saa me seda koodi käivitada ja väljundit kuvada. Ainus viis selle toimimise kontrollimiseks on see meie rakendusse (aspx-fail) lisada. Seda näeme järgmises teemas.

Kasutajakontrollide registreerimine ASP.NET veebivormil

Eelmises osas nägime, kuidas luua kohandatud veebikontrolli. Seda saab kasutada veebivormil järgmiste kahe rea kuvamiseks:

• "Guru99 õpetust
• "See õpetus on ASP.Neti jaoks."

Kui kohandatud „juhtelement” on loodud, peame seda oma veebirakenduses kasutama. Esimene samm on komponendi registreerimine meie rakenduses (Demo.aspx). See on eeltingimus mis tahes kohandatud veebijuhtelemendi kasutamiseks ASP.Net-i rakenduses.

Vaatame, kuidas me seda saavutada saame. Allolevad sammud on eelmise jaotise jätk, kus me lõime oma kohandatud juhtelemendi. Selles jaotises kasutame seda juhtelementi oma Demo.aspx veebivorm. Esmalt registreerime oma kohandatud juhtelemendi faili Demo.aspx.

Step 1) Veenduge, et töötate failiga demo.aspx. Veebikasutaja juhtelement registreeritakse just selles failis. Seda saab teha, topeltklõpsates failil demo.aspx oma .Net-lahenduse lahenduste brauseris.

Kui olete vormil topeltklõpsanud, näete vormil tõenäoliselt allolevat koodi. See on Visual Studio poolt ASP.Net projektile veebivormi lisamisel lisatud vaikekood. Vaikimisi kood koosneb sammudest, mis on vajalikud vormi brauseris ASP.Net veebivormina töötamiseks.

Step 2) Nüüd lisame oma koodi kasutajakontrolli registreerimiseks. Allolev ekraanipilt näitab ülaltoodud põhikoodile lisatud kasutajakontrolli registreerimist.

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

1. Esimene samm on veebikasutaja juhtimise registreerimine. See hõlmab järgmisi põhiparameetreid:
   1. Märksõna 'Registreeri' kasutatakse veebikasutaja kontrolli registreerimiseks.
   2. Src parameetrit kasutatakse juhtelemendi nime määratlemiseks, mis meie puhul on Guru99Control.ascx.
   3. TagName ja TagPrefix on juhtelemendile antud individuaalsed nimed. Seda tehakse selleks, et neile saaks HTML-lehtedel viidata nagu tavalisele HTML-juhtelemendile.
2. Järgmisena viitame oma veebikasutaja juhtimisele TagPrefix:TagName kaudu, mis määrati varem. TagPrefix:TagName näitab, et soovime kasutada oma kohandatud veebijuhtimist. Kui veebiserver lehte töötleb, näete, et oleme kasutanud TWebControl:WebControl silti. Seejärel töötleb see 'Guru99Control' vastavalt.
   1. „Päise“ juhtelemendile antakse valikuline ID. Üldiselt on hea tava anda HTML-juhtelemendile ID.
   2. Lõpuks tagab atribuut runat="server", et juhtelement töötab veebiserveris. Kõigi ASP.Net juhtelementide puhul on see vaikeseade. Kõik ASP.Net juhtelemendid (sh kohandatud juhtelemendid) peavad töötama serveris. Seejärel saadetakse nende väljund serverist kliendile ja kuvatakse vastavalt brauseris.

Kui ülaltoodud kood on määratud ja projekt käivitatakse kasutades Visual Studio, saate alloleva väljundi.

Väljund:-

Brauseris kuvatav väljundteade näitab, et veebikasutaja juhtimine on edukalt täidetud.

ASP.Neti juhtelementide globaalne registreerimine web.config konfiguratsioonifailis

Mõnikord võib tekkida soov kasutada kasutajakontrolle .Net-rakenduse mitmel lehel. Sel hetkel ei ole soovitatav kasutajakontrolle igale ASP.Net-lehele registreerida.

• .Netis saate registreerida failis 'web.config'.
• Web.config fail on tavaline konfiguratsioonifail, mida kasutavad kõik .Net projekti veebilehed.
• See sisaldab ASP.Neti veebiprojekti jaoks vajalikke konfiguratsiooni üksikasju. Näiteks üks levinud konfiguratsioon failis web.config on sihtraamistiku parameeter.
• Seda parameetrit kasutatakse rakenduse kasutatava .Neti raamistiku versiooni tuvastamiseks.

Allpool on hetktõmmis faili web.config vaikekoodist. Esiletõstetud osa on sihtraamistiku osa.

Vaatame, kuidas me saame oma Guru99Control failis web.config.

Step 1) Avage fail web.config lahenduste brauserist, topeltklõpsates failil.

Kui avate faili web.config, võite näha allolevat konfiguratsiooni. Visual Studio lisab projekti loomisel faili web.config automaatselt. See on ASP.Neti projekti nõuetekohaseks toimimiseks vajalik põhikonfiguratsioon.

Step 2) Nüüd registreerime oma komponendi failis web.config. Selleks peame lisama allolevad read.

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

Registreerimine hõlmab järgmisi alaetappe:

1. Lisa silt nimega . See tähendab, et kogu juhtelementide konfiguratsioon on rakendatav lahenduse kõikidele ASP.Neti lehtedele.
2. The silt tähendab, et lisate kasutaja juhtimise konfiguratsiooni.
3. Seejärel registreerime kasutajakontrolli lisasildiga. Ülejäänud parameetrid tagPrefix, tagName ja src jäävad samaks.

Step 3) Ärge unustage minna lehele 'demo.aspx' ja eemaldada selle juhtelemendi read, millel oli registreering Guru99 komponent. Kui te seda sammu ei soorita, siis 'GuruFaili '99Control.ascx' käivitatakse failist 'demo.aspx', mitte failist '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>

Kui ülaltoodud kood on seatud ja projekt Visual Studio abil käivitatud, saate alloleva väljundi.

Väljund:-

Väljundsõnum näitab, et veebikasutaja juhtelement on edukalt täidetud.

Avalike atribuutide lisamine veebijuhtelemendile

Omadus on võtme-väärtuse paar, mis on seotud mis tahes juhtelemendiga. Võtame lihtsa näite HTML-märgend. Märgendi välimuse ekraanipilt on näidatud allpool.

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

		Demo Form

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

Märgendit „div” kasutatakse HTML-dokumendis jaotise loomiseks. Märgendil „div” on atribuut, mida nimetatakse stiili atribuudiks. Seda saab kasutada märgendis div kuvatavale tekstile erineva stiili andmiseks. Tavaliselt näete div-märgendi koodi, nagu allpool näidatud.

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

Seega pole atribuut color midagi muud kui võtme-väärtuse paar, mis annab rohkem teavet sildi enda kohta. Ülaltoodud juhul on võtme nimi "style" ja võtme väärtus "color:#0000FF".

Samamoodi saate kasutaja juhtelementide jaoks luua oma atribuudid, mis kirjeldavad juhtelementi.

Võtame lihtsa näite ja tugineme oma järeldustele.Guru99Control', mis loodi eelmistes osades. Meie näites lisame lihtsa täisarvulise atribuudi nimega MinValue. See väärtus tähistaks kasutajakontrollis kuvatava teksti minimaalset tähemärkide arvu.

Teeme selle paika saamiseks alltoodud toimingud.

Step 1) avage Guru99Control.ascx fail. Lisage kood MinValue atribuudi lisamiseks.

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

Skripti atribuut runat="server" näitab, et lisame .Net-spetsiifilist koodi ja et see tuleb veebiserveris käivitada. See on vajalik kasutajakontrolli lisatud atribuudi töötlemiseks. Seejärel lisame oma atribuudi MinValue ja anname sellele vaikeväärtuseks 0.

Step 2) Nüüd viitame sellele omadusele meie failis demo.aspx. Kõik, mida me praegu teeme, on vaid MinValue atribuudile viitamine ja uue väärtuse 100 määramine.

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

MÄRKUS: Selle koodi käivitamisel ei kuvata mingit väljundit. Seda seetõttu, et väljund jääb alla 100 tähemärgi piirangu.

KKK