將數據從Excel工作表傳輸到SQL數據庫表時的ProgressBar

Question

任何人都可以告訴我如何在從Excel工作表到SQL數據庫表的數據傳輸過程中顯示動畫進度條嗎？

我有一個窗體在.aspx頁面。在這種形式下，有一個FileUpload控件可以上傳Excel文件。在上傳該文件並將其保存在服務器上的同時，我將數據從Excel工作表傳輸到SQL表。在此傳輸過程中，我想顯示一個ProgressBar，並且在傳輸所有數據後，它將自動刪除。

有什麼我可以做到的嗎？

Answer 1

你可以嘗試這樣的：

1）顯示在FileLoadButton進度點擊利用javascript

2）當內部.aspx.cs ScriptManager.RegisterStartupScript服務器完成加載文件使用了運行JavaScript的隱藏進度

Answer 2

我可能會使用jQuery的ajaxForm（）提交表單。

然後，onSuccess，調用一個函數，開始進一步的AJAX請求，使用JSON輪詢從web服務器上傳的進度。除了有一個URL來處理ASP.NET中的文件上傳之外，還需要另外一種方式來以JSON格式返回某種異步工作程序的進度。

一旦你得到了JSON回來，然後你可以養活這一個jQueryUI的進度條。

例如，在ASP .NET MVC應用程序，我做了這樣的事情：

在視圖Upload.aspx，開始提交

<% using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "UploadForm" })) 
    { %> 
    <div> 
     <input type="file" name="CSVFile" id="CSVFile" /> 
     <button>Upload</button> 
    </div> 
<% } %> 

     var pb = $('#prog'); 
     var pbContainer = $('#pbcont'); 
     var pbPercent = $('#progp'); 
     var uploadForm = $('#UploadForm'); 
     var status = $('#StatusDetail'); 

     uploadForm.ajaxForm({ 
      iframe: true, 
      dataType: 'jason', 
      success: function (data) { 
       beginProcessing($.parseJSON($(data).text()), '" + Url.Action("UploadStatus", "Upload") + @"', pb, pbContainer, status, pbPercent); 
      }, 
      error: function (xhr, textStatus, error) { 
       alert('Error: ' + textStatus); 
      } 
     }); 

控制器的方法來處理初始上傳

在這裏，我創建了一個唯一的ID上傳，當它開始時，這是我可以識別上傳，當我想找出它進步。

我使用的是工人階級我寫了異步處理的處理 - 這是你想開始異步數據插入到數據庫中。

當我們達到這個控制器的方法的時候，因此FileStream應該已經達到了服務器，所以我們可以傳遞給我們的工人來讀取數據流，解析CSV，做數據庫的工作。請注意，在這裏，我通過StreamReader的到我的工作人員，以便它可以處理這一切。

// NOTE: The parameter to this action MUST match the ID and Name parameters of the file input in the view; 
    // if not, it won't bind. 
    [HttpPost] 
    public JsonResult Upload(HttpPostedFileBase CSVFile) 
    { 
     try 
     { 
      if (CSVFile == null || String.IsNullOrWhiteSpace(CSVFile.FileName)) 
       return Json("You must provide the path to your CSV file", "text/plain"); 

      if (!CSVFile.FileName.ToLower().Contains(".csv")) 
       return Json("You can only upload CSV files", "text/plain"); 

      Guid id = worker.BeginImport(dataReporistory, new StreamReader(CSVFile.InputStream)); 



      //return some JSON 
      var json = new 
      { 
       ID = id, 
       name = CSVFile.FileName, 
       size = CSVFile.ContentLength 
      }; 

      return Json(json, "text/plain"); 
     } 
     catch (Exception e) 
     { 
      return Json(Utilities.DisplayExceptionMessage(e), "text/plain"); 
     } 
    } 

控制器方法返回的最新進展

[HttpPost] 
    public JsonResult UploadStatus(Guid id) 
    { 
     UploadJob job = Worker.GetJobStatus(id); 
     return Json(job); 
    } 

JavaScript中的視圖來處理進度條更新

您將會看到上述情況，給ajaxForm。當文件完成上傳時，Submit（）方法將在onSuccess事件期間從這裏調用beginProcessing（）。

它還會傳遞從Upload（）控制器方法獲得的JSON，它告知我們的視圖在從我們的工作人員獲取作業進度時傳遞到更新URL的上傳ID。

一旦beginProcessing被調用，它會做一些工作來設置進度條，但基本上會開始以設置的定時器間隔調用updateProgress（）。 updateProgress是執行從Web服務器的UploadStatus頁面獲取JSON的所有工作的函數。

一旦updateProgress從網絡服務器獲取JSON更新，它會執行一些工作，將它提供給插入到頁面div中的jQuery UI進度欄。

<div id="pbcont"> 
    <p style="display: inline-block;"><strong>Processing...</strong></p> 
    <h3 style="display: inline-block;" id="progp"></h3> 
    <div id="prog"></div> 
    <br /> 
    <div id="StatusDetail"></div> 
</div> 


function beginProcessing(response, url, pb, pbContainer, statusContainer, pbPercent) { 
    if (!response.ID) { 
     alert('Error: ' + response); 
     return; 
    } 

    pb.progressbar({ 
     value: 0 
    }); 

    pbContainer 
     .css('opacity', 0) 
     .css('display', 'block'); 

    //Set the interval to update process. 
    var hasUpdated = false; 
    var intervalID = setInterval(function() { 
     updateProgress(url + '/' + response.ID, pb, statusContainer, pbPercent, intervalID); 
    }, 500); 
} 


function updateProgress(url, pb, statusContainer, pbPercent, intervalID) { 
    //Make an AJAX post to get the current progress from the server 

    $.post(url, 
    function (job) { 
     var newValue = 0; 
     var currentValue = pb.progressbar('value'); 

     //The percentage value retrived from server: 
     newValue = (job != null && job.TotalItems != 0 ? (job.ProcessedItems/job.TotalItems * 100) : 0); 

     if (newValue > 0) 
      hasUpdated = true; 

     if (hasUpdated && job == null) { 
      newValue = 100; 
      statusContainer.html("<strong>Status:</strong> Finished"); 
      clearInterval(intervalID); 
     } 

     if (!hasUpdated) 
      currentValue = currentValue + 1; 

     newValue = Math.max(currentValue, newValue); 
     pb.progressbar("value", newValue); 
     pbPercent.text(Math.round(newValue, 0) + '%'); 
     if (job != null) 
      statusContainer.html("<strong>Upload:</strong> " + job.Status); 
    }); 
}