نوار پیشرفت jquery در asp.net

سه شنبه 23 دی 1393

در این مقاله میخواهیم progress bar در asp.net را با استفاده از ajax پیاده سازی کنیم

نوار پیشرفت jquery در asp.net

این مقاله نیازمند این است که شما کمی با jquery آشنایی داشته باشید.

به صفحه defualt رفته در  حالت سورس  باشید و آنرا به شکل زیر ویرایش کنید :

<body>  
   <form id="form1" runat="server">   
   <div id="progressbar"></div>   
   <div id="result"></div><br />   
   <asp:Label runat="server"  ID="lbldisp" Text= "Percentage Completed : "/>   
   <asp:Label   runat="server" ID="lblStatus" />   
   <br />   
   <asp:Button ID="btnGetData" runat="server" Text="Get Data" />   
   </form>      
lt;/body> 

حالا باید رفرنس های jquery و css را به صفحه اضافه کنید:

<link type="text/css" href="CSS/ui.all.css" rel="stylesheet" />   
 <script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>   
 <script type="text/javascript" src="Scripts/ui.core.js"></script>   
 <script type="text/javascript" src="Scripts/ui.progressbar.js"></script>  

حالا کد jquery زیر را اضافه کنید:

<script type="text/javascript" language="javascript">   
       $(document).ready(function () {   
           // jquery Progress bar function.   
           $("#progressbar").progressbar({ value: 0 });   
           $("#lbldisp").hide();       
               //button click event   
               $("#btnGetData").click(function () {   
               $("#btnGetData").attr("disabled", "disabled")   
               $("#lbldisp").show();   
               //call back function   
               var intervalID = setInterval(updateProgress, 250);   
               $.ajax({   
                   type: "POST",   
                   url: "Default.aspx/GetText",   
                   data: "{}",   
                   contentType: "application/json; charset=utf-8",   
                   dataType: "json",   
                   async: true,   
                   success: function (msg) {   
                       $("#progressbar").progressbar("value", 100);   
                       $("#lblStatus").hide();   
                       $("#lbldisp").hide();   
                       $("#result").text(msg.d);                           
                       clearInterval(intervalID);   
                   }   
               });   
               return false;   
           });   
       });   
/This function is the callback function which is executed in every 250 milli seconds. Until the ajax call is success this method is invoked and the progressbar value is changed.   
       function updateProgress() {              
           var value = $("#progressbar").progressbar("option", "value");   
           if (value < 100) {   
               $("#progressbar").progressbar("value", value + 1);   
               $("#lblStatus").text((value + 1).toString() +"%");               
           }   
       }                  
   </script>

سپس در صفحه defualt.aspx.cs کد زیر را وارد کنید:

[System.Web.Services.WebMethod]           
       public static string GetText()   
       {   
           for (int i = 0; i < 10; i ++)   
           {     
               // In actual projects this action may be a database operation.   
               //For demsonstration I have made this loop to sleep.   
               Thread.Sleep(2600);   
           }   
           return "Download Complete...";   
       }

حالا برنامه رو اجرا کنید خروجی زیر را مشاهده خواهید کرد:

      

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید