ASP.NET Web User Kontrolü

Bu yazımızda hep beraber Web User Controlleri öğreneceğiz ve yine hep beraber bunlarla ilgili bir kaç örnek yapacağız.

Bu yazımızda hep beraber Web User Controlleri öğreneceğiz ve yine hep beraber bunlarla ilgili bir kaç örnek yapacağız. Örneklerin yanı sıra yarattığımız bu Controller için Event tanımlama, design time property ayarlanmasını goreceğiz. Fazla örnek yapabileceğimizi sanmıyorum, çünkü bu konunun çok uzun olacağını tahmin ediyorum.

Web Custom Controller ve Web User Controller aslında aynı işi yaparlar. Yani hazırladığımız bir templete i component şeklinde eklememizi sağlarlar. Bu tanımlama çok çok kaba olmasına rağmen en azından haklarında bir fikir vermesi için kullandığım ve hataları olan bir tanımlama. Şimdi isterseniz kitap tarifleri diyebileceğimiz tanımlamalarını yazalım ...

Web User Control :
Daha önceden varolan bazı server ve HTML componentlerini kullanarak yeni bir görünüş yapmamıza yararlarç Bunu VSçNET ile yapabilrsiniz. Yaptığımız bu controller .ascx dosyalarında saklanır ve nerede kullanmak istiyorsak orada sayfaya import etmemiz gerekmektedir.
Web Custom Control : 2 şekilde özetlememiz mümkün. Ve bunlar bir dahaki hafta anlatılacaktırlar.

Bunlar Composite Custom Controller ve Rendered Custom Controllerdir.

1 - Composite Custom Controller : İsmininden de anlaşılacağı gibi(ingilizce bilenler için) composite yani birleştirilmiş componentlerdir. Yani daha önceden var olan bazı server ve HTML componentleri kullanarak yeni bir görünüm yaratmak için oluşturulan componentlerdir.

2 - Rendered Custom Controller : Yani HTML yazılarak ortaya çıkarılan yeni componentlerdir. Ilkinden farkı direk HTML yazılması temeline dayanmasıdırç İlkinde ki gibi daha önceden varolan componentleri kullanmak yerine direk HML output şeklinde yapılmasıdır.

1 - WEB USER CONTROL :
Web User Controlleri bir nevi ASP deki include filelar gibi düşünebilirsiniz. Oluşturduğunuz bir Web User Controlü sayfanızın isteğiniz yerine koyar ve orada onun görünmesini sağlayabilirsiniz. Tabii bunu yaparken ASP deki gibi include tarzı bir deyim kullanmayız. Onun yerine Prefix tanımlaması yaparız. Neyse fazla aceleci davranmadan basmak basmak konumuzu işlemeye başlayalım.

1.1 Özellikleri :
Web user controller proje içerisinde yaratılan ascx dosyalarıdır. Bu dosyalar içerisinde daha önceden var olan HTML ve server componentlerini istediğimiz gibi kullanarak yeni bir görünüm oluştururuz. Web USer Controller kullanıldıkları her proje içerisinde mutlaka bulunmalıdırlar. Bunun nendeni ise onları compile edememizdir. Yani Web User Controlleri derleyerek bir dll yapıp bunu istediğimiz projede kullanam imkanımız yoktur. Sadece asp deki include dosyaları gibi kullanılabilirler. User Controller VS.NET toolbox ında yani araç çubuğunda bulunmazlar. Onları herhangi bir projeye eklemek için Solution Explorer dan o ascx dosyasını tutarak sayfada istediğiniz yere bırakmanız gerekmektedir. USer Control kodları ise Web Formumuz Load edildikten sonra yüklenir. Bu şu demektir. Page_Load eventi User Controlümüzün yuklenmesinden önce gerçekleşmektedir. Bu sayade gerekli loadingleri o kısımda yapabiliriz. Bu saydıkarım .NET teki diğer componentlerde olmayan özelliklerdir. Bu nendenle ne olursa olsun Web User Controlleri .NET in diğer kontrollerine benzetmeyiniz. (örn. Windows Controller ve Web Custom Controller gibi ...)

1.2 Yeni bir Web User Control Oluşturma
VS.NET editöründe Solution Explorer da projeye sağ tıklayınız ve Add New Item seçeneğini seçin. Buarad açılan pencereden Web USer Controlü seçip yeni adını verin ve okey deyin. Bolelikle yeni bir ascx dosyası Projenize eklenmiş olacaktır. Şimdi peki ne yapacağız.

Yapacağımız şey bu controlun içinde barındırmasını istediğimiz şekilde tasarlamak. Örneğin sizin bir menünüz var ve bu menü hemen hemen her sayfanızda kullanılıyor. Ve bu menude bazen değişiklikler yapmanız gerekecek bu durumda her sayfada bu işi tek tek yapmak yerine tek bir menü sayfası oluşturup bunu her sayfada kullanamk daha mantıklı olacaktır.

Şimdi bu menu örneği ile ilgili hemen şöyle bir şey yapabiliriz. Bir ascx dosyası olusturup bu dosyanın içeriine menu kodumuzu yazarız. Örneğin:


<table cellpadding=0 cellspacing = 0 border=0 class=yazi>

<tr>

<td><a href="">Link 1</a></td>

</tr>

<tr>

<td><a href="">Link 2</a></td>

</tr>

</table>



gibi bir kodu bu sayfamıza yazarız. Daha sonra yapmamız gereken tek şey bunu drag drop la yani tutup bırakma ile herhangib ir sayfamızın istediğimiz yerine koyma şansımız olacaktır. Böylece bu dosyada yapacağımız bir değişiklik diğer yüm sayfalarıda etkileyecektir. Tabii bu çok basit bir örnek oldu ve sadece asp de kullandığımız mantığın aynısını kullandık ve birde sadeec HTML kullandık. Şimdi daha kompleks bir örnek yapalım. Örneğin yeni bir Web User Control dosyası oluşturalım ve buna Login.ascx adını verelim. Bu dosya içeriinede bir login form koyalım. Bunun için şu şekilde kod yazmamız yeterli olacaktır.


<DIV id=maxilogin align=center>

Kullanıcı Adı : <asp:TextBox id=username Runat="server"/><asp:TextBox>

Şifre : <asp:TextBox id=password Runat="server"></asp:TextBox>

<asp:Button id=login Runat="server" Text="GIR"></asp:Button><br>

<asp:Label id=sonuc runat=server></asp:Label>

</DIV>



Buarada elimizde iki textboxımız var ve bunların birisi kullanıcı adı ve diğeride şifre için ve birde butonumuz var. Bu bize basit bir kullanıcı adı ve şifre isteyen form örneği.

1.3 Web User Control Methodları, Eventleri ve Property lerini ayarlama
Şimdi buraya kadar basit bir login form taşıyan bir User Control yaptık. Bu kontrolümüz şu anda bile kullanılmaya hazır ama biz işleri biraz daha ileri götürüp işimize daha çok yarayacak bir hale getireceğiz. Bunun içinde methıdları eventleri ve propertyleri kullanacağız. İşe isterseniz propertylei ile başlayalım. Hepiniz bilirsiniz herhangi bir kontrolü web formumuza eklediğimizde yanda property dialoğunda onun propertyleri çıkar. Mesela asp:button için Text, Runat gibi bir çok property çıkar. Şimdi bizim bu kontrolümüz içinde gerekli property ayarlamaları yapacağız. Bu propetyler bize design esnasında ve RunTimeda bir çok kolaylık sağlayacak. Aynı zmanda tek kalıp değilde farklı bir görünüm yada kullanım için gereklidir.

Şimdi oluşturduğumuz bu Web User Control ün code görünümüde (C# veya VB.NET) bakalım. Ben herzamnki gibi sadece C# kullanımını göstereceğim. VB.NET kullanmak isteyen arkadaşlar kendileri bu kodları uyarlasınlar.

Controlümüzün classına dikkat edecek olursak şu şekilde tanımlanmış olduğunu farkederiz


public abstract class Login : System.Web.UI.UserControl



Şimdi bunun neresine dikkat edeceğiz ki diyeceksiniz. Birincisi clasımızın bir abstract class olması. Bu şu demektir. User Controller classı sadece bu ortaya cıkan yeni class için yani Web Forma koyacağımız controlümüz için temel yani base classdır. Bir diğer önemli nokta ise : System.Web.UI.UserControl kısmıdır ki buda bu yeni oluşturduğumuz controlümüz System.Web.UI.UserControl namespace ini temel alır. Yani yeni controlümüzü yaratmakta kullanacağımız ve yine HTML atrribularından propertylerini alacağımız temel methodlar ve property ler bu classda bulunur.

Yukarıdakiler haricinde code görünümde birde Page_Load eventini göreceğiz ki hatırlayalım bu event Windows Formsun Page_Loadından daha sonra gercekleşecektir...

Şimdi bu code ların arasına kendi propertylerimizi yazalım. Tabii bunu yaparken dikkat etmemiz gereken husular var. Bunlar; propertyleri public olarak tanımlayalım ki dışarıdan erişime izin verilsin. Ve yine design time da yani VS.NET te bu componentin propertyleri değiştğinde bunları yeni değerlerinin saklı tuulması ve buna göre görünümün yeniden oluşturulması için ise ViewState deyimini kullanmak. Şimdi yukarıda yaptığımız örnek için hemen bir property tanımlaması yapalım. Bu property miz mesela SiteAdi olsun. Ve burada hangi sitede kullanıyorsak o ayarlansın.


public string SiteAdi

{

     get {return Convert.ToString(ViewState["SiteAdi"]);}

     set {ViewState["SiteAdi"] = value;}

}



Buarada KullaniciAdi adlı bır property tanımladık. Şimdi nedir bu ViewState katdeşim deme hakkınız varmı yok mu? Bence var. View State bir dictinory dir ve içerisine yazdığınız key e bağlı olarak içeriisnde o controlünüz için gerekli propertyleri tutar. Örneğin burada biz SiteAdi diye bır property tanımladık ve bunun değerinide ViewState te yine "SiteAdi" keyini kullanarak tuttuk. Bu sayede bu oluşturduğumuz controlün propertyleri ViewState te tutulur. Daha sonra istediğimiz herhangi bir anda onu kullanırız.

Bu property benim ne işime yarayacak diyorsunuz aslında bu örnekte pek olağan üstü kullanımları olamayacak ama yinede kullanacağız. Ancak siz ileride işinize daha çok yarayan hatta hayati önem taşıyan propertyler kullanmak zorunda kalacaksınız ... Buna garanti verebilirim ...
Propertyleri bu şekilde tanımladığımıza göre şimdi sıra Eventlerimizi kullanamaya geldi. Yukaridaki örnekte koydugumuz butona çift tıklayın ve oluşan evetin içerisine şu kodları yazalım..


private void Button1_Click(object sender, System.EventArgs e)

{

      if(this.username.Text != "kuti" || this.password.Text != "kuti")

      {

          this.Label1.Text = "Hata VAR";

      } else{

          this.KullaniciAdi = username.Text;

          this.Label1.Text = "Merhaba " + this.username.Text + ". " + this.SiteAdi + " sitesine hoş geldiniz.";

      }

}



burada da görüldüğü gibi gelen username ve passwordu yani kullanıcı adını ve şifreyi kontrol ediyoruz ve eğer ikiside kuti değilse demekki hatalı diyoruz ve Labelımıza hata var yazdırıyoruz. Eğer username ve şifre doğru ise bu kez ismi ile hitap ederke merhaba kuti diyerek Property olarak yaptığımız SiteAdi ni kullanarak şu siteye hoşgeldiniz diyoruz. Bütün bunları butona clicklendiğinde yapıyoruz. Şidmi buraya kadar nasıl yazılacağı ve nasıl kullanılacağına bir örnekleme yaptık Web User Controlleri için. Şimdi bu örneğimizi herhangi bir Web Forma nasıl adapte edeceğiz yada Propertyleri nasıl ayarlayacağız ona bakalım isterseniz.

Herhangi bir User Controlü kullanabilemek için sayfanıza Register edilmesi gerekir. Bunun için bu Web User Controlü tutup sayfada kullanmak istediğiniz yere bırakmanız yeterlidir. VS.NET sisizn yerinize Register işlemini yapacaktır. Ama siz manuel yani elle kendiniz yamk isterseniz ozman kodu kendiniz yazmalısınız. Register kodu aşağıdaki gibi dir.


<%@ Register TagPrefix="KUTI" TagName="Login" Src="Login.ascx" % >


Buarada KUTI sayfadaki Prefix idir. Tagname ise bunun için kullanılacak isim ve son olarakda kaynak dosyası yanı ascx dosyamız verilmektedir.
Şimdi buna göre sayfamızda bunu şu şekilde kullanabiliriz..

<KUTI:Login Runat="Server" id="Login1" SiteAdi="maxiasp.net"></KUTI:Login>



Buarada yontem şu ;


Default TagPrefic uc1 seklinddir. Yani siz drag dropla sayfaya bıraktığınızda default olarak kendisi uc1 diye bir TagPrefic oluşturur.

Şimdi bu sayfa çalışırsa ortaya şöle bir şey çıkar. Eğer kullanıcı adı ve şifre kuti olarak girilmezse alttaki Labela HATA VARRRRRR... yazdırır. Eğer doru girerse o takdirde de Merhaba kuti maxiasp.net e hoşgeldiniz yazacaktır.

Şimdi isterseniz Event yapalım. Yani bu kontrolümüz için bir event tanımlayalım. Şidmi bildiğiniz gibi Eventlerin Argumalnları vardır. Bu arguman event sonucu taşınmasını istediğimiz degerleirn oluşturduğu objedir. Bizde bu controlümüz için bir event yapalım ve bu event login eventi olsun. Yani kullanıcı doğru şifre kullanıcı adı yazrsa bu eventimiz oluşsun ve taşıyacağı argumanlarda kullanıcı adı ve şifre olsun.

Önce bir argüman clası tanımlayalım...


public class Login_EventArgs

{

   private string _Kullanici = "";

   private string _Sifre     = "";



   public string Kullanici

   {

       get {return _Kullanici;}

   }



   public string Sifre      

   {

       get {return _Sifre;}

   }



    public Login_EventArgs(strıng kullanici, string sifre)

    {

        _Kullanici = kullanici;

        _Sifre = sifre;

    }

}



Bu arada siz burada isterseniz böyle bir class yaratıp argumanları bunla taşımak yerine (eger arguman tasımayacksanız) System.EventArgs classını kullanabilrisiniz...

Şimdi sıra bu eventi yakalacak handlerı tanımlamakta. Onuda şu şekilde yapabiliriz.


public delegate void LoginEventHandler(object sender, Login_EventArgs e);



burada delegate i yapıyoruz ve bu delegate in taşıyacağı değerleri belirtiyoruz.

Şimdi codumuzun içerisine yani yukarıda yaptığımız örnek kodun içerisine event tanımlama işlemini yapalım..


public event LoginEventHandler Login = null;



şimdi oluşturduğumuz bu Login eventini ortaya çıkarmamız gerekecek....


private void Button1_Click(object sender, System.EventArgs e)

{

      if(this.username.Text != "kuti" || this.password.Text != "kuti")

      {

          this.Label1.Text = "Hata VAR";

      } else{

          if(this.Login != null)

          {

               Login_EventArgs arg = new LoginEventArgs(username.Text, password.Text);

               this.Login(this, arg);

           }

      }

}



Burada Login eventini ortaya çıkarıyoruz. Şimdi burada dikat ederseniz Login eventini null yaptım tanımlarken ve daha sonrada ortaya çıkarma esnasında kontrol ettim eğer null sa hiç bir işlem yapma diye. Bunun sebebi eğer event kullaılmak istenmiyorsa yani hernagi bir functiona atanmamısaişlem yapmamak. Şimdi buraya kadar heralde anladık. Sıra geldi bu eventi kodumuzda yani Web Formumuzun kodunda yakalama...

Şidmi bunun için önce Web Formumuzda bu event oluştuğunda hangi function çağrılacaksa o oluşturulmalı.


private void Login_LoginEvent(object sender, Login_EventArgs e)

{

          Response.Write("Merhaba " + e.Kullanici);

}



Şimdi öncelikle dikkat ederseniz functıonım delegate ettiğim LoginEventHAndlerı ile aynı yapada...

Buaradada Response.Write kullanılarak yazdırıyoruz merhabayı.

Şidmi son basmak bu eventi atamak, onu da Windows formumuzda yapacağız yine..

Hatırlarsnız Controlümüzün adı Login1 di sayfamızda.


Login1.Login += new LoginEventHandler(this.Login_LoginEvent);

// burada Login eventi olustugunda direk Login_LoginEvent functinına yonlendirdik ...



Onun Login eventinide bu şekilde tamamlamış olduk.

Bir Sonraki Derste Görüşmek Üzere ....
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git