Asp.net Standart Kontrolleri

.net teknolojisi, asp.net ile geliştirilen web uygulamalarında kullanılmak üzere bizlere altmışın üzerinde bir çok hazır kontrol sunar. Bu kontrolleri kullanarak web sayfalarında bir çok önemli işlevleri kolaylıkla gerçekleştirebiliriz. Bu kontrolleri kullanmak için sadece sayfamıza sürükleyip bırakmamız yeterlidir. Asp.net de kullanabileceğimiz kontroller Sunucu Kontrolleri, ve HTML (Istemci) Kontrolleri olmak üzere iki ana gruba ayrılırlar. Bu kontrollerin tamamına Visual Studio içerisinden Toolbox’ı (Araç Kutusu) kullanarak erişebilirsiniz.

Sunucu Kontrolleri (Server Controls)

asp.net uygulamalarında sunucu tarafındaki işlemlerin gerçekleşmesinde rol alacak kontrollere sunucu kontrolleri denir. Bir diğer tanımla aspx sayfasında eklediğimiz kontrollerimize aspx.cs sayfasında yani kod sayfamızda erişip özelliklerinden ve eventlerinden faydalanabildiğimiz kontrollerimizdir. Sunucu kontrolleri sayfanın Source kısmında tanımlarken sunucu tarafından çalışacağı runat=“server” ifadesi ile belirtilir. Bu yazımızda sunucu kontrolleri kendi içerisinde yer alan Standart, Data (Veri), Validation (Doğrulama) ve Navigation (Dolaşım) kontrollerini inceleyeceğiz.

Standart Kontroller (Standard Controls)

Label (Etiket) Kontrol

Sayfada bir metin nesnesi görüntülemek için kullanılır. Genellikle durağan metinleri görüntülemek amacıyla kullanılsa da, bir olayın tetiklenmesiyle de içeriği değiştirilebilir. Bu kontrolün en çok TEXT özelliği kullanılır.

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Literal (Değişmez Etiket) Kontrol

Bu kontrol Label kontrolüne benze fakat BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, gibi özellikleri desteklemez. Ayrıca bu kontrole HTML tarafında style’de uygulamayız. Ek özellikler desteklemeden web sayfamızda statik bir metin görüntülemek için kullanılır.

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

TextBox (Metin Kutusu) Kontrol

TextBox kontrolü, web sayfalarında sıklıkça kullandığımız en önemli kontrollerdendir. Genellikle kullanıcıdan bilgi almak için kullanırız. Veri girişi için kullanılan bir giriş kontrolüdür.

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

TextBox Özellikler

SingleLine: Varsayılan olarak gelir. Kullanıcının tek bir metin satırına bilgi girişini sağlar.
MultiLine: Çok satırlı bilgi girişini sağlar.
Password: Kullanıcı tarafından girilen veriyi gizler.
MaxLength: Kullanıcı tarafından girilen karakter sayısını kısıtlar.

<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server" MaxLength="6" TextMode="Password"></asp:TextBox>

TextBox Event

TextChanged: Texbox kontrolümüzün içeriğinde veya metninde değişiklik olduğu sürece tetiklenir. TextChanged olayı yalnızca, AutoPostBack özelliği True değerine sahip olduğunda çalışır.

Button (Buton-Düğme) Kontrol

Asp.net de üç tip buton kontrolü vardır. Buton kontrolü genel olarak, kullanıcı butona tıkladığında web sayfasını web sunucusuna geri gönderir. Burada Button’un click event’tinde yaptığınız işleme göre bir süreç oluşur.

Button: Varsayılan komut düğmesidir.
Link Button: Link şeklini alan komut düğmesidir.
Image Button: Görünümünü atadığınız resim ile özelleştirebildiğiniz komut düğmesidir.

Button Özellikleri

CausesValidation: Varsayılan olarak True gelir. Eğer true olarak ayarlanmışsa web sayfanızda bir doğruluma işlemi gerçekleştirdiğiyseniz o alanları doğru veri girişi yapıldığını denetler. Aksi halde onaylamayı atlar.
PostBackUrl: Tıklandığında formu belirtmiş olduğunuz sayfaya gönderir.
ValidationGrup: Tıklandığında hangi doğrulama grubunu kontrol edeceğini belirttiğimiz alandır.
OnClientClick: Istemci tarafı bir Click denetimi oluşturur. Örneğin aspx tarafında yazdığımız bir javascript kodunu butonumuza tıklandığında çalıştırılmasını istiyorsak JavaScript metodumuzun adını OnClientClik nesnesine atamamız gerekmektedir.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="Button1"
            UseSubmitBehavior="true"
            Text="Open Web site"
            OnClientClick="Navigate()"
            runat="server" />
    </form>

    <script type="text/javascript">
        function Navigate() {
            javascript: window.open("https://www.alkanfatih.com");
        }
    </script>
</body>
</html>

Button kontrolümüzün en önemli Event’i click eventidir. Butona tıklandığında harekete geçer.

CheckBox (Seçim Kutusu) Kontrol:

CheckBox kontrolü mevcut seçeneklerden bir veya birden fazla seçeneği seçmek için kullanılır. Örneğin kullanıcıya ilgi alanlarını seçtirdiğiniz bir form düşünelim.

CheckBox Özellikleri

Checked: Onay kutusunun işaretli olup olmaması durumu belirttiğimiz alandır. Bool tipinde değer döner.
Text: Onay kutusunun ilişikli metnini almak veya ayarlamak için kullanırız.
AutoPostBack: Onay kutusunun durumunu değiştirdiğimizde sayfamızın servera gidip gelmesini istiyorsak (postback) yapmasını istiyorsak True özelliğini kullanırız. Varsayılan False’dır.

CheckBox kontrolümüzün en önemli event’i CheckedChanged eventidir. Bu event kontrol kutusu üzerinde ki chek işleminde bir değişiklik olduğunda tetiklenir.

CheckBoxList (Çoklu Seçim Kutusu) Kontrol

CheckBox kontrolünün gruplanmış ve listelenmiş halidir. Kullanıcıya bir veya birden fazla seçim yapma imkanı sunar.

RadioButton Kontrol

Mevcut seçeneklerden sadece birinin seçilmesini istediğimizde kullanırız. Radio buton bir kontrol grubu içerisinde çalışır. Bu kontrol grubunun içerisinde ne kadar radio buton olursa olsun yalnızca birini seçmenize olanak verir.

Radio Button Özellikler

GroupName: Radio butonlarımızın kontrol grubunu belirttiğimiz alandır. Eğer bir kontrol grubu oluşturmazsak tüm formu kontrol grubu olarak kabul eder. Böylece form üzerine birden fazla Radio buton ekleseniz de yalnızca birini seçebilirsiniz.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h4>Cinsiyet:</h4>
        <asp:RadioButton ID="RadioButton1" runat="server" Text="Bay" GroupName="Cinsiyet" />
        <asp:RadioButton ID="RadioButton2" runat="server" Text="Bayan" GroupName="Cinsiyet" />
        <h4>Meslek:</h4>
        <asp:RadioButton ID="RadioButton3" runat="server" Text="Mühendis" GroupName="Meslek" />
        <asp:RadioButton ID="RadioButton4" runat="server" Text="Yönetici" GroupName="Meslek" />
    </form>
</body>
</html>

RadioButton kontrolümüzün en önemli event’i CheckedChanged eventidir. Bu event kontrol kutusu üzerinde ki chek işleminde bir değişiklik olduğunda tetiklenir.

RadioButtonList Kontrol

RadioButton kontrolünün gruplanmış ve listelenmiş halidir. Kullanıcı listedeki seçeneklerden yalnızca bir tanesini seçebilir.


DropDownList, ListBox, RadioButtonList, CheckBoxList, Bulleted List

Liste kontrollerinin önemli ortak özellikleri bulunmaktadır.

SelectedValue: seçili öğenin değerini geri döndürür.
SelectedIndex: seçili öğenin indeksini (sıra numarasını) geri döndürür.
SelectedItem: seçili öğenin metnini geri döndürür.
Items: öğenin eleman sayısını geri döndürür.
DataTextField: Öğelerin metnini sağlamak için kullanılır. Genellikle bu alan bir ver tabanından gelir.
DataTextValue: Öğelerin değerini sağlamak için kullanılır. Genellikle bu alan bir ver tabanından gelir.
DataSourceID: Veri kaynağının kontrol kimliğini sağlar.

Bu kontrollere veri yüklemenin birden fazla yolu vardır.

  • Veri tabanı üzerinden öğe ekleme.
  • Direk kod ile öğe (items yoluyla) ekleme.
  • Özellik penceresinden (items yoluyla) öğe ekleme.
  • HTML kullanarak öğe ekleme.
  • Dahili veri tabanı denetimleri kullanarak veri ekleme.

DropDownList kontrol

Listelenen birden fazla öğeden tek bir seçim yapmamız gerektiği durumlarda kullanırız. Açılır bir metin penceresi sunar.

ListBox Kontrol

bir pencere içerisinde listelenmiş öğeler üzerinden birden fazla seçim yapmamıza olanak sağlar.

BulletedList Kontrol

öğeleri farklı stillerde görüntülemek için çok zengin bir içeriğe sahiptir. Listeyi sıralı veya sırasız olarak gösterebilirsiniz. Her liste öğesi için bir text, bir linkbuton ve benzeri kontroller oluşturabilirsiniz.

BulletedList kontrolünün, BulletStyle özelliğini kullanarak listelenen verilerinizin görünümünü özelleştirebilirsiniz. Desteklediği tipler aşağıdadır.

Circle, CustomImage, Disc, LowerAlpha, LowerRoman, NotSet, Numbered, Square, UpperAlpha, UpperRoman


Image Kontrol

Sayfada GIF, JPG, PNG veya kabul edilebilir diğer formatlarda resim göstermek için kullanılır. HTML’deki <img> etiketi ile benzerdir.

ImageMap Kontrol

Bir resim üzerinde koordinatlara göre başka sayfalara veya sayfa içerisindeki bir noktaya bağlantı atamak için kullanılır. Koordinatlar, poligonal, dairesel veya karesel olabilir.

ImageMap kontrolümüzün, CircleHotSpot özelliğini kullanarak resim üzerinde tıklanacak alanın koordinatlarını, şeklini, text’tini ve url’sini belirleyebiliriz.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/Images/world.jpg">
                <asp:CircleHotSpot
                    NavigateUrl="#"
                    X="75"
                    Y="290"
                    Radius="75"
                    HotSpotMode="Navigate"
                    AlternateText="GÜney Amerika"></asp:CircleHotSpot>

                <asp:CircleHotSpot
                    NavigateUrl="#"
                    X="75"
                    Y="120"
                    Radius="75"
                    HotSpotMode="Navigate"
                    AlternateText="Kuzey America"></asp:CircleHotSpot>
            </asp:ImageMap>
        </div>
    </form>
</body>
</html>

HiddenValue Kontrol

Sayfadan, sayfaya veri aktarmak için kullanılabilecek olan ve tasarımda görünmeyen bir kontroldür.

Literal Kontrol

İçine başka kontroller alabilen bir “Container Control” dür. Gizlendiği zaman içindeki tüm kontrol ve veriler ile gizlenir. Çalışma zamanında dinamik olarak sayfaya elementler eklemek istendiğinde kullanılır. Yani içerisine HTML kodları gönderebileceğimiz ve istediğimiz zamanda sayfa üzerinden gönderdiğimiz html kodların aktif olmasını sağlayan bir yapıdır.

Panel Kontrol

Literal kontrolü gibi diğer kontrolleri ver içerikleri gruplamak için kullanılan bu kontrolde gizlendiği zaman içindeki tüm kontrolleri gizlemiş olur. Literal’dan farklı olarak içerisini sürükle bırak ile dinamik kontrol ataması yapabiliriz.

PlaceHolder Kontrol

Literal ve Panel kontrollerine çok benzeyen bu kontrolde aynı işlevleri görür.

Calender Control

Sayfaya gelişmiş bir takvim eklemek için kullanılır. Takvim kontrolü üzerinden tarih seçimi (ay, gün, yıl veya tam tarih) ve tarih formatı işlemlerini gerçekleştirebiliriz.

Calender Control Event

SelectionChanged: Bir tarih seçimi yapıldığı zaman harekete geçer.
DayRender: Takvim kontrolünün her veri hücresi işlendiğinde harekete geçer.
VisibleMonthChanged: Kullanıcı bir ay değiştirdiğinde harekete geçer.

AdRotator Kontrol

Sayfaya bir rekleam değiştirgeci ekler. Bir XML dosyasından aldığı bilgilere göre sayfada reklamların değiştirilerek gösterilmesini sağlar. AdvertisementFile özelliğini kullanarak hazırladığımız XML dosyasının adresini belirtmemiz yeterlidir.

Örnek XML Dosyası

<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
       <Ad>
            <ImageUrl>∼ /Images/logo1.png</ImageUrl>
            <NavigateUrl>http://www.TutorialRide.com</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>banner</Keyword>            
      </Ad>
      <Ad>
            <ImageUrl>∼ /Images/logo2.png</ImageUrl>
            <NavigateUrl>http://www.TutorialRide.com</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>banner</Keyword>           
      </Ad>
      <Ad>
            <ImageUrl>∼ /Images/logo3.png</ImageUrl>
            <NavigateUrl>http://www.CareerRide.com</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>100</Impressions>
            <Keyword>banner</Keyword>            
      </Ad>
      <Ad>
            <ImageUrl>∼ /Images/logo4.png</ImageUrl>
            <NavigateUrl>http://www.TutorialRide.com</NavigateUrl>
            <AlternateText>Advertisement</AlternateText>
            <Impressions>50</Impressions>
            <Keyword>banner</Keyword>            
      </Ad>
</Advertisements>

AdRotator Özellikler

ImageUrl: Gösterilecek resmin adresini temsil eder.
NavigateUrl: Reklama tıklandığında gideceği adresi temsil eder.
AlternateText: Resim gösterilmiyorsa, resim yerine metin görüntülemek için kullanılır.
Impressions: Bir reklamın ne sıklıkla görüneceğini belirleyen sayıdır.
Keyword: Reklamları filtrelemek veya bir reklam grubunu tanımlamak için kullanılır.

Wizard Kontrol

Sayfada adım adım çalışacak bir sihirbaz oluşturmak için kullanılır. WizardStep kontrolü ile wizard içerisine adımlar tanımlanmaktadır.

Wizard kontrolü, çok sayıda alt formda çalışabilecek şekilde uzun bir form tasarlamamıza olanak sağlar. Görevi adım adım işlemle gerçekleştirmemiz gereken durumlarda oldukça sık kullanılır.

WizartStep ile ilişkilendirilen StepType, o adım için görüntülenecek gezinti butonlarının tipini belirler.

  • Start
  • Step
  • Finish
  • Complete
  • Auto
<asp:Wizard ID="Wizard1" runat="server" Height="75px" Width="140px">
         <WizardSteps>
                <asp:WizardStep runat="server" title="Step 1">
                </asp:WizardStep>
                <asp:WizardStep runat="server" title="Step 2">
                </asp:WizardStep>
         </WizardSteps>
</asp:Wizard>

FileUpload Kontrol

Sunucu tarafına dosya yüklenmesinde kullanılır.

Bir Cevap Yazın