Ana Sayfa » Ders Notları ve Örnekler » ASP.NET » HTML Kontrolleri, Web Kontrolleri ve HTML Form Etiketleri

Uyarılar :
  • Bu sayfada yazılanlar yeniden yayınlanamaz.
  • Bu örnek ders sırasındaki anlatımlardan derlenmiştir. Özellikle bir makale şeklinde yazılmamıştır. Bilgilerde eksiklikler bulunabilir.

Bu derste ASP.NET'de form kontrolü olarak kullanabileceğimiz 3 ayrı kontrol çeşidini göreceğiz. Bunlar;

  1. ASP.NET Web Kontrolleri
  2. HTML Kontrolleri
  3. Form Etiketleri
olarak gruplanırlar.

Web kontrolleri ASP.NET'in web form sayfalarında (ASP.NET) form elemanı olarak kullanılacak, TextBox, Label, CheckBox vb. kontrollerdir. Etiketin başına ASP yazılarak tanımlanırlar. Örneğin;

    <asp:TextBox ID="tbAdi" runat="server" />

Web kontollerine onu diğerlerinden ayırt edebilmek, özellik, metod ve olaylarına kolayca başvurabilmek için mutlaka bir ID özelliği değeri (bir isim) veririz. Ayrıca bu kontrolün sunucu tarafında çalıştırılacağını belirtmek için RUNAT özelliğine SERVER değerini atarız.

Web kontrolleri üstte olduğu gibi /> karakterleri kulanılarak bazıları aşağıdaki örnekte görüldüğü gibi uzun olarak kapatılabilirler.

    <asp:ListBox ID="lbSehirler" runat="server" >
        
        // Buraya liste elemanları yazılacak...
        
    </asp:ListBox>

Web kontrollerinin onlarca özellik, metod ve olayı olduğundan bir web kontrolünü kullanarak sıradan form etiketlerine göre kontroller üzerinde çok daha fazla hakimiyet kurabilir, daha fazla işlem yapabiliriz.

HTML kontrolleri ise form etiketlerinden türetilen kontrollerdir. Web kontrollerinden daha az özelliği sahiptirler ancak çoğu zaman yeterli olurlar. HTML kontrolü tanımlamak için normal form etiketine ID ve RUNAT="SERVER" özellikleri ekleriz.

Bir HTML form etiketi:

    <input type="text" name="ittAdi" />

Bir HTML form etiketi:

    <input type="text" id="ittAdi" runat="server" />

HTML Kontrollerinin en büyük faydası ID özelliğini kullanarak doğrudan bu kontrollerin değerine ulaşmamızdır. Bir form kontrolünde ise bunu NAME özelliğini doğrudan kullanarak yapamayız. Bir HTML kontrolünün değerini almak için;

    String deger = Request.Form["FormKontrolununNameOzelligiDegeri"]

şeklinde bir yol izlemek zorundayız. HTML kontrollerinde ise doğrudan;

    String adi = ittAdi.Value

yazabiliriz ve ATTRIBUTES özelliği ile dilediğimiz HTML etiket özelliğini değiştirebiliriz. Örneğin;

    ittAdi.Attributes["value"] = "Ali";

Örnek :

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    // Page_Load yordamı sayfa her yüklendiğinde çalıştırılır...
    void Page_Load(Object o, EventArgs e)
    {
        /*
        Bir HTML Kontrolünün özellik ve metodları vardır.
        Bu sayede bu kontrol üzerinde biraz hakimiyet sağlayabiliriz (özelliklerini
        değiştirebilir, içindeki bilgiyi aşağıdaki ittSoyadi.Value gibi bir ifade ile
        kolaylıkla alabiliriz).
        */
        
        /*
        HTML Kontrolüne (çıktı olan HTML'deki input etiketine) girilebilecek en çok karakter
        adedini değiştir.
        */
        
        ittSoyadi.MaxLength = 10;
        
        /*
        Web Kontrolünün HTML kontrolünden daha fazla özellik ve metodu vardır. Hatta bir çok
        web kontrolü olaylara da sahiptir. Web kontrollerine görünüm özelliklerine doğrudan
        ulaşmak dahil bu kontrollere çok daha fazla hakim olunabilir.
        */
        
        tbMeslek.BackColor = Drawing.Color.Red;             // Zemin rengi kırmızı olsun.
        tbMeslek.BorderColor = Drawing.Color.Bisque;        // Çizgi rengi Bisque olsun.
        tbMeslek.Font.Italic = True;                        // Yazı tipi yatık olsun
        tbMeslek.ForeColor = Drawing.Color.White;           // Yazı rengi beyaz olsun.

        /*
        Bir HTML form etiketinin ise Reuqest.Form["EtiketinNameOzelligininDegeri"] şeklinde
        sadece değerine ulaşabiliriz. (IsPostBack, sayfaya bir submit tuşu tıklanarak form
        verisi geldiyse True aksi halde False döndürür. Bunu kullanarak form geldiğinde farklı
        gelmediğinde farklı işlemleri yapabiliriz. Örneğin aşağıdaki gibi form geldiğinde
        gelen değerleri yazdırabilir, gelmediğinde ise - sayfa ilk çağırıldığında olduğu gibi-
        bir mesaj görüntüleyebiliriz).
        */
        
        if (Page.IsPostBack)
        {
            /*
            Bir web kontrolünün (örneğimizde TextBox) değerini almak için
            id özelliğini yazıp . koyduktan sonra Text özelliğini yazın.
            (Response nesnesi göndereceğimiz cevapları içerir. Örneğin
            bu kodların çalıştırılması sonucu oluşacak ve tarayıcıya gönderilecek
            HTML kodları sayfanın cevabıdır. Response nesnesinin Write metodu
            bu çıktıya yani HTML'ye metin ekler. Aşağıda tbAdi isimli Web Kontrolünün
            içindeki metni HTML içine yazdırıyoruz).
            */
            
            ltMesaj.Text = "Web kontrolünün içine yazılan yazı = ";
            ltMesaj.Text += tbAdi.Text;
            
            ltMesaj.Text += "<br>"; // Bir satır sonu ekle de sonraki yazdırılacaklarla yanyana yazılmasın...
            
            /*
            Bir HTML Kontrolünün değerini almak için aynı yöntem kullanılır
            ancak metni / değeri içeren özellik Text değil Value'dur. HTML Kontrolünün
            Text özelliği yoktur.
            */
            
            ltMetin.Text += "HTML Kontrolüne yazılan yazı = ";
            ltMetin.Text += tbAdi1.Value;
            
            ltMesaj.Text += "<br>"; // Bir satır sonu ekle de sonraki yazdırılacaklarla yanyana yazılmasın...
            
            /*
            Bir HTML Form etiketinin sadece değeri alınabilir. Üzerinde buradaki
            kodlar kullanılarak başkaca bir işlem yapılamaz. Değerini almak için
            Request nesnesinin (sayfa yüklendiğinde ASP.NET tarafından otomatik
            olarak oluşturulur. Sayfadan istekleri mesela gelen formdaki bilgileri
            ve adres çubuğundan gelen bilgileri içerir) Form özelliği kullanılır.
            Request.Form["EtiketinNameOzelligininDegeri"] şeklinde yazılır.
            */
            
            ltMesaj.Text += "Form etiketine yazılan yazı = ";
            ltMesaj.Text += Request.Form["ittAdi"];
            
            ltMesaj.Text += "<hr>"; // Bir yatay çizgi ekle de yazdırmanın bittiği belli olsun...

        }
        else
        {
            ltMesaj.Text = "Metin kutularına birşeyler yaz ve tuşu tıkla...";
        }
        
    }
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Literal id="ltMesaj" runat="server" /><br />
        <div>
        
           <!-- HTML Form Etiketi -->
           <input type="text" name="ittAdi" />
           
           <!-- HTML Kontrolü (ASP.NET dikkate alır, özellikleri ve metodları vardır.)
            HTML form etiketini HTML kontrolü haline getirmek için id ve runat
            özelliklerini eklemek gerekir-->
           <input type="text" runat="server" id="ittSoyadi" />
           
           <!-- ASP.NET Web Kontrolü. ASP.NET için bir çok özellik, metod ve olaylar
            içeren kontrollerdir. HTML çıktısına normal bir INPUT etiketi olarak
            yazdırılır (Sayfayı çalıştırdıktan sonra kaynağa bakın) -->
           <asp:TextBox runat="server" ID="tbMeslek" />
           
           <input type="submit" value="Tıkla ve formu gönder" />
        </div>
    </form>
</body>
</html>
İletişim : hazirsite@gmail.com