İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 2 Asp.NET Sunucu Kontrolleri

Transkript

1 İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 2 Asp.NET Sunucu Kontrolleri

2 ASP.NET WEB KONTROLLERİ ASP.NET, web sayfalarında kullanılmak üzere çeşitli işlevleri yerine getiren hazır kontroller sunar. Bu kontroller çeşitli özelliklere ve işlevlere sahip olmakla beraber uygulamalarda büyük kolaylıklar sağlamaktadır. Web kontrolleri iki başlık altında sınıflandırılır: Sunucu Kontrolleri İşlevlerini sunucuda gerçekleştirirler. HTML Kontrolleri İşlevlerini istemci tarafında gerçekleştirirler. 2

3 ASP.NET WEB KONTROLLERİ HTML ve Sunucu Kontrollerinin tamamına, Visual Studio içindeki Toolbox (Araç Kutusu) panelinden ulaşılabilir. Kontroller, Toolbox panelinden çalışma alanına sürükle-bırak yöntemi ile sayfaya eklenebilir. Kontroller, görevlerine ve özelliklerine göre gruplandırılmışlardır. Sunucu Kontrolleri 3

4 ASP.NET WEB KONTROLLERİ Kontrol Grupları Standart Temel web programlama işlemleri için kullanılan kontroller yer alır. Data Veri işlemleri için kullanılan kontroller yer alır. 4

5 ASP.NET WEB KONTROLLERİ Kontrol Grupları Validation Veri doğrulaması ve veri kontrolü için kullanılan kontroller yer alır. Navigation Site içi gezintinin sağlanması için kullanılan kontroller yer alır. 5

6 ASP.NET WEB KONTROLLERİ Kontrol Grupları Login Üyelik sistemi için kullanılan kontroller yer alır. WebParts Uygulamanın yönetilebilen ve kişiselleştirilebilen parçalara ayrılmasını sağlar. 6

7 ASP.NET WEB KONTROLLERİ Kontrol Grupları HTML ASP.NET kontrolleri dışındaki sıklıkla kullanılan istemci taraflı çalışan HTML kontrollerinin bulunduğu kontrol grubudur. General Sonradan eklenen kontrollerin yer aldığı gruptur. 7

8 ASP.NET WEB KONTROLLERİ HTML Kontrolleri ASP.NET kontrolleri dışındaki sıklıkla kullanılan istemci taraflı çalışan HTML kontrollerinin bulunduğu kontrol grubudur. Button Reset Submit Text TextArea Password File Checkbox Radio Table Image Select Horizontal Rule (hr) Div 8

9 ASP.NET WEB KONTROLLERİ HTML Kontrolleri 9

10 ASP.NET WEB KONTROLLERİ HTML Kontrolleri 10

11 ASP.NET WEB KONTROLLERİ Sunucu Kontrolleri ASP.NET uygulamalarında sunucu tarafındaki işlemlerin gerçekleşmesini sağlayan kontrollerdir. Toolbox taki HTML grubu hariç bütün kontroller sunucu kontrolleridir. Kontrol kodundaki runat= server ifadesi, kontrolün sunucuda çalışacağını göstermektedir. Kontrollere ait özellikler kod sayfasında değiştirilebileceği gibi Properties panelinde de değiştirilebilir. 11

12 ASP.NET WEB KONTROLLERİ Standart Sunucu Kontrolleri Web uygulamalarında temel işlemleri gerçekleştirmek için kullanılan kontroller standart grubu içinde yer almaktadır. Bu kontroller ASP.NET uygulamalarında en sık kullanılan kontrollerdir. Label TextBox Text Button LinkButton ImageButton HyperLink DropDownList ListBox CheckBox CheckBoxList RadioButton RadioButtonList BulletedList HiddenField Literal Calendar FileUpload 12

13 Label Metin göstermek için kullanılan kontroldür. Gösterilecek olan metin, Label kontrolünün Text özelliğine atanır. Uygulama çalışma anında görüntülenen metin değeri, dinamik olarak değiştirilebilir. Bütün uygulama boyunca Label.Text özelliği değişmeden statik olarak kalıyorsa; sayfaya Label kontrolü yerine doğrudan metin eklenmelidir. 13

14 Label <asp:label ID="Label1" runat="server" Text="Label"></asp:Label> Font : Yazı biçimi ayarları ForeColor : Yazı rengi Text : Varsayılan metin değeri Visible : Görünürlük (True / False) 14

15 Button Tıklandığında belirli bir iş yaptırmak için kullanılan kontroldür. Buton üzerinde yazan metin Button kontrolü Text özelliği ile belirlenir. <asp:button ID="Button1" runat="server" BackColor="#99CCFF" Text="ÇALIŞTIR"/> Varsayılan buton olayı Click tir. Button kontrolü üzerine tıklandığında bu olay tetiklenir. 15

16 Button Sunucu kodları sayfasında Click olayında gerçekleştirilecek işler tanımlanır. Button kontrolü Click olayı, tasarım sayfasında buton üzerine çift tıklanarak oluşturulabileceği gibi Properties panelinden de oluşturulabilir. protected void Button1_Click(object sender, EventArgs e) { buton tıklandığında gerçekleşecek işlemler ; } Buton üzerinde çift tıklayarak Click olayı oluşturulduğunda; Button kontrolünün kodlarına OnClick="Button1_Click" kodlarının eklenir. 16

17 TextBox Kullanıcı ile web sitesi arasındaki etkileşimi sağlayan en temel kontrollerden biridir. Kullanıcılar istenilen bilgileri bu kontrol aracılığıyla belirtirler. Kullanıcılar, TextBox kontrolü ile metin tabanlı bilgiler girer ve bu bilgiler, çalışma zamanı içinde alınıp kullanılabilir. Gerektiğinde veri görüntülemek için de kullanılabilir. 17

18 TextBox <asp:textbox ID="TextBox1" runat="server"></asp:textbox> ForeColor : Yazı rengi BackColor : Zemin / Dolgu rengi Font : Yazı biçimi ayarları MaxLength: Maksimum karakter uzunluğu Enabled: Aktif / Pasif 18

19 TextBox / TextMode Özelliği <asp:textbox ID="TextBox1" runat="server«textmode="singleline"> </asp:textbox> Bu modlarla; TextBox içine yapılacak giriş için farklı gösterimler /özellikler tanımlanabilir. 19

20 TextBox / TextMode Özelliği TextMode SingleLine MultiLine Password Color Date İşlevi TextBox ın tek satır olarak görünmesi sağlanırr. Varsayılan TextMode değeridir. TextBox ın çok satırlı olarak görünmesi sağlanır. TextBox a girilecek bilginin gizli şekilde görünmesi sağlanır. Renk seçim panelinin açılması sağlanır. TextBox a girilecek bilginin tarih formatında ve takvim alanı içinden girilmesi sağlanr. 20

21 TextBox / TextMode Özelliği SingleLine Color MultiLine Password Date 21

22 TextBox / ReadOnly Özelliği Properties alanından ReadOnly özelliği True olarak değiştirilirse; TextBox içine metin girişi yapılamaz. Görünümü aktif şekilde olur. <asp:textbox ID="TextBox7" runat="server" ReadOnly="True"> Bu alana bilgi girişi yapılamaz!!! </asp:textbox> 22

23 TextBox / Enabled Özelliği Properties alanından Enabled özelliği False olarak değiştirilirse; TextBox pasif şekilde görünür ve metin girişi yapılamaz. <asp:textbox ID="TextBox8" runat="server" Enabled="False"> AKTİF DEĞİL </asp:textbox> 23

24 LinkButton Kullanım özelliği Button ile aynıdır; ancak görünümü daha farklıdır. Normal bir bağlantı gibi görünür, Button gibi çalışır. <asp:linkbutton ID="LinkButton2" runat="server" Font-Bold="True" ForeColor="Red" onclick="linkbutton2_click">temizle </asp:linkbutton> 24

25 ImageButton Kullanım özelliği Button ile aynıdır; ancak kontrol içine metin yerine resim eklenir. Sayfa içine eklendikten sonra; ImageUrl özelliği ile buton üzerinde görüntülenecek resim tanımlanır. <asp:imagebutton ID="ImageButton1" runat="server" ImageUrl="~/images/question_mark.jpg"/> 25

26 HyperLink HTML deki <a href= >.</a> etiketine benzer şekilde,bir hedef sayfaya yönlendirme köprü oluşturmak (link vermek) amacıyla kullanılır. Yönlendirilecek sayfa NavigateUrl özelliği ile belirlenir. <asp:hyperlink ID="HyperLink1" runat="server" Font- Bold="True" Font-Size="Large" ForeColor="#CC0066" NavigateUrl=" Target="_blank"> AOSBilişim </asp:hyperlink> 26

27 DropDownList Bir grup öğeyi açılır menü içinde göstermek için kullanılan kontroldür. Listede görüntülenecek öğeler; HTML tarafından durağan olarak eklenebileceği gibi, bir veri kaynağından da eklenebilir. 27

28 DropDownList DropDownlist kontrolü eklendikten sonra; nesne seçiliyken hemen üst-sağ kısmında gelen ok işareti tıklanarak açılan menüde bulunan Edit Items seçeneğiyle veya Properties alanındaki Items özelliği kullanılarak; liste içindeki elemanlar tanımlanabilir. 28

29 DropDownList Liste öğelerinin sırasını değiştirmek için kullanılır. Varsayılan olarak seçili gelmesi istenen liste öğesi için Selected özelliği True yapılmalıdır. Liste öğeleri eklemek veya silmek için kullanılır. 29

30 DropDownList <asp:dropdownlist ID="DropDownList1" runat="server" ForeColor="Maroon" Height="16px" Width="233px"> <asp:listitem>ağ İşletmenliği</asp:ListItem> <asp:listitem>bilgisayar Teknik Servisi</asp:ListItem> <asp:listitem>veritabanı Programcılığı</asp:ListItem> <asp:listitem Selected="True">Web Programcılığı</asp:ListItem> </asp:dropdownlist> 30

31 ListBox Verileri, kullanıcıya liste halinde sunan kontroldür. ListBox kontrolüne öğe ekleme işlemi, DropDownList kontrolüne öğe eklemekle aynıdır. 31

32 ListBox <asp:listbox ID="ListBox1" runat="server" Height="76px"> <asp:listitem>ağ İşletmenliği</asp:ListItem> <asp:listitem>bilgisayar Teknik Servisi</asp:ListItem> <asp:listitem>veritabanı Programcılığı</asp:ListItem> <asp:listitem Selected="True">Web Programcılığı</asp:ListItem> </asp:listbox> 32

33 ListBox SelectionMode özelliği Multiple olarak belirlenerek kullanıcının birden fazla öğeyi seçmesi sağlanabilir. 33

34 CheckBox Kullanıcının işaretleme yaparak seçim yapmasını sağlayan kontroldür. CheckBox kontrolü genellikle bir durumu belirlemek için kullanılır. <asp:checkbox ID="CheckBox1" runat="server" Text="Lisans sözleşmesini kabul ediyorum." /> 34

35 CheckBoxList Eğer aynı alan için birden fazla kutunun işaretlenebilmesi isteniyorsa; CheckBoxList kontrolü kullanılmalıdır. Öğeler, ListBox ve DropDownList kontrollerinde olduğu gibi durağan olarak veya bir veri kaynağına bağlanarak eklenebilir. <asp:checkboxlist ID="CheckBoxList1" runat="server"> <asp:listitem>müzik</asp:listitem> <asp:listitem>spor</asp:listitem> <asp:listitem>sinema</asp:listitem> <asp:listitem>kitap</asp:listitem> <asp:listitem>teknoloji</asp:listitem> </asp:checkboxlist> 35

36 RadioButton Seçenekler arasından sadece bir tanesinin seçilmesini sağlayan kontroldür. <asp:radiobutton ID="RadioButton1" runat="server" Text="Yaptı" /> 36

37 RadioButton Birden fazla RadioButton eklenip sadece bir tanesinin seçilebilir olması isteniyorsa; eklenen kontroller aynı gruba bağlanmalıdır. Aynı seçim grubunda yer alan RadioButtonlar içinden sadece bir tanesinin seçilebilmesi için GroupName özelliği kullanılır. Varsayılan olarak GroupName özelliği atanmamıştır. Birden fazla RadioButton kontrolü eklendikten sonra Properties panelinden GroupName özelliğinin ayarlanması gerekir. 37

38 RadioButton <asp:radiobutton ID="RadioButton1" runat="server" GroupName="askerlik" Text="Yaptı" /> <br /> <asp:radiobutton ID="RadioButton2" runat="server" GroupName="askerlik" Text="Yapmadı / Tecilli" /> <br /> <asp:radiobutton ID="RadioButton3" runat="server" GroupName="askerlik" Text="Muaf" /> 38

39 RadioButtonList CheckBoxList kontrolüne benzer şekilde birden fazla seçenek olan ögeleri kullanıcılara RadioButton olarak sunar ve aralarından bir tanesinin seçilmesini sağlar. Öğeler, diğer List kontrollerinde olduğu gibi durağan olarak veya bir veri kaynağına bağlanarak eklenebilir. Liste yönü RepeatDirection özelliğiyle değiştirilebilir. 39

40 RadioButtonList <asp:radiobuttonlist ID="RadioButtonList1" runat="server"> <asp:listitem>ilkokul</asp:listitem> <asp:listitem>ortaokul</asp:listitem> <asp:listitem>lise</asp:listitem> <asp:listitem>ön Lisans</asp:ListItem> <asp:listitem>lisans</asp:listitem> <asp:listitem>yüksek Lisans</asp:ListItem> <asp:listitem>doktora</asp:listitem> </asp:radiobuttonlist> 40

41 BulletedList Bir grup verinin madde işaretli bir liste halinde görüntülenmesi için kullanılan kontroldür. Öğeler, durağan olarak veya bir veri kaynağına bağlanarak eklenebilir. <asp:bulletedlist ID="BulletedList1" runat="server" Height="78px" Width="202px"> <asp:listitem>ağ İşletmenliği</asp:ListItem> <asp:listitem>bilgisayar Teknik Servisi</asp:ListItem> <asp:listitem>veritabanı Programcılığı</asp:ListItem> <asp:listitem>web Programcılığı</asp:ListItem> </asp:bulletedlist> 41

42 BulletedList / BulletStyle Özelliği Madde işaretlerinin değiştirilmesi için kullanılır. 42

43 BulletedList / BulletImageUrl Özelliği BulletStyle özelliğinden CustomImage seçeneği seçildiğinde BulletImageUrl de belirtilen resim, madde işareti olarak kullanılabilir. 43

44 Calendar Uygulamalarda tarih seçimi yapılması için kullanılır. Calendar kontrolü varsayılan olarak kullanıcılara bir gün seçimi yaptırabilir; gerektiğinde SelectionMode özelliğinden hafta ya da ayın seçilmesi sağlanabilir. <asp:calendar ID="Calendar1" runat="server"></asp:calendar> 44

45 Calendar Auto Format seçenekleriyle takvim biçimi değiştirilebilir. 45

46 FileUpload Arayüz / Sayfa üzerinden sunucuya yüklenebilecek dosyaların seçimi için kullanılan kontroldür. Bu kontrolle dosya yüklemesinin yapılabilmesi için sunucuda gerekli izinlerin verilmiş olması gerekmektedir. <asp:fileupload ID="FileUpload1" runat="server" /> 46

47 FileUpload 47

48 FileUpload Seçilen dosyaya ait yol, sadece ilgili kontrol alanının içine eklenmiş olur. Seçilen dosyanın sunucuya kaydedilmesi için bir Button kontrolü eklenebilir. Button kontrolü Click olayına aşağıdaki kodlar yazılmalıdır. protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { FileUpload1.SaveAs(Server.MapPath("images/" + FileUpload1.FileName)); } } 48

49 FileUpload protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) dosyanın seçilip seçilmediği kontrol edilir. { FileUpload1.SaveAs(Server.MapPath("images/" + FileUpload1.FileName)); } } Dosya, images klasörü içine kendi adıyla kaydedilecektir. Seçilen dosyanın istenen şekilde kaydedilmesi için kullanılan kayıt metodu dosyanın sunucuda kaydedileceği yere ait yol 49