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

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

این مقاله نیازمند این است که شما کمی با 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...";   
       }

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

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

JqueryProgressBar.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

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

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

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

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید