Asp.Net Kontrolleri Bölüm 1

Bu yazımda label, literal, textbox ve button kontrollerini (control) anlatmaya çalışacağım. Bu yazı dizisinde ki amacım yeni başlayan arkadaşlara yardımcı olabilmek, akıllarına takılan noktalarıda sorarak öğrenmelerini sağlamak. Kontrollerin anlatağım özellikleri en çok kullanılan özellikleridir. Lafı daha da uzatmadan başlayalım.

Microsoft Asp.Net ile birlikte web form adını verdiği yeni bir çalışma mantığıyla, alışıla gelmiş web geliştirme yöntemlerinin dışına çıktı. Web form ilk başlarda alışılması zor fakat alıştıktan sonrada kullanması çok kolay bir yapıdır. Kabaca şöyle çalışır, kontrollerimizin hepsi runat=”server” etiketli bir form un (<form runat=”server” ID=”form1″>kontrollerimiz burada</form>) içerisinde yer alır. Kontrollerimiz üzerinde de runat=”server” ifadesi geçmelidir. Sayfa üzerinde bir butona yada linke tıklandığında sayfa olduğu gibi post edilir framework tarafından işlenir ve geri döner. Bu işlemede PostBack diyoruz. Verilerde ViewState denilen bir meknızmayla taşınır. Bu sebepten dolayı klasik asp den yada diğer dinamik dillerden asp.net e geçmek sizi biraz zorlayabilir. Bu mekanızmanın avantajları ve dezavantajları bulunmaktadır. Bu konulara girmek istemiyorum çünkü konumuzdan epeyce uzaklaşmış oluruz. Bu ön bilgiden sonra ilk nesnemizden başlayalım.

Label
Türkçe anlamı etikettir. Ekrana bir değer yazdıracağımız zaman kullanılır.
<asp:Label runat=”server” ID=”Label1″ Text=”Label 1 kontrolümüz” /> şeklinde tanımlanır.
Css class ı ve Attributes atanabilir. (Attributes nedir en aşağıda yazacağım.)
Html çıktısına baktığımızda yazının span etiketleri arasında yazıldığını göreceksiniz.

Literal
Türkçe karşılığını bulamadım, bilen varsa söyler ekleriz :) Ekrana değer yazdırmak için kullanır.
<asp:Literal runat=”server” ID=”Literal1″ Text=”Literal kontrolümüz” /> şeklinde tanımlanır.
Css class ı ve Attributes atanamaz.
Html çıktısına baktığımızda salt metin olarak çıktı verdiğini göreceksiniz. Bu noktada Label ile ayrılan bir kontroldür. İlk başlarda şekillendirmesi kolay olduğundan Label kullanılır fakat işin içine temiz kodlama girdiğinde literal en çok tercih edilen kontrol olur. Bir span etiketinin içerisinde atıyorum h1 etiketinin yer alması standartların dışında kalır ve arama motoru optimizasyonu içinde hoş değildir. Kısacası kafanıza sadece iş çıkartır. Literal kullanımda herşey sizin kontrolünüzdedir. Hemen bir örnek ile demek istediğime bakalım.

Gördüğünüz gibi Label de h1 etiketi span etiketinin arasında kaldığı için sitil yazarken labele atadığımız class dan sonra bir de etiketin adını yazmak durumunda kaldık (stylee h1{color:Red;font-size:15px;font-family:Arial}) literalde ise böyle bir şey söz konusu değil. Direk class ımızı elemente verdiğimizden dolayı sitil tanımlarken direk tanımladık. Böylelikle standartlara uymuş olduk. Bu arada ilerde javascript ile etiketleri yakalama ve işlem yapma gibi durumlarda da label başınıza türlü türlü işler açabilir, bunuda ek olarak söylemekte fayda var. Son söz olarak şunu söylemekte fayda var günümüz web kurallarına uygun birşeyler yapmak istiyorsak literal, yok arkadaş yemişim standartı benim işim acele sağ tuş tıklar renklendiririm sağı solu problem yok derseniz labeli kullanabilirsiniz.

Textbox
Türkçe karşılığı yazı kutusu anlamına gelmektedir. Adından da anlaşılacağı üzere içine yazı yazacağımız form elemanımızdır.
<asp:TextBox runat=”server” ID=”TextBox1″ /> şeklinde tanımlanır.
Bilinmesi gereken en büyük özelliği TextMode özelliğidir. Bu özellik 3 şekilde tanımlanır.

1- MultiLine textbox ı textarea ya çevirir, yani büyük yazı yazılabilir alana.
2- Password textbox ı şifre yazabileceğimiz alan türüne çevirir. Girilen değer kullanıcıya gösterilmez.
3- SingleLine bildiğimiz textbox dır, varsayılan olarak bu değer gelir.

Css class ı ve Attributes atanabilir.

Button
Bildiğimiz düğmedir :) Form elementidir.
<asp:Button runat=”server” ID=”Button1″ Text=”Button 1″ /> şeklinde tanımlanır.
Css class ı ve Attributes atanabilir.
Varsayılan olarak submit durumundadır. Tıklandığında formu gönderir. En önemli olayı onclick dir. Yani butona tıklandığında hangi olayın gerçekleşeceğini buraya yazarız. Örneğin; <asp:Button runat=”server” ID=”Button1″ Text=”Button 1″ onclick=”Button1_Click”/> diye bir olay yazdığımızda. Kod tarafına aşağıdaki tanımlayı yapıp içine yapmak istediğimiz şeyi yazıyoruz.

protected void Button1_Click(object sender, EventArgs e) {
Response.Write("Buton 1 e tıklandı !");
}

Oluşturduğunuz butona Visual studio Design modundayken çift tıklarsanız yukarıdaki kod kendiliğinden oluşur ve siz sadece içine yazarsınız. Yukarıda yazdığımız tüm kontrollere kod tarafında yani .cs uzantılı kısımda id sini yazıp noktaya (.) basarak tüm özelliklere ve olayarlara erişebiliyoruz. Örneğin kod tarafında sayfamızın page_load olayına;  TextBox1.Text=”Bu bir textbox kontrolü”; yazdığımızda id si TextBox1 olan nesnenin texti yazdığımız değer olur. Button1.Visible=false; id si Button1 olan kontrol görünmez olur. Eğer ilgili kontroldeki değeri okumak istersekde direk TextBox1.Text dememiz yeterli. Örneğin; Response.Write TextBox1.Text; Yeri gelmişken yukardaki tüm kontrollerin visible özelliği bulunmaktadır.

Attributes Nedir ?
Nesnelerin özellikleri anlamına gelen ve çoğu kontrolün desteklediği bir özelliktir. İyide ne işe yarıyor ? Çok işe !

Bir butonumuz var ve butonun üzerine gelindiğinde bir mesaj vermek istiyoruz. Bunu javascript ile yapabiliriz fakat butonun onmouseover diye bir özelliği bulunmuyor. İşte bu özelliği attributes ekleyerek yapabiliriz. Sayfamızın page_load olayına Button1.Attributes.Add(“onmouseover”,”alert(‘Buton 1 in üzerine gelindi’)”);  yazarak butonumuza bu özelliği kazandırmış oluruz. Bu sadece javascript için geçerli değildir, istediğimiz herşeyi bu şekilde ekleyebiliriz. Eklediğimiz özelliği kaldırmak içinde Remove deyip özellik adını girmemiz yeterlidir. Hemen bir örnek yazalım. Örneğimiz de butonun üzerine gelindiğinde ekrana bir mesaj çıkacak butona tıklayıp sayfamız postback edildiğinde özelliği remove edip tekrar butonun üzerine gelindiğinde mesajın görünmemesini sağlayacağız.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Button1.Attributes.Add("onmouseover", "alert('Buton 1 in üzerine gelindi')");
        }
        else
        {
            Button1.Attributes.Remove("onmouseover");
        }
    }

Attributes ler hayat kurtarıcıdır, bu konuyu iyi anlamanızda fayda var, kendiniz bir kaç örnek yaparak konuyu daha iyi pekiştirebilirsiniz.

İpucu kontrollerimizin ID değerlerini tanımlarken en başa kontrollerin kısaltılmış isimlerini yazmanız hem kod yazarken işinizi kolaylaştırır, hemde sonrasında hangi kontrol neydi iki saat aramazsınız. Örneğin; TextBox a id verirken txtKullanici, txtIslem gibi.. Label a verirken lblAd, lblSoyad gibi.. Button a verirken btnGonder, btnSil gibi.. Birde unutmadan yukarda bolca olay kelimesini kullandım olay event olarak geçmektedir.

Dizinin ilk bölümünün sonuna geldik, umarım faydalı bir yazı olmuştur. Karışık gelmiş olabilir ama şunu sakın unutmayın, okuyarak bu işleri öğrenmeniz mümkün değildir. Okuduklarınızı tamamen hakim olana kadar kendiniz yapın ve sonrasında küçük küçük projelerde kullanmaya çalışın ve pes etmeyin ! Aklınıza takılan herşeyi yorum olarak yazabilirsiniz. Yorum olarak dememdeki amaç diğer arkadaşlarında o bilgilerden faydalanmalarını sağlamaktır.

  • http://www.sonergonul.com Soner Gönül

    Güzel olmuş. Teşekkürler ;)

  • http://necatbolpaca.com Necat Bolpaça

    Kontrollere açıklayıcı bir giriş olmuş, bir kontrolün yaşam çevrimini (life cycle) kontrolün sırasıyla hangi olayları işlediğini ve veri duyarlı kontrolleri (datalist, gridview, repeater gibi) anlatan bir devam yazısı da gelirse harika olur diye düşünmekteyim.

    Yazı için teşekkürler. Çoğu zaman soru soran kişiye uzun uzun anlatmaktansa bu tür açıklayıcı yazıları vermek daha güzel oluyor ve Türkçe dilinde konuları bu yalınlıkta ele alan yazı maalesef çok değil.

    • apoStyLEE

      İlginize teşekkür ederim. Sınavlarım nedeniyle yazmaya biraz ara verdim. Çıkardığım yol haritasında bahsettiğiniz kontrollerde bulunuyor. Sınavlardan sonra yazmaya kaldığım yerden devam edeceğim. Tekrar teşekkürler.

  • sbatalay

    selam. biz bir site yapıyorz.. gps ten koordinat alıp bunları site içerisindeki google map te yerini gostermeye calısıyorz.. bununla ilgili bir fikriniz varmı. bide siteyi yayına gecirmek için neler yapmamız gerekiyor??

  • Pingback: GridView ile çalışmak ve püf noktaları | asp.net, jquery ve diğer web teknolojileri üzerine()