اغلب کاربران در هنگام بارگزاری فایل یا تصویر انتظار دارند که عملیات پیشرفت بارگزاری را مشاهده کنند . در این مقاله به همراه ذکر یک مثال میخواهیم این عملیات را با استفاده از AJAX UpdateProgress توضیح دهیم

در ابتدا باید در مورد ajax یک توضیجی کوتاه بدهیم : شاید نتوان Ajax را به سادگی توصیف کرد ولی میتوان در یک جمله گفت Ajax ما را قادر میسازد بخشهایی از صفحه را بدون بارگذاری کل صفحه (refresh) به روز رسانی کنیم. مسلماً این قابلیتی است که خیلی ها به دنبال آن هستند زیرا بارگذاری مجدد صفحات وب همواره زمانبر و خسته کننده است ضمن اینکه باعث میشود پهنای باند کاربر نیز بیش از حد مصرف شود. Ajax تکنیکی برای ایجاد صفحات وب سریع و پویا میباشد. Ajax به صفحات وب این امکان را میدهد که به صورت غیر همزمان و تنها با تبادل اطلاعات اندکی با سرور، بخشی از صفحه را به روز رسانی کنند. به این ترتیب میتوان تنها بخش(هایی) از صفحه را بدون بارگذاری کل صفحه به روز رسانی کرد. در صورتی که صفحات معمولی باید کل صفحه را به منظور تغییر محتوا به روز رسانی کنند. بسیاری از سایتهای معروف از جمله Google Maps، Gmail، YouTube و Facebook به شکل وسیعی از این فن آوری استفاده می کنند. یکی از معروفترین مثالهای Ajax، سیستم Google Suggest است که به شکل بسیار زیبایی پیاده سازی شده است. شما عبارتی را در کادر جستجوی Google تایپ میکنید و Google بلافاصله با یک عملیات Ajax پیشنهادهایی را در مورد این عبارت به شما ارائه می کند.

برای نمایش پیشرفت عملیات بارگزاری فایل مطابق مراحل زیر عمل میکنیم :

ابتدا یک پروژه وب سایت در ویژوال استودیو ایجاد می کنیم , سپس یک کنترل File Upload در آن قرار می دهیم .لازم به ذکر است که این کنترل چون از کنترل های Asp میباشد , پس در هنگام کلیک کردن توسط کاربر به سمت سرور ارسال میشود و برای این که این فرایند را (فرایند ارسال اطلاعات از سمت کاربر به سمت سرور) به همراه Ajax UpdateProgress همگام (Sync) کنیم , از AsyncPostBackTrigger در Update Panel مربوط به Ajax استفاده می کنیم .در ادامه تک مربوط به صفحه که در آن یک کنترل FileUpload و یک کنترل اعتبار سنحی Required Field Validator قرار دارد را مشاهده میکند :

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div style="margin: 20px">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:RequiredFieldValidator ErrorMessage="Required" ControlToValidate="FileUpload1"
            runat="server" ForeColor="Red"></asp:RequiredFieldValidator>
        <br />
        <br />
        <asp:Button ID="btnUpload" Text="Submit" runat="server" OnClick="Upload" />
    </div>
</ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>

ایجاد یک کنترل برای نمایش پیشرفت عملیات بارگزاری توسط اسکریپت انجام میشود .

رویداد window.onsubmit را تعریف میکنیم , که در هنگامی که کاربر بر روی دکمه "ارسال" کلیک میکند , اجرا شود .در داخل رویداد Windows.Submit  ابتدا اعتبار سنجی صفحه بررسی میشود , اگر اعتبار سنجی با موفقیت انجام شد , UpdateProgress مربوط به Ajax تابع جاوا اسکزیپت Set Visible را نمایش می دهد

<script type="text/javascript">
window.onsubmit = function () {
    if (Page_IsValid) {
        var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
        window.setTimeout(function () {
            updateProgress.set_visible(true);
        }, 100);
    }
}
</script>