معرفی کنترل ها و تکنیک های موجود در Microsoft AJAX Library - قسمت شانزدهم
  در این مقاله به معرفی کنترل AsyncFileUpload که از کنترل های جدید اضافه شده به AJAX Control Toolkit می باشد، می پردازم.
   Ajax
   ۱۲۹۷۰
   دانلود
   مرتضی صحراگرد
   ۱۳۸۸/۸/۱
ارسال لینک صفحه برای دوستان ارسال لینک صفحه برای دوستان  اضافه کردن به علاقه مندیها اضافه کردن به علاقه مندیها   نسخه قابل چاپ نسخه قابل چاپ

 

مقدمه :

همانطور که احتمالا می دانید، یکی از کنترل هایی که استفاده از آن در داخل UpdatePanel امکان پذیر نمی باشد، کنترل FileUpload می باشد. کنترل FileUpload جهت آپلود نمودن فایل ها استفاده می شود. ازجمله مشکلاتی که این کنترل دارد، این است که هنگام انجام عمل آپلود باید کل صفحه مجددا بارگذاری گردد.

در ضمن، نمایش یک تصویر متحرک هنگام انجام عمل آپلود به سادگی امکان پذیر نمی باشد. این مشکل زمانی خود را نشان می دهد که عمل آپلود مقداری زمانبر باشد.

در نسخه ی منتشر شده از AJAX Control Toolkit در تاریخ 30 سپتامبر، دو کنترل جدید به این مجموعه اضافه شده اند که یکی از آن ها کنترل AsyncFileUpload می باشد. این کنترل جهت رفع مشکلاتی که قبلا به آن ها اشاره نمودم، ایجاد شده است.

در این مقاله به معرفی خصوصیات این کنترل می پردازم.

آغاز:

قبل از اینکه به معرفی این کنترل بپردازم، باید ذکر کنم که این کنترل هم در داخل و هم خارج از UpdatePanel قابل استفاده می باشد و به عبارت دیگر، نیازی به کنترل UpdatePanel ندارد.

کنترل AsyncFileUpload امکانات زیر را ارائه می کند:

  • امکان انجام عمل آپلود، بدون نیاز به بارگذاری مجدد کامل صفحه وب
  • امکان نمایش یک تصویر  متحرک به کاربر ، هنگام انجام عمل آپلود
  • ارائه رویدادهای (Events) مورد نیاز در سمت کلاینت و سرور، جهت اطلاع از وضعیت عملیات آپلود
  • امکان انجام عملیات آپلود، بدون نیاز به کنترل UpdatePanel

اکنون به معرفی صفات و رویدادهای مهم کنترل AsyncFileUpload می پردازم:

صفات:

  • CompleteBackColor: این صفت نام یک رنگ را می گیرد. اگر عملیات آپلود با موفقیت به پایان برسد، رنگ پس زمینه این کنترل برابر رنگی می شود که توسط این صفت مشخص شده است.
  • ErrorBackColor: عملکرد این صفت شبیه صفت قبلی می باشد. با این تفاوت که اگر هنگام عملیات آپلود با شکست روبرو شود، رنگ پس زمینه کنترل، توسط این صفت مشخص می شود.
  • UploadingBackColor : عملکرد این صفت شبیه نیز مشابه دو صفت قبلی می باشد.  با این تفاوت که این رنگ در حین انجام عمل آپلود در پس زمینه کنترل نمایش داده می شود.
  • ThrobberID: این صفت نام کنترلی را نگهداری می کند که هنگام انجام عمل آپلود نمایش داده شده و پس از آن ناپدید می گردد. معمولا این کنترل، یک تصویر متحرک می باشد.
  • UploaderStyle: شکل ظاهری این کنترل توسط این صفت مشخص می شود. مقدار های مجاز برای این صفت Traditional و Modern می باشد. مقدار پیشفرض آن Traditional می باشد که ظاهر کنترل شبیه کنترل معمولی FileUpload می باشد. اگر مقدار این صفت Modern باشد، ظاهر زیباتری پیدا می کند. (ما در ادامه این مقاله از این صفت استفاده خواهیم نمود)

رویداد های سمت کلاینت:

  • OnClientUploadComplete: این رویداد در سمت کلاینت و در صورتی که عمل آپلود با موفقیت انجام شود، اتفاق می افتد.
  • OnClientUploadError: این رویداد در سمت کلاینت و در صورتی که هنگام عمل آپلود خطایی به وجود آید اتفاق می افتد.
  • OnClientUploadStarted: این رویداد در سمت کلاینت و قبل از اینکه انجام عمل آپلود آغاز گردد، اتفاق می افتد.

رویداد های سمت سرور:

  • UploadedComplete: این رویداد در سمت سرور و زمانی اتفاق می افتد که عمل آپلود با موفقیت انجام شده باشد.
  • UploadedFileError: این رویداد در سمت سرور و زمانی اتفاق می افتد که عملیات آپلود با خطا روبرو شده باشد.

اکنون زمان استفاده از این کنترل فرا رسیده است.

یک صفحه جدید ایجاد نموده و کنترل AsyncFileUpload را به آن اضافه می نماییم. سپس قطعه کد آن را به شکل زیر تغییر می دهیم.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
    OnClientUploadError="uploadError"
    OnClientUploadComplete="uploadComplete"
    OnClientUploadStarted="uplaodStarted"
    UploaderStyle="Traditional"
    CompleteBackColor ="GreenYellow"
    ErrorBackColor="Red"
    UploadingBackColor="#CCFFFF"
    ThrobberID="imgLoader"
    OnUploadedComplete="AsyncFileUpload1_UploadedComplete"

/>

عملکرد قطعه کد بالا را قبلا توضیح داده ام.

در قسمت زیر رویدادهای سمت کلاینت را ملاحظه می نمایید.

<script type = "text/javascript">

function uplaodStarted(sender) {

    $get("<%=lblMessage.ClientID%>").style.color = "green";

    $get("<%=lblMessage.ClientID%>").innerHTML = "File uploading started.";

}

function uploadComplete(sender) {

    $get("<%=lblMessage.ClientID%>").style.color = "#33CCFF";

    $get("<%=lblMessage.ClientID%>").innerHTML = "File Uploaded Successfully";

}

function uploadError(sender) {

    $get("<%=lblMessage.ClientID%>").style.color = "red";

    $get("<%=lblMessage.ClientID%>").innerHTML = "File upload failed.";

}

</script>

عملکرد توابع جاوا اسکریپت بالا کاملا مشخص می باشد.

و در قسمت زیر نیز رویداد سمت سرور AsyncFileUpload1_UploadedComplete را ملاحظه می نمایید.

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

{

    //Delay time just for test!

    System.Threading.Thread.Sleep(5000);

 

    string filename = System.IO.Path.GetFileName(AsyncFileUpload1.FileName);

    AsyncFileUpload1.SaveAs(Server.MapPath("Uploads/") + filename); 

}

در قطعه کد بالا، ما فایل مورد نظر را در پوشه ای به نام Uploads ذخیره نموده ایم. ضمنا برای نمایش عملکرد این کنترل، به اندازه 5 ثانیه تاخیر ایجاد نموده ایم.

خوب، کار تمام است. با اجرای برنامه بالا و انجام عمل آپلود با شکل هایی مشابه زیر مواجه خواهید شد.

شکل ظاهری کنترل:

شکل ظاهری کنترل هنگام شروع عمل آپلود:

شکل ظاهری کنترل هنگام اتمام موفقیت آمیز عمل آپلود:

شکل ظاهری کنترل هنگام ایجاد خطا هنگام انجام عمل آپلود:

قطعه کد کامل انجام شده در این مقاله از لینک بالای صفحه قابل دریافت می باشد.