Ajax AsyncFileUpload upload control

Cách đây vài ngày ASP.NET Ajax team  vừa tung ra version mới cho ASP.NET Ajax toolkit, với 1 vài bản vá lổi và cũng cung cấp 2 controls mới hết sức hấp dẫn bao gồm: SeaDragon Java Script Code (SJC)  và AsyncFileUpload Control.

Trong bài này mình sẻ đề cập đến cách làm việc với AsyncFileUpload, 1 control ASP.NET upload bất đồng bộ.

Note: control này làm việc trên Net 3.5 hoặc cao hơn.

Một số đặc trưng:
Có thể được gắn bên trong ASP.NET  Update Panel.
Upload file mà không phải postback.
Cung cấp client và server code.
Tùy chọn màu cho control khi trong quá trình upload cũng như báo hiệu quá trình upload bị thất bại.
Hiển thị cái hình loading…. Khi đang upload.

Một số thuộc tính và phương thức:



CompleteBackColor: Màu nền cho control khi control upload thành công (mặc định màu chanh).
ErrorBackColor: Màu nền cho control khi control upload thất bại (mặc định màu đỏ).
UploadingBackColor: Màu nền cho control khi control đang trong khi upload tập tin.
UploaderStyle: Có 2 lựa chọn style cho control (Traditional ‘default’ và Modern).
ThrobberID: ID của control mà hiển thị khi upload, thường hiển thị hình loading….
HasFile: kiểm tra liệu control có file hay không.

Các sự kiện:
OnClientUploadError: sự kiện client, khi quá trình upload thất bại đoạn javascript chỉ định sẻ được thực thi.
OnClientUploadStarted: cũng là sự kiện client, javascript sẻ được gọi khi khi quá trình upload start, nó sẻ được gọi trước, quá trình upload bắt đầu.
OnClientUploadComplete: Nếu thành công đoạn js sẻ được thực thi.
onuploadedcomplete: server code, hàm này sẻ được thực thi khi quá trình upload hoàn tất,  nhưng nó sẻ được lưu vào session chứ chưa có lưu vào đường dẩn vật lý. Thường thì gọi hàm save file trong sự kiện này.

SaveAs() method: lưu file vào đường dẩn được chỉ định.

Ok, giờ chúng ta có thể bắt đầu.
Đầu tiên chúng ta cần phải download ajax control toolkit mới nhất.

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=33804

Tạo 1 dự án ASP.NET C# hoặc VB.NET.

Thêm Ajax Control toolkit vào toolbox



Sauk hi kéo thả vào web page, visual studio sẻ tự động đăng ký assembly cho chúng ta

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

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

    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)

    {

        if (AsyncFileUpload1.HasFile)

        {

            string strPath = Server.MapPath("~/Uploads/") + Path.GetFileName(e.filename);

            AsyncFileUpload1.SaveAs(strPath);

        }

    }

VB.NET

    Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete

 

        If AsyncFileUpload1.HasFile Then

            Dim strPath As String = Server.MapPath("~/Uploads/") + Path.GetFileName(e.filename)

            AsyncFileUpload1.SaveAs(strPath)

        End If

 

    End Sub

Để hiển thị trình trạng đang uploading khi user upload thì:

<asp:Image ID="Throbber" ImageUrl="~/Loading.gif" runat="server" />

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"

            ThrobberID="Throbber" />

Xong, gần như AsyncFileUpload đả làm mọi việc hết cho chúng ta.

AsyncFileUpload_Ajax.rar (1.39 mb)

Chắc hẳn tất cả các lập trình web đều biết đến Firefox, 1 công cụ debug rất phổ biến hiện nay. Laurent Chesnais đả tạo ra 1 add in cho firebug dành riêng cho các lập trình ASP.NET Ajax, gọi là FireAtlas, bao gồm những đặc trưng như: PageRequestManager events tracing WebService calls tracing and inspection Partial Update inspection within Firebug Net Panel Application components listing More to come! Fire Atlas được download tại đây http://fireatlas.chesnaistechnologies.com/

Hế lô các bạn, Tùng xin past lạ kỹ thuật Callback
Trong ASP.NET 2.0 Microsoft đã đưa một kỹ thuật gọi là Callback, kỹ thuật này cho phép ta ứng dụng Ajax vào ASP.NET một cách dễ dàng. Thật ra kỹ thuật Ajax đã được Microsoft gói gọn trong Callback, cho ta ứng dụng lại dễ dàng hơn.
Sau đây là các bước ứng dụng Callback vào ASP.NET 2.0 :
(Các bạn nên gõ giống hệt thì tốt hơn hết )

1 - thực hiện implement giao diện(interface) ICallbackEventHandler cho một page trong code behide, 2 method này bắt buộc phải giống hệt như bên dưới :

C#:

VB:


2 - thực thi 2 method RaiseCallbackEvent và GetCallbackResult của giao diện ICallbackEventHandler

C#:
#region ICallbackEventHandler Members
//Trả về kết quả ở đây

//bắt lấy các tham số truyền từ Client đến bằng tham số clientArg

#endregion

VB:
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
Return "ASP.NET - callback"
End Function

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
CallBack = eventArgument
End Sub

3- Thực hiện đăng ký hàm Callback cho page
Ta khai báo một biến kiểu String và đăng ký trong sự kiện Page_load :

C#:


VB:


4 - Thực hiện các hàm JavaScript xử lý ở phía Client, các bạn chú ý đoạn Script

Sau đó các bạn dùng một control HTML, trên sự kiện Onclick của nó, các bạn gọi hàm CalltoServer().

Trên là một ví dụ cơ bản về Callback trong ASP.NET 2.0. 

Edit by Bill_Gates - Thank Mr Tùng (owner)

Download code: CS và VB.NET

CallBack.rar (6.57 kb)