Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     AJAX - AsyncFileUpload Kontrolü
     admin     07.01.2013     14:16:38

AJAX’tan ilk bahsetmeye başladığımız yıllarda en çok aldığım sorulardan biri asenkron File Upload işlemi ile ilgiliydi. Asenkron işlem yapabilmek ve sayfanın Refresh atmaması çok hoş bir durumdu ve bu durumu istemciden sunucuya dosya yüklerken de yaşayabilmek istiyorduk. Bugünler bu gibi bir sorunu çözmek için Silverlight kullanmayı tercih etsem de özellikle 2GB’dan ufak dosyaların yüklenmesi noktasında aslında hala eski taktikler kullanılabilir.

Eminim bazılarınız "Yapılıyor zaten AJAX ile" şeklinde içinden cevap verecektir. Tabi ki yapılır fakat pek de kolay değil. İnternette bulunan çoğu çözüm seksen tane ekstra ayar gerektirirken hiçbir ayar gerektirmeden çalışan ASP.NET FileUpload kontrollerinin çoğu ise ücretli olarak karşımıza çıkıyor. Kişisel yorumumla geç kalınmış olsa da artık sonunda AJAX Control Toolkit içerisinde bir FileUpload kontrolü var!



ASP.NET için asenkron çalışan FileUpload kontrolü!

Her zamanki gibi tüm AJAX Control Toolkit kontrollerinde yaptığımız üzere ilk olarak Toolkit’in en güncel DLL’ini sitesinden bilgisayarımıza indiriyor sonra da Visual Studio içerisinde yarattığımız ASP.NET projesineReference olarak Toolkit içerisinde DLL’i ekliyoruz. Eğer sürekli olarak AJAX Control Toolkit kontrollerini kullanacaksanız Toolbox’a da bu kontrolleri ekleyebilirsiniz.

[ASP.NET]

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

Eğer Toolbox’a eklemediyseniz yukarıdaki şekilde Control Toolkit’i kullanacağınız her sayfada elle gerekli tanımlamaları yapmanız gerekiyor ki mark-up tarafında bu assembly içerisinde kontrolleri kullanabilelim. Eğer Toolbox’a kontrolleri eklerseniz zaten sürükle-bırak işlemi ile kontrolü sayfaya yerleştirebilir hale gelirsiniz. Böylece yukarıdaki kod da otomatik olarak yaratılır. İtiraf etmek gerekirse ben de otomatik yaratılanı yukarıya yapıştırdım :)

[Default.aspx]

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </cc1:ToolkitScriptManager>

    <div>

        <cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />

    </div>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </form>

</body>

</html>

Yukarıda basit bir ASP.NET sayfasında AsyncFileUpload kontrolünü bulabilirsiniz. Tabi sayfada ayrıca bir deToolkitScriptManager bulunuyor ki Toolkit kontrollerini kullanabilelim. Son olarak alt tarafta göreceğinizLabel kontrolünü ise sadece sayfanın Refresh atıp atmadığını kontrol etmek için kullanacağız. Dikkatinizi çektiyse AsyncFileUpload kontrolü herhangi bir UpdatePanel içerisinde değil. Zaten normal olanda budur. Fakat eğer isterseniz AsyncFileUpload kontrolünü bir UpdatePanel içerisinde de rahatlıkla kullanabilirsiniz. İşlevsellikte herhangi bir değişiklik olmuyor.

[VB]

Partial Class _Default

    Inherits System.Web.UI.Page

 

    Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object

ByVal e AsAjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete

        AsyncFileUpload1.SaveAs(MapPath("~/Konum/") & IO.Path.GetFileName(e.filename))

    End Sub

 

    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load

        Label1.Text = Date.Now.ToLongTimeString

    End Sub

End Class

Yukarıdaki kodun ilk kısmında önemli olan şey AsyncFileUpload kontrolünün UploadedComplete eventını yakalamak. Adından da anlaşılacağı üzere Upload işlemi bittiğinde bu event çalışıyor ve biz de rahatlıklaAsyncFileUpload kontrolünün SaveAs metodu ile dosyamızı sunucuya kaydedebiliyoruz. Kaydederken de diskteki uygun bir yolu vermekte fayda var.

Alt kısımda göreceğiniz kod ise sayfa her refresh attığında sayfaya o anki saat bilgisini saniyesi ile yazdırıyor. Yaptığınız denemede göreceksiniz ki dosya yüklenmesine rağmen saat bilgisi hiç değişmeyecek. Bu da sayfanın tamamen refresh atmadığının bir kanıtı.

Animasyon göstermek istersek?

Yükleme işlemi asenkron olsa da kullanıcıya her zamanki AJAX animasyonlarından birini göstermek çok önemli. Malum zaten AJAX animasyonu olarak bahsettiğim şey aslında basit ve sürekli aynı animasyonu gösteren bir GIF dosyasından farklı değil.

Örnek AJAX Loading animasyonu.
Örnek AJAX Loading animasyonu.

Bu GIF dosyasını bildiğimiz şekilde ASP.NET sayfasına ekledikten sonra AsyncFileUpload kontrolünün ThrobberID özelliğine Image kontrolümüzün ID’sini vermemiz yeterli olacaktır.

[Default.aspx]

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

    </cc1:ToolkitScriptManager>

    <div>

        <asp:Image ImageUrl="~/ajax-loader.gif" ID="Image1" runat="server" />

        <cc1:AsyncFileUpload ThrobberID="Image1" ID="AsyncFileUpload1" runat="server" />

    </div>

    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </form>

</body>

</html>

Eğer kontrolün tasarımında da hızlı bir değişiklik yapmak isterseniz şimdilik iki farklı tasarım hazır olarak sizi bekliyor.

Kontrolde kullanılabilecek hazır iki farklı tasarım var.
Kontrolde kullanılabilecek hazır iki farklı tasarım var.

Hepinize kolay gelsin. (Daron Yöndem’in yazısından alıntı yapılmıştır.)

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...

okan şeyhoğlu    22.03.2013    16:21:49

Hocam çok güzel olmuş ellerinize sağlık,