Pregled korisničkih kontrola ili prilagođenih kontrola

Primenjuje se na: ASP.NET

ASP.NET podrška za govornu kolonu


Pregled korisničkih kontrola ili prilagođenih kontrola

Da biste prilagodili ovu kolonu vašim potrebama, želimo da vas pozivamo da prosledite svoje ideje o temama koje vas zanimaju i pitanja koja želite da vidite u budućim člancima u bazi znanja i podržite glasovne kolone. Možete da prosledite svoje ideje i povratne informacije koristeći ga za obrazac. Na dnu ove kolone postoji i veza do obrasca.

Uvod


Zdravo! Ovo je Parag, i ja sam inženjer za podršku koji radi sa grupom za podršku za Microsoft ASP.NET više od godinu dana. Pre pridruživanja korporaciji Microsoft, radio sam na Web projektima i na Desktop aplikacijama koje koriste Microsoft tehnologije. Uz kvalitetnu podršku potrošačima, video sam slučajeve u kojima je postojala neka konfuzija oko prilagođenih kontrola, a ja bih samo želela da vam objasnim neke koncepte oko prilagođenih kontrola. Tako loše kao što izgleda, veruj mi, jednom kad se izdržite, bićete u boljoj poziciji da cenimo ASP.NET.

Pregled

U ovom mesecu, Razmotriću sledeće teme:
  • Šta su to korisničke kontrole?
  • Šta su to prilagođene kontrole?
  • Koje su osnovne razlike između korisničkih kontrola i prilagođenih kontrola?
Takođe ću predstaviti nekoliko naprednih tema koje se tiču prilagođenih kontrola, kao što su upravljanje stanjem i prikazivanje prilagođenih kontrola.

Šta su to korisničke kontrole?

Korisničke kontrole su prilagođene, kontrole koje se mogu ponovo koristiti i koriste iste tehnike koje su zaposlene u HTML i Web server kontrolama. Oni nude lak način za podelu i ponovnu upotrebu uobičajenih korisničkih interfejsa preko ASP.NET Web aplikacija. Koriste iste programske modele za Web obrasce na kojima radi stranica Web obrazaca. Za više detalja o programskom modelu Web obrazaca posetite sledeće Microsoft Developer Network (MSDN) Web lokacije:

Kako se kreira kontrola korisnika

Sintaksa koju koristite za kreiranje korisničke kontrole slična je sintaksi koju koristite za kreiranje stranice Web obrazaca (. aspx). Jedina razlika je u tome što kontrola korisnika ne sadrži < HTML >, < telo > i < obrazac > obrasca pošto se na stranici Web obrazaca nalazi funkcija "kontrola korisnika". Da biste kreirali kontrolu korisnika, sledite ove korake:
  1. Otvorite neki tekstualni ili HTML uređivač i kreirajte blok sa serverskog kôda koji će otkrivajući sva svojstva, metode i događaje.
    <script language="C#" runat="server">   public void button1_Click(object sender, EventArgs e)   {      label1.Text = "Hello World!!!";   }</script>
  2. Kreirajte korisnički interfejs za kontrolu korisnika.
    <asp:Label id="label1" runat="server"/> <br><br><asp:button id="button1" text="Hit" OnClick="button1_Click" runat="server" />

Korišćenje kontrole korisnika na stranici Web obrazaca

  1. Kreirajte novu stranicu Web obrazaca (. aspx) u programu Microsoft Visual Studio .NET 2002, Microsoft Visual Studio .NET 2003, Microsoft Visual Studio 2005 ili bilo koji uređivač teksta.
  2. Prijavite direktivu za @ REGISTER . Na primer, koristite sledeći kôd.
    <%@ Register TagPrefix="UC" TagName="TestControl" Src="test.ascx" %>
    Belešku Pretpostavimo da se korisnička kontrola i stranica Web obrazaca nalaze na istoj lokaciji.
  3. Da biste koristili kontrolu korisnika na stranici Web obrazaca, koristite sledeći kôd posle direktive @ REGISTER .
    <html>    <body>          <form runat="server">               <UC:TestControl id="Test1" runat="server"/>          </form>    </body>  </html>

Uputstvo za programsko kreiranje instance korisničke kontrole u kodu iza datoteke Web obrazaca

Prethodni primer je deklarativno upravljao kontrolu korisnika na stranici Web obrazaca pomoću direktive @ REGISTER . Međutim, možete da kreirate dinamički kontrolu korisnika i da je dodate na stranicu. Evo koraka za to:
  1. Kreirajte novu stranicu Web obrazaca u programu Visual Studio.
  2. Krećite se do koda iza koje je generisana ova stranica Web obrazaca.
  3. U Page_Load događaj klase stranice napišite sledeći kôd.
    // Load the control by calling LoadControl on the page class.Control c1 = LoadControl("test.ascx");            // Add the loaded control in the page controls collection.Page.Controls.Add(c1);
    Belešku Kontrolu korisnika možete da dodate dinamički na određenim događajima na stranici "ciklus životnog ciklusa". Za više informacija posetite sledeće Web lokacije:

Kako se obrađuje kontrola korisnika

Kada se zahteva stranica sa kontrolom korisnika, desiće se sledeće:
  • Raščlanjivač stranice raščlanjuje. ascx datoteku navedenu u datoteci src u direktivu za @ REGISTER i generiše klasu koja potiče iz sistemskog. Web. UI. klasa UserControl .
  • Analizator zatim dinamički sastavlja klasu u skupštini.
  • Ako koristite Visual Studio, a zatim samo na vreme dizajniranja, Visual Studio kreira kôd iza datoteke za kontrolu korisnika, a datoteku je prekompio samu dizajner.
  • Na kraju, klasa korisničke kontrole, koja se generiše kroz proces generisanja dinamičnog koda i kompilacije, uključuje kôd za kôd iza datoteke (. ascx.cs), kao i kôd koji je napisan unutar. ascx datoteke.

Šta su to prilagođene kontrole?

Prilagođene kontrole su prevedeni komponente koda koje se obavljaju na serveru, otkrivaju objektni model i prikazuju tekst naznaka, kao što je HTML ili XML, kao normalan veb obrazac ili kontrola korisnika.

Kako odabrati osnovnu klasu za prilagođenu kontrolu

Da biste napisali prilagođenu kontrolu, trebalo bi da direktno ili indirektno kreirate novu klasu iz sistemskog. Web. UI. klasa kontrole ili iz sistema. Web. UI. Webcontrol. Veb kontrole. webkontrolni klasa:
  • Trebalo bi da potiču iz sistema System. Web. UI kontrola ako želite da kontrola prikaže nevizuelne elemente. Na primer, < meta > i < > predstavljaju primere nevizuelnog vizuelizacije.
  • Trebalo bi da potiču iz sistema System. Web. UI. Webkontrole. WebControl ako želite da kontrola prikaže HTML koji generiše vizuelni interfejs na klijentskom računalu.
Ako želite da promenite funkcionalnost postojećih kontrola, kao što je dugme ili oznaka, možete direktno da se poslužite novom klasom sa ovim postojećim klasama i da promenite njihovo podrazumevano ponašanje.Ukratko, Kontrolna klasa obezbeđuje osnovnu funkcionalnost pomoću koje možete da je smestite u stablo kontrole za klasu stranice . Klasa Webcontrol -a dodaje funkcionalnost osnovnoj klasi kontrole za prikazivanje vizuelnog sadržaja na klijentskom računalu. Na primer, možete da upotrebite klasu Webcontrol da biste kontrolisali izgled i stilove kroz svojstva kao što su font, boja i visina.

Kako stvoriti i koristiti jednostavnu prilagođenu kontrolu koja se proteže od sistema System. Web. UI kontrola pomoću programa Visual Studio

  1. Pokrenite Visual Studio.
  2. Kreirajte projekat biblioteke klasa i dajte mu ime, na primer, prilagodite.
  3. Dodajte izvornu datoteku u projekat, na primer SimpleServerControl.cs.
  4. Uključite i referencu na sistem. prostor za ime na Webu u odeljku "reference".
  5. Proverite da li su sledeći prostori za imena uključeni u SimpleServerControl.cs datoteku.
    SystemSystem.CollectionsSystem.ComponentModelSystem.DataSystem.WebSystem.Web.SessionStateSystem.Web.UISystem.Web.UI.WebControls
  6. Nasledi klasu " Pojednostaviverkontrola " sa klasom kontrole .
    public class SimpleServerControl : Control
  7. Zamenite način prikazivanja da biste zapisali izlaz u izlazni tok.
    protected override void Render(HtmlTextWriter writer) { writer.Write("Hello World from custom control");}
    Belešku Klasa " Htmltextwriter " ima FUNKCIONALNOST pisanja HTML-a u tok teksta. Način pisanja klase Htmltextwričera izlazi navedeni tekst u tok za HTTP odgovor i isti je kao odgovor. način pisanja .
  8. Kompajlirate projekat biblioteke klasa. Generiraće DLL izlaz.
  9. Otvorite postojeći ili kreirajte novi projekat ASP.NET Web aplikacije.
  10. Dodajte stranicu sa Web obrascima na kojoj se može koristiti prilagođena kontrola.
  11. Dodajte referencu u biblioteku klasa u odeljku "reference" u projektu ASP.NET.
  12. Registrujte prilagođenu kontrolu na stranici Web obrazaca.
    <%@ Register TagPrefix="CC " Namespace=" CustomServerControlsLib " Assembly="CustomServerControlsLib " %>
  13. Da biste na stranici "Web obrasci" ponovo uradili ili koristili prilagođenu kontrolu, u < obrasca > oznake dodajte sledeći red koda.
    <form id="Form1" method="post" runat="server">    <CC:SimpleServerControl id="ctlSimpleControl" runat="server">    </CC:SimpleServerControl ></form>
    Belešku U ovom kodu, Pojednostavijeservercontrol je ime kontrolne klase unutar biblioteke klasa.
  14. Pokrenite stranicu "Web obrasci" i videćete izlaz iz prilagođene kontrole.
Ako ne koristite Visual Studio, potrebno je da izvršite sledeće korake:
  1. Otvorite bilo koji uređivač teksta.
  2. Kreirajte datoteku pod imenom SimpleServerControl.cs i napišite kôd kao što je dato u koracima od 1 do 14.
  3. U promenljivoj PUTANJI dodajte sledeću putanju:
    c:\windows (winnt)\Microsoft.Net\Framework\v1.1.4322
  4. Pokrenite komandnu liniju i idite na lokaciju na kojoj je SimpleServerControl.cs prisutan.
  5. Pokrenite sledeću komandu:
    CSC/t: biblioteka/out: prilagodite Serverkontrolisano Slib. Pojednostaviervercontrol. dll/r: sistem. dll/r: System. Web. dll SimpleServerControl.cs
    Za više informacija o programu C# complera (CSC. exe) posetite sledeću MSDN Web lokaciju:
  6. Da biste pokrenuli prilagođenu kontrolu na stranici Web obrazaca, postupite na sledeći način:
    1. Kreirajte imenik ispod fascikle wwvot.
    2. Pokrenite Microsoft Internet Information Services (IIS) Manager i označite novi direktorijum kao virtuelni korijenski direktorijum.
    3. Kreirajte fasciklu regala u okviru novog direktorijuma.
    4. Kopirajte prilagođenu DLL kontrolu u fasciklu "regal".
    5. Postavite stranicu uzorka Web obrazaca koju ste kreirali u prethodnim koracima unutar novog direktorijuma.
    6. Pokrenite probnu stranicu iz IIS Manager.
Pošto ste izgradili jednostavnu prilagođenu kontrolu, pogledajmo kako da razotkrijemo svojstva i na toj prilagođenoj kontroli primenite atribute vremena dizajniranja.

Kako da otkrijete svojstva na prilagođenoj kontroli

Ja ću graditi prethodni primer i predstaviti neka svojstva koja se mogu konfigurisati prilikom korišćenja prilagođene kontrole na stranici Web obrazaca.Sledeći primer prikazuje kako se definiše svojstvo koje će poruke iz kontrole prikazivati određeni broj puta, kao što je navedeno u svojstvu kontrole:
  1. Otvorite SimpleServerControl.cs u uređivaču teksta.
  2. Dodavanje svojstva u klasu " Pojednostavivercontrol ".
    public class SimpleServerControl : Control{   private int noOfTimes;   public int NoOfTimes   {       get { return this.noOfTimes; }       set { this.noOfTimes = value; }   }    protected override void Render (HtmlTextWriter writer)   {     for (int i=0; i< NoOfTimes; i++)     {       write.Write("Hello World.."+"<BR>");     }    }}
  3. Sastavljanje prilagođene kontrole
  4. Dodajte novo svojstvo u deklaraciju kontrole da biste koristili prilagođenu kontrolu na stranici Web obrazaca.
    <CC:SimpleServerControl id="ctlSimpleControl" NoOfTimes="5" runat="server"></CC:SimpleServerControl>
  5. Pokretanje stranice će prikazati poruku "Zdravo svet" iz prilagođene kontrole onoliko puta koliko je navedeno u svojstvu kontrole.

Primena atributa za dizajniranje vremena na prilagođenoj kontroli

Zašto su potrebni atributi za dizajniranje vremena
Prilagođena kontrola koju ste izgradili u prethodnom primeru funkcioniše na očekivani način. Međutim, ako želite da koristite tu kontrolu u programu Visual Studio, možda ćete želeti da svojstvo " Nooftimes " bude automatski istaknuto u prozoru "Svojstva" svaki put kada je prilagođena kontrola izabrana u vreme dizajniranja.Da biste to učinili, potrebno je da obezbedite informacije o metapodacima u Visual Studio, koje možete da uradite pomoću funkcije u programu Visual Studio "atributi". Atributi mogu da definišu klasu, metod, svojstvo ili polje. Kada Visual Studio učita klasu prilagođene kontrole, on proverava da li postoje atributi koji su definisani u klasi, metodu, svojstvu ili nivou polja i u skladu sa tim menja ponašanje prilagođene kontrole na vreme dizajniranja.Da biste pronašli više informacija o atributima, posetite sledeću MSDN Web lokaciju:Izgradimo uzorak koji koristi najčešće korišćene atribute:
  1. Otvorite SimpleServerControl.cs u uređivaču teksta.
  2. Predstavite neke osnovne atribute na nivou klase, na primer, Defaultproperty, Toolboxdatai Tagprefixattrbute. Napravićemo uzorak na ova tri atributa.
            [// Specify the default property for the control.DefaultProperty("DefaultProperty"),// Specify the tag that is written to the aspx page when the        // control is dragged from the Toolbox to the Design view. // However this tag is optional since the designer automatically // generates the default tag if it is not specified.ToolboxData("<{0}:ControlWithAttributes runat=\"server\">" +"</{0}:ControlWithAttributes>")]public class ControlWithAttributes : Control{private string _defaultProperty;public string DefaultProperty{get { return "This is a default property value"; }set { this._defaultProperty = value; }}protected override void Render(HtmlTextWriter writer){writer.Write("Default Property --> <B>" + DefaultProperty + "</B>");}         }
  3. Postoji još jedna oznaka koja se zove Tagprefixattrbute. To je atribut na nivou asemblera koji obezbeđuje prefiks oznaci kada prevučete kontrolu iz okvira sa alatkama u dizajner. U suprotnom, dizajner će podrazumevano kreirati prefiks kao što je "CC1". Tagprefixattrbute nije direktno primenjen na klasu kontrole. Da biste primenili Tagprefixe, otvorite AssemblyInfo.CS, uključite sledeći red kôda, a zatim ponovo napravite projekat.
    [assembly:TagPrefix("ServerControlsLib ", "MyControl")]
    Belešku Ako želite da napravite izvor pomoću komandne linije, potrebno je da kreirate datoteku AssemblyInfo.cs, smestite datoteku u katalog koji sadrži sve izvorne datoteke i da pokrenete sledeću komandu da biste napravili kontrolu:
    > CSC/t: biblioteka/out: Serverkontrolno Slib. dll/r: System. dll/r: System. Web. dll *. CS

Koje su osnovne razlike između korisničkih kontrola i prilagođenih kontrola?

Sada kada imate osnovnu ideju o tome šta su korisničke kontrole i prilagođene kontrole i kako da ih kreirate, hajde da brzo pogledamo razlike između njih dve.
Faktora Kontrola korisnika Prilagođenu kontrolu
Raspoređivanja Dizajnirano za scenarije pojedinačnih aplikacija Raspoređeni u izvornom obliku (. ascx) zajedno sa kodom izvora aplikacije Ako se ista kontrola mora koristiti u više od jedne aplikacije, ona uvodi i probleme sa održavanjem Dizajnirana tako da može da ih koristi više od jedne aplikacije Raspoređeno u direktorijumu regala u aplikaciji ili u kešu globalnog sklopa Lako i bez problema koji se odnose na redundantnost i održavanje
Kreiranje Kreiranje je slično načinu kreiranja stranica Web obrazaca; Dobro pogodni za brz razvoj aplikacija (RAD) Pisanje uključuje veliki broj kôda jer ne postoji podrška za dizajner
Sadržaja Mnogo bolji izbor kada vam je potreban statički sadržaj u fiksnom rasporedu, na primer, kada pravite zaglavlja i podnožja Odgovara kada aplikacija zahteva dinamički sadržaj; može se ponovo koristiti u okviru aplikacije, na primer za kontrolu podataka povezanu sa podacima sa dinamičkim redovima
Dizajn Pisanje ne zahteva mnogo dizajniranja aplikacija, jer su oni autorizovan na vreme dizajniranja i uglavnom sadrže statične podatke Pisanje iz početka zahteva dobro razumevanje životnog ciklusa kontrole i redosleda kojim se događaji obavljaju, a koji se obično brinu u korisničkim kontrolama

Napredne teme

Zatim Pogledajmo nekoliko naprednih funkcija koje možete koristiti prilikom razvijanja prilagođenih kontrola.

Državnoj upravi

Web aplikacije su napravljene na HTTP-u, što je bez državljanstva. Stranica i njene podređene kontrole se kreiraju na svakom zahtevu i rashodovano je nakon što se zahtev završi. Da biste održali stanje u klasičnom ASP programskom programu, koristite objekte za sesiju i aplikacije. Za to morate da uradite mnogo toga. Da bi se to izbeglo, ASP.NET pruža mehanizam koji je poznat kao stanje prikaza za održavanje države na nekoliko zahteva. Da biste saznali više o stanju državnog menadžmenta i prikaza, posetite sledeće MSDN Web lokacije:
Primer korišćenja stanja prikaza u prilagođenoj kontroli
ViewStateExample.cs
using System;using System.Collections;using System.ComponentModel;using System.Data;using System.Web;using System.Web.SessionState;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using System.Text;namespace ServerControlLib{/// <summary>/// When a page framework reloads this control after postback, it           /// will restore the values which are in view state./// This control can easily perform state management without         /// implementing our own logic for maintaining the state./// </summary>public class ViewStateExample : WebControl{// Text to be displayed in Text box control.private string _text;/* * This property needs to be populated before every                  * postback in order to  * retain its value.*/ public string Text{get { return (_text == null) ? "_text property is empty"  : _text; }set { _text = value; }}/* * This property needs to be filled once and should be                  * available on the successive postbacks.*/ public string TextInViewState{get{object o = ViewState["TextInViewState"];return (o == null) ? "View state is empty" : (string)o;}set { ViewState["TextInViewState"] = value; } }/* * Over-ridden method on WebControl base class which                                    * displays both of the property values  * i.e. one stored in view state and other which is not                  * saved in view state.*/protected override void RenderContents(HtmlTextWriter writer){writer.Write("Text Without View State = ");writer.Write(Text);writer.Write("<hr><br>");writer.Write("Text In View State = ");writer.Write(TextInViewState);}}}
Primer korišćenja prethodne kontrole na stranici sa Web obrascima
ViewStateExampleDemo.aspx
<%@ Page Language="C#" %><%@ Register TagPrefix="CC" Namespace="ServerControlLib" Assembly = "ServerControlLib" %><html>  <head>    <script runat="server">      void button1_Click(object sender, EventArgs e)      {          Control1.Text = textbox1.Text;          Control1.TextInViewState = textbox2.Text;      }    </script>  </head>  <body>    <form runat="server" ID="Form1">      <br>      Property Value Without View State: <asp:TextBox id="textbox1"         runat="server" />      <br>      Property Value with View State: <asp:TextBox id="textbox2"         runat="server" />      <asp:Button text="Cause Postback" onClick="button1_Click"         id="button1" Runat="server" />      Output from the ViewStateExample Control :      <CC:ViewStateExample id="Control1" runat="server"/>    </form>  </body></html>

Prikazivanje

U ovom odeljku kratko ću opisati koje metode treba da zamenite kada kreirate prilagođenu kontrolu iz klase kontrole ili iz klase webcontrol .
Metodi vizuelizacije System. klase kontrole Web. UI.
Za informacije o metodama vizuelizacije sistemskog. Web. UI. klasa kontrole , posetite sledeće MSDN Web lokacije:
Način na koji se kontrola prikazuje na stranici
Svaka stranica ima stablo kontrole koja predstavlja kolekciju svih podređenih kontrola za tu stranicu. Da bi se prikazao stablo, biće kreiran objekat klase Htmltextwriter koji sadrži HTML koji će biti prikazan na klijentskom računaru. Taj objekat je prosleđen metodu Rendercontrol . Na taj način, metod " Kontrola za Render" poziva metod prikazivanja . Zatim, metod prikazivanja poziva metod renderchildren na svaku kontrolu deteta, što daje rekurzivnu petlju sve dok se ne dostigne kraj kolekcije. Ovaj proces je najbolje objašnjen u sledećem primeru koda.
public void RenderControl(HtmlTextWriter writer) {    // Render method on that control will only be called if its visible property is true.    if (Visible)    {        Render(writer);    }}protected virtual void Render(HtmlTextWriter writer) {    RenderChildren(writer);}protected virtual void RenderChildren(HtmlTextWriter writer) {    foreach (Control c in Controls)     {        c.RenderControl(writer);    }} 
Metodi vizuelizacije sistema. Web. UI. WebControl klasa
Za informacije o metodama vizuelizacije sistema. Web. UI. WebControl klasa posetite sledeće MSDN Web lokacije:
Način na koji se održava klasa WebControl
Sledeći primer koda prikazuje način prikazivanja prilagođene kontrole.
protected override void Render(HtmlTextWriter writer){    RenderBeginTag(writer);    RenderContents(writer);    RenderEndTag(writer);}
Nije potrebno da zamenite metod prikazivanja za klasu webcontrol . Ako želite da se sadržaj prikaže unutar klase Webcontrol , potrebno je da zamenite metod rendersadržajima . Međutim, ako i dalje želite da zamenite način prikazivanja , morate da zamenite metod renderda Tag , kao i metod renderendoznake u određenom redosledu koji je prikazan u prethodnom primeru koda.

Zakljuиak

To je sada za korisničke kontrole i prilagođene kontrole u ASP.NET 1,0 i ASP.NET 1,1. Nadam se da će vam ova kolona pomoći da razumete osnovne razlike između njih i različitih pristupa koje možete preduzeti da biste ih razvili.Hvala vam na vašem vremenu. Očekujemo više o naprednim temama za prilagođene kontrole, kao što su upravljanje državnim upravljanjem, stilovi kontrole, kompozitne kontrole i podrška u vremenu dizajniranja za prilagođene kontrole, u bliskoj budućnosti.Za više informacija o kontrolama posetite sledeće MSDN Web lokacije:
Kao i uvek, slobodno možete da prosledite ideje o temama koje želite da se reše u budućim kolonama ili u bazi znanja pomoću njega .