AJAX Control Toolkit'te yeni AsyncFileUpload Kontrolü

0 dakikada yazıldı

20648 defa okundu

Düzenle

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 projesine Reference 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 de ToolkitScriptManager
bulunuyor ki Toolkit kontrollerini kullanabilelim. Son olarak alt
tarafta göreceğiniz Label 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 As
AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete

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

    End Sub

 

    Protected Sub Page_Load(ByVal sender As Object,
ByVal 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ıkla AsyncFileUpload 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.