ASP.NET BulletedList Kullanımı (Veri Listeleme)

Yazar: admin
2 Yorum

bulletedlist       Bulleted List (maddi imli liste) kısacası verileri listeleme için kullanacağımız ASP.NET Kontrolüdür.. HTML / CSS ile ugraşan arkadaşlarımız bilirler <ul> tagları içerisine yazılan <ol> ‘ yi temsil etmektedir. Kodlarla uğraşmak yerine direk olarak Toolbox’dan  ASP.NET BulletedList kontrolünü ekleyebilirsiniz (bkz:resim)..

    BulletedList’e ekleyeceğimiz verileri isterseniz manuel olarak tek tek ekleyebilir, isterseniz ASP.NET Adrotator kontrolünde yaptığımız gibi verileri uzaktan da çekebilirsiniz (XML dosyası v.b gibi) bu istek tamamen projeye göre şekillenebilir ve iki türlüde kullanabilirsiniz…

    Örnek Uygulama olarak ŞahinSezgin.com üzerinde yer alan kategorileri BulletedList ile tek tek sıralayalım bu işlemi ister manuel olarak isterseniz de kategori isimlerini bir xml veya benzer veritabanı kaynaklarından  çekebilirsiniz..

 

  Şimdi boş bir ASP.NET Web Application oluşturalım ve sonrasında Default isminde bir WebForm ekleyelim son olarak WebForm’a da toolbox sekmesinden bir adet BulletedList kontrolü ekleyelim ve adı otomatik olarak sistem tarafından BulletedList1 olarak verilecektir bunu şimdilik değiştirmiyorum..

[su_note note_color=”#66b6ff” text_color=”#000000″ radius=”5″]1- Verileri Manuel Olarak Ekleme[/su_note]

     

   WebForm’a BulletedList’i ekledikten sonra sayfanın tasarım kısmını açın ve bulletedlist ögesinin sağındaki bu küçük ok işaretini tıkladıktan sonra “Edit Items” a tıklayın..  Daha sonra yandaki resimdekine benzer bir ListItem Collection Editor penceresi çıkacaktır işte buradan “Add” butonuna basarak listemizin elemanlarını tek tek gireceğiz.. Properites kısmından eklediğiniz verilerin sıralamasını, isimlerini ve text değerlerini değiştirebilirsiniz..  ‘Add’ butonuna bastıktan sonra kendi isteğinize göre 3-5 tane kategorisi ismi yazıp ‘OK’ a basın

 

 

    Manuel olarak eklemek işlemini yaptıktan sonra projemizi çalıştırdığımızda yandaki görüntüyü elde edeceksiniz… Görüldüğü üzere gayet basit ve hızlı bir şekilde istediğiniz verileri listeletebilirsiniz..

 

[su_note note_color=”#66b6ff” text_color=”#000000″ radius=”5″]2- Verileri C# ile Ekleme[/su_note]


En başta belirttiğim gibi BulletedList’i WebForm sayfanıza eklediğiniz de kendisi otomatik olarak BulletedList1 ismini vermişti bu ögeye ve bizde bu isimden yola çıkarak ekleme işlemlerini yapacağız. Ben formun Page_Load kısmına yazdım siz bunu bir butonun Click_Event’i ne  yazabilirsiniz..

 

 

bulletedlist-c#-ekleme-2 Yukarida ki örnekten farklı olarak eklediğimiz her bir veriye tek tek erişecek ve bunlar üzerinde işlem yapacaksak her bir item’e özel olarak ID değeri atamamız gerekmektedir ve bununda parametre olarak iletmemiz gerekir. Proje detayına göre ID verebilir veya vermeyebilirsiniz.  Kullanım şekilleri az da olsa farklılık gösteriyor bu farkı gözden kaçırmayın…

[su_note note_color=”#66b6ff” text_color=”#000000″ radius=”5″]3- Verileri Uzaktan Eklemek (XML, SQL V.B yerden)[/su_note]

bulletedlist-xml-veri-ekleme

 Bu örnekte BulletedList verilerimizi bir XML Veri dosyasından çekeceğiz. Siz isterseniz SQL Server veya farklı kaynaklardan da erişim sağlayabilirsiniz.. XML dosyası hazırlanırken belirli bir formatı ve bu format bilgisinin BulletedList’in properties kısmında yer alan DataField (Veri Alanı) kısmına girilmesi şarttır. Formattan kastımız nedir şimdi kısaca bunu açıklayalım.. Projemize bir adet Kategoriler isminde XML dosyası ekledikten sonra her kategoriye yukarıdaki gibi bir adet ID değeri ve Text değeri atanması lazım. Burada ID veya Text yerine siz türkçe bir karsılıkta yazabilirsiniz fakat genel olarak bu kullanıma alışmanız da fayda var sonuç olarak <Kategoriler></Kategoriler> tagları arasına verileri girdiysek ikinci işlem olan veriyi bulletedlist ile eşleştirme kısmına geçelim…

  WebFormumuzun Dizayn kısmına geçelim (1.örnekteki gibi) bu sefer Edit Items yerine “Choose Data Source” (Veri Kaynağını Seç )kısmına tıklayım ve açılan pencerede New Data Source’ye tıkladıktan sonra XML File seçeneğini tıklayın ve Data Field kısmında Browse diyerek oluşturduğunuz Kategoriler.XML dosyasını seçin ve OK deyin.. Visual Studio 2013 öncesini kullanıyorsanız BulletedList’in properties kısmından DataTextField kısmına “Text” DataValueField kısmınada “ID” yazın ve onaylayıp projenizi çalıştırın hepsi bu kadar…

[su_note note_color=”#66b6ff” text_color=”#000000″ radius=”5″]4- BulletedList Görünümünü Değiştirme[/su_note]

bulletedList-Style-Chance

   BulletedList’de verilerimizi listeletirken her bir verinin başına sistem otamatik olarak siyah bir nokta koymaktadır. Biz bunu Word uygulamasında olduğu gibi noktalar yerine roma rakamı, harfler, numaralar veya kendi belirleyeceğimiz bir resmi koyabiliriz. Bunun için yapmamız gereken tek şey eklemiş olduğumuz BulletedList’in Properties (ayarlar) kısmına girip oradan BulletStyle kısmını dilediğiniz seçenekle değiştirebilir ve görünümü farklı kılabilirsiniz..  Ben sizler için yalnızca 6 tanesini değerlendirip örnek olması açısından görselleri de konuya ekledim. 

Not: CustomImage seçeneğini seçerseniz hemen üst sekmede bulunan BulletImageUrl kısmınada bir adet resim eklemeniz lazım ben örnek olması açısından oraya mavi bir ok resmi ekledim.

 

NotSet: Varsıyalan şablon biçimidir ve içi dolu siyah daire şeklinde gözükmektedir.

Numbered: 1’den başlayarak her bir veriye rakam değeri atar.

LowerAlpha: A’dan Z’ye doğru küçük harfler vererek listeleme yapar.

UpperAlpha: A’dan Z’ye doğru büyük harfler vererek listemele yapar.

LowerRoman: 1’den başlayarak küçük roma rakamları ile listeme yapar.

UpperRoman: 1’den başlayarak büyük roma rakamları ile listeme yapar.

Disc: İçi dolu siyah daire şeklinde listeme yapar Default değer ile aynıdır.

Circle: İçi boş siyah daire şeklinde listeleme yapar.

Square: İçi dolu siyah kare şeklinde listeleme yapar.

CustomImage: Sistemde varsıyalan şekillerin yerine sizin belirleyeceğiniz resim görünür. Resmin yolu BulletImageUrl özelliği ile belirtilmelidir..

 

bulletedStyle1bulletedStyle2

bulletedStyle3

bulletedStyle4

 

 

 

 

 

 

 

bulletedStyle6bulletedStyle5

 

 

 

 

 

 

saygılar..

2 Yorum

Tevfik 17 Ağustos 2017 - 16:50

Alt kategorili olarak nasıl yapabiliriz bunu ve linkli olarak

Cevapla
admin 4 Ocak 2018 - 20:23

bunlar artık neredeyse hiç kullanılmıyor. Html ile çok daha rahat yapabilirsin.

Cevapla

Sende Yorum Yaz

This site uses Akismet to reduce spam. Learn how your comment data is processed.