8 Aralık 2011 Perşembe

ASP.NET UpdateProgress Kontrol

   Son zamanlarda internette sıkça "yükleniyor..." şeklinde mesajlar veya sayfanın yüklendiğini gösteren hareket eden görsel resimler görmeye başladık. Web sitesini görsel açıdan zenginleştiren, aynı zamanda da kullanıcı beklerken sıkılmasını önleyen bu tip uygulamaları siz de UpdateProgress kullanarak yapabilirsiniz.   

   UpdateProgress kontrolü UpdatePanel ile birlikte kullanılan bir kontroldür. Öncelikte sayfanıza bir ScriptManager eklemelisiniz. (Mümkünse sayfanın en üstüne ekleyiniz. Aksi taktirde hata mesajı verebiliyor.) Bir UpdatePanel, UpdateProgress ve bir buton ekliyoruz. 


UpdateProgressKontrolKullan.aspx


<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="ButtonUpdateProgress" runat="server" OnClick="ButtonUpdateProgress_Click"
                    Text="Yükle" />
                <br />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/Resimler/ajax-loader.gif" />
            </ProgressTemplate>
        </asp:UpdateProgress>
        <br />
        <asp:Label ID="Label1" runat="server" Text="Yükleniyor..."></asp:Label>
        <br />
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Button ID="ButtonGonder" runat="server" OnClick="ButtonGonder_Click" Text="Gönder" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
            DisplayAfter="2000" DynamicLayout="False">
        </asp:UpdateProgress>

UpdateProgressKontrolKullan.aspx.cs



protected void Page_Load(object sender, EventArgs e)
        {
            UpdateProgress2.Controls.Add(Label1); 


 /* Programatik olarak UpdateProgress kontrolüne değer atıyorum. 

UpdateProgress2 kontrolünün içerisine yerleştirerek de yapabilirsiniz.


Bu işlemin aynısını tasarım aş
amasındayken de yapabilirsiniz. */

        }
       

        protected void ButtonGonder_Click(object sender, EventArgs e)
        {
         
            System.Threading.Thread.Sleep(5000);  
 
/* Butona tıkladığımda UpdateProgress kontrolünün içeriğinin gözükmesi i
çin bir ifade yazıyorum. 5000 ms = 1 s süresince UpdateProgress kontrolüm
 gözükecek */
        }



   Yukarıdaki kodlarımıza şöyle bir göz atalım. Butonumuza tıkladığımızda 5000 ms yani 5 saniye boyunca ajax-loader.gif simgemiz gözükecek, ardından da kaybolacak. Normalde System.Threading.Thread.Sleep(5000);     gibi bir ifade yazmamıza gerek yok. UpdatePanel güncelleme yaptığında zaten UpdateProgress kontrolü çalışacak ve ilgili resim gösterilecektir. Biz burada uygulamamızın sonuçlarını hemen görebilmek için böyle bir yola başvurduk. Bu arada resim yerine "Yükleniyor..." şeklinde bir yazı da koyabilmeniz mümkün.


Şimdi gelelim UpdateProgress kontrolünün özelliklerine:


  •  AssociatedUpdatePanelID - Eğer sayfanızda birden fazla UpdateProgress veya UpdatePanel kullanıyorsanız bu özellik işinize yarayabilir. Buradan hangi UpdatePanel güncelleme yaptığında UpdateProgress'in gösterilmesi istiyorsanız ilgili UpdatePanel'in ID değerini yazıyorsunuz. Eğer herhangi bir değer yazmazsanız sayfanızdaki herhangi bir UpdatePanel güncelleme yaptığında gözükecektir.
  • DiplayAfter - Bu özellik milisaniye cinsinden sayısal değer alıyor. Varsayılan değeri 500(yani 0,5 saniye) Belirlenen süre sonra UpdateProgress gösterilmeye başlıyor. Kısa sürecek işlemlerde UpdateProgress'in gösterilmesini istemiyorsanız kullanabilirsiniz.
Örnek uygulamayı görmek için tıklayınız.


Alternatif Bağlantı

6 Aralık 2011 Salı

Asp.net Ajax CascadingDropDown

   CascadingDropDown  bir ASP.NET DropDownList kontrolüyle ilişkilendirilerek kullanılan bir AJAX extender türüdür. DropDownList içerisindeki değerleri adeta bir süzgeç süzer. Genellikle birden fazla DropDownList bir arada kullanılır. Seçilen bir değer diğer kontrolü etkiler. 

   Örneğin il, ilçe ve semt bilgilerini 3 tane DropDownList ve ilişkilendirilmiş CascadingDropDown kontrolleriyle kullandığımızı varsayalım. İl alanını seçtiğimizde ilçe alanında sadece o ile ait ilçeler gösterilecektir. Aynı şekilde ilçe değerini seçtiğimizde de o ilçeye ait semtler gösterilecektir. Yani bir filtreleme söz konusu.

   İl, ilçe ve semt bilgilerini filtrelenerek gösterildiği bir örnek üzerinden gidelim:


 İl :&nbsp;
        <asp:DropDownList ID="DropDownListIl" runat="server">
        </asp:DropDownList>
        <asp:CascadingDropDown ID="DropDownListIl_CascadingDropDown" runat="server" 
            Category="il" Enabled="True" ServicePath="ilIlceSemt.asmx" ServiceMethod="Getil" LoadingText="iller yükleniyor..." 
            PromptText="Lütfen bir il seçiniz..." TargetControlID="DropDownListIl">
        </asp:CascadingDropDown>
        <br />
        <br />
        İlçe :
        <asp:DropDownList ID="DropDownListIlce" runat="server">
        </asp:DropDownList>
        <asp:CascadingDropDown ID="DropDownListIlce_CascadingDropDown" runat="server" 
            Category="ilce" Enabled="True" LoadingText="ilçeler yükleniyor..." 
            ParentControlID="DropDownListIl" PromptText="Lütfen bir ilçe seçiniz..." 
            TargetControlID="DropDownListIlce" ServiceMethod="GetileGoreIlce" 
            ServicePath="ilIlceSemt.asmx">
        </asp:CascadingDropDown>
        <br />
        <br />
        Semt :
        <asp:DropDownList ID="DropDownListSemt" runat="server">
        </asp:DropDownList>
        <asp:CascadingDropDown ID="DropDownListSemt_CascadingDropDown" runat="server" 
            Category="semt" Enabled="True" LoadingText="semtler yükleniyor..." 
            ParentControlID="DropDownListIlce" PromptText="Lütfen bir semt seçiniz..." 
            TargetControlID="DropDownListSemt" ServiceMethod="GetilceyeGoreSemt" 
            ServicePath="ilIlceSemt.asmx">
        </asp:CascadingDropDown>


Özellikler:



  • TargerControlID - Yerleştirilecek DropDownList kontrolünün ID değerini veriyoruz. Örneğin : DropDownListIl
  • Category - İlgili DropDownList kontrolünün kategori adı. Örneğin : il
  • PromptText - Kullanıcı DropDownList kontrolünden bir değer seçmeden önce gösterilen metin değeridir. Örneğin : Lütfen bir il seçiniz. (Tercihen kullanılabilir)
  • PromptValue - PromptText gösterildiğinde ayarlanan değer. Bu değer kullanıldığında servis metodlarının ona göre belirlenmesi gerekir. Yoksa hata verebilir.(Tercihen kullanılabilir)
  • EmptyText - DropDownList kontrolünün gösterecek verisi olmadığında tercihen kullanılabilecek bir metin değeridir.
  • EmptyValue - EmptyText gösterildiğinde ayarlanan bir değerdir. (Tercihen kullanılabilir)
  • LoadingText - DropDownList kontrolündeki değer yüklenirken gösterilen bir metindir. Örneğin : LoadingText = "iller yükleniyor..."
  • ServicePath - DropDownList kontrolüne yerleştirilmek üzere kullanılan verinin döndürüldüğü web servis metodunun yolu. ServisMethod bir page metot şeklinde tanımlanmışsa bu özellik null olmalı. Web servisin System.Web.Script.Services.ScriptService özelliği dekore edilmeli.
  • ServiceMethod - DropDownList kontrolüne gelen verinin döndürüldüğü servis metodu. Aşağıdaki formata uygun olmalıdır :
[System.Web.Services.WebMethod] 
[System.Web.Script.Services.ScriptMethod] 
public CascadingDropDownNameValue[] GetDropDownContents( string knownCategoryValues, string category) { ... }


Not : Methodun adı farklı olabilir ama dönen tip, parametre adları ve tipleri yukarıdaki formata uygun olmalı. Örneğin GetDropDownContents yerine Getil kullanılabilir.


  • ParentControlID - Bu DropDownList kontrolünü kontrol eden DropDownList kontrolünün ID değeri. Örneğin DropDownLisIl DropDownListIlce kontrolünün parent kontrolüdür ve DropDownListIlce kontrolünün içeriği DropDownList kontrolünden seçilen değere bağlıdır.(Tercihen kullanılabilir)
  • Selected Value - DropDownList kontrolü içerisinde varsayılan olarak seçilmesini istediğimiz değer varsa burada belirleyebiliriz. DropDownList kontrolümüzün içerisindeki değerlerden birisi olmalıdır. 
ilIlceSemt.asmx : 

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class il : System.Web.Services.WebService
    {
        SqlConnection baglanti = new SqlConnection(WebConfigurationManager.ConnectionStrings["IlIlceSemtConnectionString"].ConnectionString);
        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public CascadingDropDownNameValue[] Getil(string knownCategoryValues, string category)
        {
           List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
           
            baglanti.Open();
            SqlCommand komut = new SqlCommand("select Ad, IlID from iller", baglanti);
            SqlDataReader reader = komut.ExecuteReader();              
            while (reader.Read())
            {
                values.Add(new CascadingDropDownNameValue(reader["Ad"].ToString(), reader["IlID"].ToString()));
                
            }
            
            baglanti.Close();
            return values.ToArray();
        }

        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public CascadingDropDownNameValue[] GetileGoreIlce(string knownCategoryValues, string category)
        {
            List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
            StringDictionary kv = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            baglanti.Open();
            int IlID = Convert.ToInt32(kv["il"]);
            SqlCommand komut = new SqlCommand("select Ad,IlceID from ilceler where IlID = " + Convert.ToInt16(IlID) + "", baglanti);
            SqlDataReader reader = komut.ExecuteReader();
            while (reader.Read())
            {
                values.Add(new CascadingDropDownNameValue((string)reader["Ad"], reader["IlceID"].ToString()));

            }
            baglanti.Close();
            return values.ToArray();
        }

        [System.Web.Services.WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public CascadingDropDownNameValue[] GetilceyeGoreSemt(string knownCategoryValues, string category)
        {
            List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
            StringDictionary kv = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            baglanti.Open();
            int IlceID;          
            
            if (!kv.ContainsKey("ilce") || !Int32.TryParse(kv["ilce"], out IlceID))
            {
                return null;
            }
            SqlCommand komut = new SqlCommand("select Ad,SemtID from semtler where IlceID = " + IlceID + "", baglanti);
            SqlDataReader reader = komut.ExecuteReader();
            while (reader.Read())
            {               
                    values.Add(new CascadingDropDownNameValue((string)reader["Ad"], reader["SemtID"].ToString()));     

            }
            baglanti.Close();
            return values.ToArray();
        }
    }


contextKey Özelliğinin Kullanımı

     ContextKey alanlarına Eval ile istediğim özellikleri bağlıyorum. 

ContextKey='<%# Eval("sehir") %>' UseContextKey="true" ). 

asmx uzantılı servis dosyamda da string contextKey alanını ekliyorum.

( public CascadingDropDownNameValue[] Getil(string knownCategoryValues, string category, string contextKey) )

values.Add(new CascadingDropDownNameValue(il_ad, reader["il_id"].ToString(),il_ad==contextKey));

   Yukarıda yapmaya çalıştığım şey aslında DetailsView içerisinde CascadingDropDown kullandığımızda güncelleme işlemi yaparken DropDownList kontrolünde daha önceden seçili olan verilerin gösterilmesidir. CascadingDropDown kullanmadan bu işlemi DropDownList kontrolünün SelectedValue özelliğine Bind yaparak gerçekleştirebilirsiniz. contextKey alanına farklı değerler atayarak farklı amaçlar için kullanabilirsiniz.Bu arada aşağıdaki uygulamada bu kısım yok.


İLGİLİ BAĞLANTILAR

  1. Ajax CascadingDropDown Extender- Method Error 500/12031

5 Aralık 2011 Pazartesi

AsyncFileUpload ve FileUpload - Resim Boyutlandırma

   Sunucuya bir resim yüklediğimizde bu resmi bazen küçültmek veya boyutlandırmak isteyebiliriz. Bu konuda pek çok farklı yöntem bulunmaktadır. Bu yöntemlerden birini bugün burada anlatmaya çalışacağım.


using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;


Yukarıdaki namespace alanlarını sayfanızın en üstüne yapıştırınız. Bitmap veya FileInfo gibi sınıflar bu namespace alanları içerinde tanımlanmıştır.


protected void AsyncFileUploadIlan_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
  { 


 AsyncFileUploadIlan.SaveAs(Server.MapPath("~/Resimler/" + AsyncFileUploadIlan.FileName));   // dosyayı geçici olarak ilgili klasöre kaydediyoruz
                    ResimBoyutlandir();         // metodumuzu çağırıyoruz

}






 private void ResimBoyutlandir()
 {
            using (Bitmap OriginalBM = new Bitmap(Server.MapPath("~/Resimler/" + AsyncFileUploadIlan.FileName)))   // geçici olarak kaydettiğimiz resmi getiriyoruz
            {
                Size newSize = new Size(300,300);   // resmin boyutunu ayarlıyorum
                Bitmap Resizebm = new Bitmap(OriginalBM, newSize);  // boyutlandırılmış Bitmap              
                                                                                                              // resmimi oluşturuyorum
                Resizebm.Save(Server.MapPath("~/Resimler/ilan/" +  AsyncFileUploadIlan.FileName));     //  resmi istediğim klasöre kaydediyorum
                OriginalBM.Dispose();
            }
            FileInfo fi = new FileInfo(Server.MapPath("~/Resimler/" + AsyncFileUploadIlan.FileName));   
            fi.Delete();   // geçici olarak kaydettiğim resmi siliyorum
}


   Yukarıdaki metodumuz kullanacağız. Bu metodu kullanmak istediğiniz sınıfın içerisine yapıştırınız. Burada klasör adlarını uygulamanıza göre değiştirmeniz gerekiyor. Ayrıca yazmak istediğiniz klasörlerde de yazma izninin verilmiş olması gerekiyor. Aksi takdirde hata ile karşılaşırsınız.

   Ben burada genişliği : 300 px ve yüksekliği : 300 px olan bir resim boyutu tanımladım. Siz bu boyutu istediğiniz gibi belirleyebilirsiniz. Burada önemli bir nokta var. Peki resmimizin boyutu bu değerlerden küçükse ne olacak ? Sorunun cevabı oldukça basit aslında. Elbette ki bu sefer tam tersi resmin boyutunu büyültecek. Eğer bunun olmasını istemiyorsanız, yani resminizin eni ve boyu belli bir değerden küçükse boyutlandırma yapmadan kaydetmek istiyorsanız yukarıdaki kodlarda biraz değişiklik yapmak gerekiyor:

protected void AsyncFileUploadIlan_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
  { 

 AsyncFileUploadIlan.SaveAs(Server.MapPath("~/Resimler/ilan/" + AsyncFileUploadIlan.FileName));   // dosyayı geçici olarak ilgili klasöre kaydediyoruz
                    ResimBoyutlandir();         // metodumuzu çağırıyoruz

}


  private void ResimBoyutlandir()
   {
  using (Bitmap OriginalBM = new Bitmap(Server.MapPath("~/Resimler/" + AsyncFileUploadIlan.FileName)))
            {
                if (OriginalBM.Width > 300 || OriginalBM.Height > 300)
                {
                    Size newSize = new Size(300, 300);
                    Bitmap Resizebm = new Bitmap(OriginalBM, newSize);


              Resizebm.Save(Server.MapPath("~/Resimler/ilan/" + AsyncFileUploadIlan.FileName));
                    OriginalBM.Dispose();
                }
            }            
 }



Dikkat : Dosyamızı geçici olarak kaydettiğimiz klasör ile kalıcı olarak kaydettiğimiz klasör farklı olmalı yoksa hata mesajı ile karşılaşırsınız.


İLGİLİ BAĞLANTILAR:




1 Aralık 2011 Perşembe

ASP.NET AJAX AsyncFileUpload - Dosyanın Boyutunu Kontrol Etmek

protected void AsyncFileUpload1_UploadedComplete (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
{
   if (AsyncFileUploadProfilFotografEkle.PostedFile.ContentLength > 1024000)
          Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Success", "<script                         type='text/javascript'>alert('Dosyanın boyutu en fazla 1 mb olabillir.');</script>");

}

   Bir uygulama tasarlarken belleği etkin kullanmak temel ilkelerden biridir. Sunucumuzdaki alan sınırlıdır. Bu yüzden de bazı dosyaların boyutuna sınırlar getirildiğini internetteki pek çok sitede görebilirsiniz. Burada dosyanın maksimum boyutunu 1mb = 1024000 byte olarak belirledik. Siz bu değeri istediğiniz gibi değiştirebilirsiniz.



İLGİLİ BAĞLANTILAR:


Asp.net Ajax AsyncFileUpload - Yüklenen Dosyayı Silmek

   Bazen yüklediğimiz dosyayı silmek isteyebiliriz. Aşağıda veritabanından silmek istediğimiz dosyanın adını getirip ilgili klasörden nasıl silebileceğimizi görüyoruz. Resim dosyası haricinde diğer dosyalar için de aynı kodları ve mantığı kullanabilmek mümkün. AsyncFileUpload kontrolüyle yeni bir dosya yüklendiğinde de eski dosya varsa silinmesini isteyebiliriz. Bunun için yukarıdaki kodları UploadedComplete yordamının içine eklemeniz yeterli olacaktır. Tabi yeni dosya adını da veritabanına eklemeyi unutmuyoruz.

SqlConncetion   baglanti = new SqlConnection(WebConfigurationManager.ConnectionStrings["GonulluOlmakIstiyorumConnectionString"].ConnectionString);  // Bağlantı cümlesi
   
baglanti.Open();  
            SqlCommand komut = new SqlCommand("select ResimAd from Resim where ResimNo = " + Session["ResimNo"] + "", baglanti);
            SqlDataReader reader = komut.ExecuteReader();
            if (reader.Read())
            {
                string ResimAd = reader["ResimAd"].ToString();
                if (String.IsNullOrEmpty(ResimAd) == false)
                {
                    System.IO.File.Delete(Server.MapPath("~/Resimler/" + ResimAd));
                }
            }
baglanti.Close();

ASP.NET AJAX AsyncFileUpload - Dosyanın Uzantısını Kontrol Etmek

   AsyncFileUpload kontrolü ile dosya yüklerken dosyanın uzantısını kontrol etmek isteyebiliriz. Bunun için farklı yoller denemek mümkün. Aşağıda dosya formatının resim olup olmadığı kontrol ediliyor. Eğer resim formatındaysa kayıt işlemi gerçekleşiyor.

protected void AsyncFileUpload1_UploadedComplete (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 
{
 if (AsyncFileUploadProfilFotografDuzenle.ContentType.Split('/').Contains("image")) 
 { 
     string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);       AsyncFileUpload1.SaveAs(strPath); 
 }
else
{
       Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Success", "<script   type='text/javascript'>alert('Dosya resim formatında olmalı. (jpeg, jpg, png vs.)');</script>"); 

}

28 Kasım 2011 Pazartesi

Asp.net IsPostBack Özelliği

   Sayfanın gene kendine yönlenmesine kısaca postback adı verilir. IsPostBack, page nesnesinin bir özelliğidir. Sayfanın geri postalama durumunu yönetir. Sayfanın ilk yüklendiği durum ile daha sonradan PostBack(geri bildirim) yapılması durumundaki işlemler bu özellik sayesinde belirlenebilir. Peki, bunun anlamı nedir?

Konuyu anlamak için bir örnek yapalım.


       protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                LabelMesaj.Text = "Sayfa postback olmadı.";
                
        }


        protected void ButtonGonder_Click(object sender, EventArgs e)
        {
            if(Page.IsPostBack)
                LabelMesaj.Text = "Sayfa postback oldu.";
        }

Sayfama bir label bir de buton ekliyorum. Sayfa ilk yüklendiğinde şöyle bir ekranla karşılaşıyorum :

Butona bastıktan sonra ise şöyle bir ekranla karşılaşıyorum:

   Butona bastıktan sonra sayfam sunucuya gönderiliyor. Sunucu sayfayı işledikten sonra geri gönderiyor. Sunucunun sayfayı geri göndermesi işlemine postback adı veriliyor. Page.IsPostBack bool bir değer tutuyor. Eğer sayfam postback olmuşsa true, değilse false değerini alıyor.


27 Kasım 2011 Pazar

Asp.net Ajax AsyncFileUpload

   AsyncFileUpload dosyaları sunucuya senkron bir şekilde göndermenizi sağlayan bir ASP.NET Ajax kontrolüdür. Dosya yükleme işleminin sonuçları hem sunucu hem de istemci tarafında kontrol edilebilir.

Olaylar 
  • UploadComplete - Dosya başarılı bir şekilde yüklendiğinde sunucu tarafında meydana gelir.
  • UploadedFileError - Yüklenen dosya bozulduğunda sunucu tarafında meydana gelir.
Özellikleri
  • CompleteBackColor - Yükleme tamamlandığında kontrolün arkaplan rengidir. Varsayılan değeri 'Lime'.
  • ContentType - İstemciden gönderilen dosyanın MIME içerik tipi bilgisini getirir. (Örneğin : image/jpeg)
  • ErrorBackColor - Dosya gönderildiğinde hata oluşursa kontrolün arkaplan rengi. Varsayılan değeri 'Red'.
  • FileContent - Yüklenen bir dosyanın içindekileri okuyabilmek için hazır hale getirmeye yarayan bir stream nesnesi getirir.
  • FileName - İstemci tarafından yüklenen dosyanın adını getirir.
  • HasFile - Kontrolün bir dosya içerip içermediği bilgisini gösterir. Bool değer alır(True/False) Dosya varsa true, yoksa false değeri döndürür.
  • OnClientUploadComplete - Belirtilen javascript fonksiyonu yükleme işlemi başarılı bir şekilde tamamlandıktan sonra çalıştırılır. Örneğin : OnClientUploadComplete = "bitti"
 <script type="text/javascript">
            function bitti() {
                alert("Yükleme işlemi başarılı bir şekilde tamamlandı.");
            }
 </script>
  • OnClientUploadError - İstemci tarafında çalışan javascript fonksiyonunun adını alır. Yükleme işlemi sırasında bir hatayla karşılaşılmışsa çalıştırılır. Örneğin : OnClientUploadError = "hata"
 <script type="text/javascript">
             function hata() {
                alert("Yükleme işlemi sırasında hata meydana geldi.");
            }
 </script>

  • OnClientUploadStarted - Yükleme işlemi başladığında çalıştırılacak javascript fonksiyonunun adını alır. Örneğin : OnClientUploadStarted = "YuklemeBasladi"
 <script type="text/javascript">
             function YuklemeBasladi() {
                alert("Yükleme işlemi başladı.");
            }
</script>

  • PostedFile - Yüklenen dosyaya erişimi sağlayan bir HttpPostedFile nesnesini döndürür.
  • ThrobberID - Dosya yüklenirken gösterilen kontrolün ID değeridir. Örneğin : 

<asp:AsyncFileUpload ID="AsyncFileUpload2" runat="server" 
            onclientuploadcomplete="bitti" 
            onuploadedcomplete="AsyncFileUpload2_UploadedComplete" 
            onclientuploaderror="hata" onclientuploadstarted="YuklemeBasladi" 
            ThrobberID="Image1" />
<asp:Image ID="Image1" runat="server" ImageUrl="~/Resimler/ajax-loader.gif" />

  • UploaderStyle - Kontrolün görüntü sitilidir. 2 farklı değer alabilir. Traditional ve Modern. Varsayılan değeri : 'Traditional'.
 Traditional

               Modern
  • UploadingBackColor - Kontrol upload(yükleme) işlemi yaparken arkaplan rengidir. Varsayılan değeri 'White(beyaz)'.
  • Width - Kontrolün genişlik değeridir. Varsayılan değeri '355' piksel.
Metodlar
SaveAs(string filename) - Yüklenen bir dosyanın içindekileri kaydeder.

Yüklenen Resmi Kayıt Etme

protected void AsyncFileUpload1_UploadedComplete
 (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{  
  if (AsyncFileUpload1.HasFile)
  {
    string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
    AsyncFileUpload1.SaveAs(strPath);
  }
}
   Emin olmamakla birlikte AsyncFileUpload kontrolü büyük ihtimal dosyayı öncelikle sunucunun belleğine yüklüyor. Ardından da yukarıdaki SaveAs komutu ile ilgili klasöre kayıt ediyor. Eğer dosyayı veritabanına kaydetmek istiyorsanız dosyanın adını(AsyncFileUpload1.FileName) kaydederek ilgili resime ihtiyacınız olduğunda ulaşabilirsiniz. Örneğin bir ImageField alanında bir resmi göstermek istiyorsanız Eval("profilFotograf", "~/Uploads/{0}") şeklinde bağlayarak gösterebilirsiniz. profilFotograf alanı veritabanından gelecektir ve ilgili dosyanın adını uzantısıyla birlikte getirecektir. Örneğin : "kalem.jpg" şeklinde.

NOT : Dosyayı klasöre kayıt etmeden önce klasörün yazma izni olup olmadığını kontrol ediniz. Aksi taktirde hata ile karşılaşabilirsiniz.

Dosyanın Uzantısını Kontrol Etme

   AsyncFileUpload kontrolü ile dosya yüklerken dosyanın uzantısını kontrol etmek isteyebiliriz. Bunun için farklı yoller denemek mümkün. Aşağıda dosya formatının resim olup olmadığı kontrol ediliyor. Eğer resim formatındaysa kayıt işlemi gerçekleşiyor.
protected void AsyncFileUpload1_UploadedComplete
 (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{  
  if (AsyncFileUploadProfilFotografDuzenle.ContentType.Split('/').Contains("image"))
  {
    string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
    AsyncFileUpload1.SaveAs(strPath);
  }                
  else
  {
     Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Success", "<script        type='text/javascript'>alert('Dosya resim formatında olmalı. (jpeg, jpg, png vs.)');</script>");
}

Dosyanın Boyutunu Kontrol Etmek


protected void AsyncFileUpload1_UploadedComplete
 (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{  
  if (AsyncFileUploadProfilFotografEkle.PostedFile.ContentLength > 1024000)
                    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Success", "<script type='text/javascript'>alert('Dosyanın boyutu en fazla 1 mb olabillir.');</script>");
}

   Bir uygulama tasarlarken belleği etkin kullanmak temel ilkelerden biridir. Sunucumuzdaki alan sınırlıdır. Bu yüzden de bazı dosyaların boyutuna sınırlar getirildiğini internetteki pek çok sitede görebilirsiniz. Burada dosyanın maksimum boyutunu 1mb = 1024000 byte olarak belirledik. Siz bu değeri istediğiniz gibi değiştirebilirsiniz.

Yüklenen Bir Dosyayı Silmek


SqlConncetion   baglanti = new SqlConnection(WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);  // Bağlantı cümlesi
   
baglanti.Open();  
            SqlCommand komut = new SqlCommand("select ResimAd from Resim where ResimNo = " + Session["ResimNo"] + "", baglanti);
            SqlDataReader reader = komut.ExecuteReader();
            if (reader.Read())
            {
                string ResimAd = reader["ResimAd"].ToString();
                if (String.IsNullOrEmpty(ResimAd) == false)
                {
                    System.IO.File.Delete(Server.MapPath("~/Resimler/" + ResimAd));
                }
            }
            baglanti.Close();


  Bazen yüklediğimiz dosyayı silmek isteyebiliriz. Yukarıda veritabanından silmek istediğimiz dosyanın adını getirip ilgili klasörden nasıl silebileceğimizi gördük. Resim dosyası haricinde diğer dosyalar için de aynı kodları ve mantığı kullanabilmek mümkün. AsyncFileUpload kontrolüyle yeni bir dosya yüklendiğinde de eski dosya varsa silinmesini isteyebiliriz. Bunun için yukarıdaki kodları UploadedComplete yordamının içine eklemeniz yeterli olacaktır. Tabi yeni dosya adını da veritabanına eklemeyi unutmuyoruz.


 Not: Bazı durumlarda herhangi bir hata mesajıyla karşılaşmamamıza rağmen dosya yükleme işlemi gerçekleşmeyebilir. Bu durumda muhtemelen sayfanızda bir hata var demektir. UpdatePanel içerisindeki kontrollerinizde hata olduğunda hata mesajı almayabiliyorsunuz. Böyle bir durumla karşı karşıya kalırsanız sayfanızı tekrar gözden geçirin

26 Kasım 2011 Cumartesi

Asp.net Ajax AlwaysVisibleControl

   AlwaysVisibleControl extender sayfanın istediğimiz bir bölümünde istediğimiz şeyleri göstermemize yarayan bir kontroldür. Sayfada aşağı-yukarı gittiğimizde(kaydırma çubuklarıyla) veya sayfanın boyutunu değiştirdiğimizde içeriğimizin sayfamızın istediğimiz yerinde sürekli gösterilmesini sağlar.

   Herhangi bir asp.net kontrolü için kullanılabilinir. Yatay veya dikey eksende istediğimiz pozisyonda sürekli gözükmesini sağlayabilir.

Özellikleri : 

  • TargetControlID - Sürekli gösterilmesini isteğimiz kontrolün ID değerini veriyoruz.
  • HorizantalOffset - Hedef kontrolümüzün tarayıcının yatay ekseninden ne kadar uzakta bulunmasını istiyorsak ona göre istediğimi değeri veriyoruz. Varsayılan değeri 0'dır. piksel cinsinden değer alır.
  • HorizontalSide - Yatay eksen değerini belirtir. 3 farklı değer alabilir : Left(sol), Right(sağ), Center(merkez) Varsayılan değeri Left.
  • VerticalOffset - Hedef kontrolümüzün tarayıcının dikey ekseninden ne kadar uzakta bulunmasını istiyorsak ona göre istediğimi değeri veriyoruz. Varsayılan değeri 0'dır. piksel cinsinden değer alır.
  • VerticalSide - Dikey eksen değerini belirtir. 3 farklı değer alabilir : Top(yukarı), Middle(orta), Bottom(aşağı) Varsayılan değeri Top.
  • ScrollEfectDuraction - Tarayıcın kaydırma çubuklarıyla hareket ettirilmesi sırasında hedeflenen kontrole uygulanacak efekt süresini belirtiyor. Varsayılan değeri 0,1 saniye.
  • UseAnimation - Kontrol pozisyon değiştirdiğinde animasyon uygulanıp uygulanmayacağı seçiliyor. Varsayılan değeri false.
 <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                    Text="güncelle" />
                <asp:AlwaysVisibleControlExtender ID="Button1_AlwaysVisibleControlExtender" 
                    runat="server" Enabled="True" HorizontalSide="Center" TargetControlID="Button1" 
                    UseAnimation="True" VerticalSide="Middle">





25 Kasım 2011 Cuma

Ajax Accordion Extender

   Accordion birden fazla panelin her seferinde bir tanesini göstermemize izin veren bir web kontrolüdür. CollapsiblePanel kontrolüne benzer bir yapısı vardır. Aynı anda sadece bir panelin genişlemesine izin verilir. Accordion, AccordionPane kontrolleri için geliştirilmiştir. Her bir AccordionPane kontrolü başlık ve içerik bilgileri için template(şablon) bulundururlar.

AutoSize:
3 çeşit AutoSize modunu destekler.

  • None - Accordion kısıtlama olmadan büyüyüp küçülebilir. 
  • Limit - Accoridion belirtilen yükseklik limitinin üzerinde büyüyemez. Eğer içeriğin boyutu yükseklikten fazla ise bu durumda bir scroll bar(kayan çubuk) aracılığıyla içeriği görebilmek mümkündür.
  • Fill - Accordion her zaman aynı yüksekliğinde kalır. 
  1. SelectedIndex - Başlangıçta hangi AccordionPane gösterileceğini belirtir.
  2. HeaderCssClass - Başlık için hangi css sınıfının kullanılacağını belirtir. Bütün AccordionPane elemanları için tek bir css sınıfı belirtilebileceği gibi ayrı ayrı da belirlenebilir.
  3. HeaderSelectedCssClass - Seçili olan başlığın css sınıfı değeri girilir. Bütün AccordionPane elemanları için tek bir css sınıfı belirtilebileceği gibi ayrı ayrı da belirlenebilir.
  4. ContentCssClass - İçerik için kullanılacak css sınıfıdır. Bütün AccordionPane elemanları için tek bir css sınıfı belirtilebileceği gibi ayrı ayrı da belirlenebilir.
  5. FadeTransitions - Bool değer alır. True değerini alırsa geçişler arasında efekt uygular. False değerinde ise normal geçiş uygular. Varsayılan(default) eğeri false.
  6. TransitionDuration - Geçişler arasındaki süreyi belirtir. Milisaniye cinsinden değer alır. Varsayılan(default) değeri 500(yani 0,5 saniye).
  7. FramesPerSecond - Geçiş animasyonlarında saniye başına ne kadar frame düşeceğini belirtir. Varsayılan(default) değeri 15.
  8. RequireOpenedPane - Açık olan AccordionPane elemanına tıklandığında kapanıp kapanmayacağını belirliyor. Varsayılan(default) değeri true. True değeri alınca açık olan AccordionPane elemanının başlığına tıklanınca kapatmıyor fakat false olunca kapatıyor.
  9. SuppressHeaderPostbacks - Eğer başlığınızda bir bağlantı(link) varsa bu değer true olduğunda bağlantının çalışmasını önler. Varsayılan olarak false değerine sahiptir.
  10. Panes - AccordionPane kolleksiyonun bulunduğu kısımdır. AccordionPane elemanları ve özellikleri üzerindeki birtakım değişiklikler bu alan üzerinden yapılabilinir.

 <style type="text/css">  

        .accordion {  

            width: 400px;  

        }  

          

        .accordionHeader {  

            border: 1px solid #2F4F4F;  

            color: white;  

            background-color: #2E4d7B;  
            font-family: Arial, Sans-Serif;  
            font-size: 12px;  
            font-weight: bold;  
            padding: 5px;  
            margin-top: 5px;  
            cursor: pointer;  
        }  
          
        .accordionHeaderSelected {  
            border: 1px solid #2F4F4F;  
            color: white;  
            background-color: #5078B3;  
            font-family: Arial, Sans-Serif;  
            font-size: 12px;  
            font-weight: bold;  
            padding: 5px;  
            margin-top: 5px;  
            cursor: pointer;  
        }  
          
        .accordionContent {  
            background-color: #D3DEEF;  
            border: 1px dashed #2F4F4F;  
            border-top: none;  
            padding: 5px;  
            padding-top: 10px;  
        }  
    </style>  

<asp:Accordion ID="Accordion1" runat="server" ContentCssClass="accordionContent"
            EnableTheming="False" FadeTransitions="True" FramesPerSecond="0" HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected" Height="200px" Width="500px"
            AutoSize="Limit" RequireOpenedPane="False" SuppressHeaderPostbacks="True">
            <Panes>
                <asp:AccordionPane ID="AccordionPane1" runat="server" ContentCssClass="" HeaderCssClass=""
                    BackColor="#99FFCC" BorderColor="#CC33FF" BorderStyle="Double" BorderWidth="2px"
                    Font-Bold="True" Font-Italic="True" Font-Names="AngsanaUPC" Font-Size="Medium"
                    ForeColor="Blue">
                    <Header>
                        Başlık1</Header>
                    <Content>
                        İçerik1</Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane2" runat="server" ContentCssClass="" HeaderCssClass="">
                    <Header>
                        Başlık2</Header>
                    <Content>
                        İçerik2</Content>
                </asp:AccordionPane>
                <asp:AccordionPane ID="AccordionPane3" runat="server" ContentCssClass="" HeaderCssClass="">
                    <Header>
                        Başlık3</Header>
                    <Content>
                        İçerik3</Content>
                </asp:AccordionPane>
            </Panes>
        </asp:Accordion>






24 Kasım 2011 Perşembe

Asp.net Ajax SlideShow Extender

   SlideShow image kontrollerinde kullanılan bir extender türüdür. Buttonlar kullanarak ileri, geri, dur, oynat seçenekleriyle dinamik bir slide gösterisi hazırlamak mümkün. Çalıştırıldığında otomatik başlatma seçeneği bulunmaktadır. Döngü şeklinde slide gösterisini sürekli göstermek mümkün. Ayrıca interval değeriyle resimlerin ne kadar süre arayla gösterilebileceğini ayarlayabilirsiniz. Bir page metod veya web servis kullanarak slide showdaki resimlerin gösterimini sağlayabilirsiniz.



SlideShowExtender.aspx :


 <asp:Image ID="Image1" runat="server" Height="400px" 
            ImageUrl="anasayfa.png" Width="400px"/>
                <asp:SlideShowExtender ID="Image1_SlideShowExtender" runat="server" 
                    AutoPlay="True" Enabled="True" ImageDescriptionLabelID="LabelDescription" Loop="True" 
                    NextButtonID="ButtonIleri" PlayButtonID="ButtonPlay" PlayButtonText="Başlat" 
                    PreviousButtonID="ButtonGeri" ImageTitleLabelID="LabelTitle" SlideShowServiceMethod="GetSlides" 
                    SlideShowServicePath="SlideShow.asmx" StopButtonText="Dur" 
                    TargetControlID="Image1" PlayInterval="1000" >
                </asp:SlideShowExtender>
                <br />
                <asp:Label ID="LabelDescription" runat="server" Text="Label"></asp:Label>
                <asp:Label ID="LabelTitle" runat="server" Text="Label"></asp:Label>
                <br />
                <asp:Button ID="ButtonGeri" runat="server" Text="Geri" />
                <asp:Button ID="ButtonPlay" runat="server" Text="Play" />
                <asp:Button ID="ButtonIleri" runat="server" Text="İleri" />

SlideShow.asmx:




[WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public AjaxControlToolkit.Slide[] GetSlides()
        {
            AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];


            imgSlide[0] = new AjaxControlToolkit.Slide("anasayfa.png", "Resim 2 Title", "Resim 2 Description");
            imgSlide[1] = new AjaxControlToolkit.Slide("Desert.jpg", "Resim 3", "Resim 3");
            imgSlide[2] = new AjaxControlToolkit.Slide("img02.jpg", "Resim 4", "Resim 4");
            imgSlide[3] = new AjaxControlToolkit.Slide("img03.jpg", "Resim 5", "Resim 5");


            return (imgSlide);           
        }


SlideShow Özellikleri:



  • SlideShowServicePath - Webservice bulunduğu dosya yolu. SlideShow Extender resimleri bu servisimiz aracılığıyla alıyor. Yukarıdaki örneğimizde  SlideShowServicePath="SlideShow.asmx" olarak tanımlamıştık. Not : Servis dosyamızın aspx sayfamızla aynı klasörün içerisinde bulunması gerekir. Farklı bir klasörde ise örneğin ajax adlı klasörün içerisinde. SlideShowServicePath="ajax/SlideShow.asmx" şeklinde yazılmalıdır.
  • SlideShowServiceMethod - Resimlerimizin çağrıldığı web servisi metodumuz. Metodun ismi(GetSlides) değiştirilebilir fakat parametre adı ve dönen tip uygun olmalıdır. İnternetteki bazı örneklerde metot static olarak tanımlanmıştır. Benim denemelerimde static metot çalışmıyordu. Yukarıdaki örneğimizde SlideShowServiceMethod="GetSlides" olarak tanımlamıştık.
  • NextButtonID - Bir sonraki resmi görmemizi sağlayan butonun ID değeri. Yukarıdaki örneğimizde NextButtonID="ButtonIleri" olarak tanımlamıştık.

  • PlayButtonID - Slide gösterisini başlatıp durdurabilmemizi sağlayan butonun ID değerini veriyoruz. 

  • PreviousButtonID - Bir önceki resmi görebilmemizi sağlayan butonun ID değerini veriyoruz.




  • PlayButtonText - Play butonunun text alanı. Slide show durduğunda gösterilir. (PlayButtonText="Başlat") 

  • StopButtonText - Play buttonunun text alanı. Slide oynatılırken gösterilir. (StopButtonText="Dur") 

  • PlayInterval - Slide gösterisi oynatılırken resimler arasındaki geçiş süresini belirtir. Milisaniye cinsinden değer alır. (PlayInterval="1000") Örneğin 1000 milisaniye 1 saniyeye tekabül eder.

  • ImageTitleLabelID - Resimlerin başlıkları bu etiket(label) aracılığıyla gösterilebilir. Title değerini servis metodumuzda belirtiyoruz. ( ImageTitleLabelID="LabelTitle") Servis metodunda Resim2, Resim3 olarak belirlenen 2. parametre alanıdır.

  • ImageDescriptionLabelID - Resimlerle ilgili açıklama bilgilerinin gösterildiği etiketin(label) ID değerini veriyoruz. (ImageDescriptionLabelID="LabelDescription" ) Servis metodumuzdaki 3. parametre alanıdır.

  • Loop - Bool değer alır. True değeri verildiğinde slide show durdurulana kadar gösteri devam eder. False değeri verildiğinde ise resimler bittiğinde gösterir durur. Varsayılan değeri false.Loop="True" 

  • AutoPlay - Varsayılan değeri false. True değeri aldığında sayfa yüklenir yüklenmez gösteri çalışmaya başlar. False değerini aldığındaysa play butonuna basılında gösterim başlar. AutoPlay="True"