.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("http://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.
One comment
Comments are closed.