User Controle s predlošcima

Radeći administratorsko sučelje CMSa dobio sam grafički predložak dizajna koji je uključivao brojne okvire za module. Odmah sam natipkao nekoliko CSS klasa, aplicirao ih na dva-tri DIVa, i cijeli zadatak je bio gotov u pola sata. Da ne bude dosadno do kraja dana, valjalo je proanalizirati rješenje i pronaći način da se stvar malo zakomplicira!

Ako pogledamo HTML kod od okvira:

Naslov okvira
	

		
		Obicni text...
	

implementacija sadržaja i opis CSS klasa je nebitan, ali je poanta da se svaki put moraju pisati točno ti DIVovi sa CSS klasama da bi se dobio željeni grafički rezultat. Da bi to izbjegli, cilj je upakirati HTML kod u zasebnu kontrolu koja bi bila pogodna za ponovno korištenje i primala bi samo čisti tekst koji mora prikazati.

Koliko je meni poznat rad u ASP.NETu, postoje dvije mogučnosti: Custom Controls ili User Controls. Custom Controls su previše kompleksne za ovaj zadatak, tako da ostaje samo druga opcija: opće poznate i svima dobro znane user kontrole, ilitiga ASCX kontrole, ili (ime po vlastitom izboru)

Ono što želimo dobiti izgleda ovako:

Naslov okvira

    ovdje ide puna vreća asp.net kontrola i sličnog

Želimo imati predloške unutar user kontrole, tako da je na jednom mjestu definiran grafički izgled (unutar ascx datoteke), a sadržaj kod samo upotrebe user kontrole. Kada dizajner dođe sa novim dizajnom, njegova implementacija mora biti jednostavna, brza i mora se svesti samo na promjenu unutar ascx datoteke.

Do sada nisam nikada koristio predloške unutar user kontrole, niti naišao na sličnu upotrebu user kontrole, pa nakon malo guglanja/binganja i isprobavanja stvar je konačno proradila. Evo kako napraviti svoju templateziranu user kontrolu:

1. dodati novu user kontrolu u projekt

2. dodati atribut ParseChildren na definiciju klase:

[ParseChildren(true)]
public partial class FrameContainer : System.Web.UI.UserControl

time smo rekli kompajleru da se unutar te user kontrole nalaze i child kontrole koje se moraju parsirati, odnosno izvršiti.

2. definiranje ITemplate propertya za svaki od predloška:

[TemplateContainer(typeof(ControlsContainer))]
[TemplateInstance(TemplateInstance.Single)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate HeaderTemplate
{ get; set; }

[TemplateContainer(typeof(ControlsContainer))]
[TemplateInstance(TemplateInstance.Single)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate ContentTemplate
{ get; set; }

uz jednu napomenu: ako ima više ContentTemplate predložaka u deklaraciji, TemplateInstance.Single mora biti promjenjen u TemplateInstance.Multiple

3. TemplateContainer atribut opisuje tip kontrole koja je sadržana u predlošku, pa nju možemo jednostavno kreirati i dodati u projekt:

public class ControlsContainer : Control, INamingContainer { }

4. Izrada samog predloška unutar HTMLa user kontrole

PlaceHolderi su mjesta gdje ćemo ubaciti kontrole i HTML tekst koje smo dodali u deklaraciji user kontrole.

5. Renderiranje: kontrole koje smo u deklaraciji dodali u predložak moraju biti instancirane unutar OnInit eventa da bi ViewState ispravno funkcionirao.

protected override void OnInit(EventArgs e) 
{ 
	if (ContentTamplate != null) 
	{ 
		var c = new ControlsContainer(); 
		ContentTemplate.InstantiateIn(c); 
		ContentHolder.Controls.Add(c); 
	} 
	if (HeaderTemplate != null) 
	{ 
		var c = new ControlsContainer(); 
		HeaderTemplate.InstantiateIn(c); 
		HeaderHolder.Controls.Add(c); 
	} 
}

ControlsContainer je potrebno koristiti zbog implementacije INamingContainer interfacea, i zbog toga što ITemplate tip od HeaderContainera i ContentContainera ne možemo direktno instancirati u PlaceHolder.

I to je sve! Sasvim jednostavno!

download VisualStudio 2008 projekta sa primjerom