Bu yazıda tamamen kendi emeklerimizle, jquery veya başka hazır kütüphane yardımı almadan bir ilerleme çubuğu(progres bar) yapmaya çalışacağız.
Yeni bir ASP.NET MVC projesi yaratarak işe başlıyoruz.
Projelerde genellikle ingilizce değişken adları kullanmaya çalışıyorum ki yazının ingilizcesini hazırlarsam çalışan örnek projeyi değiştimeye gerek kalmasın.
Örnek projede içiçe iki div etiketleri kullanıyoruz. Dıştaki div kapsül, içteki div ise durumu göstermeye yarayacak.
Çalışan uygulama görüntüsünü şu şeklide verelim ki daha fazla merak uyandırmadan düşünce geliştirmeye geçelim.
Yukarda görüldüğü gibi iç içe iki div etiketi içersinde son duruma ait yüzdelik gösterim yapılmış durumda.
İlk olarak css dosyamız içerisinde durum göstergesi için gerekli ayarlamalar şu şekilde belirliyoruz.
#progressBar{
border:1px solid #4771a5;
height:15px;
}
#progressInner{
background-color:#96b1d2;
height:15px;
}
Daha sonra razor view ortamında bir helper kodluyoruz. Helper ise aşağıdaki şekilde olacaktır.
@helper ProgressBar(double BarWidth, double InnerWidth){
BarWidth = BarWidth < 0 ? 100 : BarWidth;
InnerWidth = InnerWidth < 0 ? 100 : InnerWidth;
BarWidth = BarWidth > 400 ? 400 : BarWidth;
InnerWidth = InnerWidth > BarWidth ? InnerWidth = BarWidth : InnerWidth;
string barWidth = BarWidth.ToString() + "px";
string innerWidth = InnerWidth.ToString() + "px";
string persantage = ((int)(InnerWidth / BarWidth * 100)).ToString()+"%";
<div id="progressBar" style="width:@barWidth">
<div id="progressInner" style="width:@innerWidth"></div>
</div>
<label>@persantage</label>
}
Yukarda ProgressBar adında bir helper oluşturulmuş durumda. Helper içerisinde kullanıcının abuk değerler verip gösterge çubuğunu sapıtmaması için bir dizi önlemler alıyoruz. Bar ve Inner değerinin sıfırdan küçük veremesin, dolan mavi kısım Bar değerini geçemesin v.s gibi. Duruma göre daha fazla önlem alınabilir.
Burada dikkat edilmesi gereken husus şudur ki, html etiketlerinin css özellikleri dinamik olarak değişmektedir.
Geriye kaldı ki bu helper nasıl kullanılacak. O da şu şekilde.
<h2>Razor Helper Progress Bar</h2> @ProgressBar(300, 120)
Evet sadece bu kadar. ProgressBar helper’ı artık farklı denemelerle kullanılabilir duruma getirdik.
Nerelerde kullanılabilir?
Veritabanından çekilen değerleri göstermek için ideal bir yöntem olabilir. Örneğin bugün en çok satış yapan çalışanın yaptığı satış bugün yapılan toplam satışların yüzde kaçına tekabül ediyor.
Neden bununla uğraşalım?
Çünkü koda tamamen hakimiz. Yukardaki örnekte Bar yüksekliğini css içerisinde sabitledim. İstersek dışarı çıkarıp Width özelliği gibi dinamik hale getirebiliriz.
Soru: Sizce ProgressBar metodunda double parametreler string dönüşümü yapılmadan style içersine nasıl yerleştirilir?
Uygulamanın çalışan kodları buradadır.
Umarım faydalı olmuştur herkese iyi çalışmalar.