Question

有人能告诉我如何在从Excel工作表到SQL数据库表的数据被转移时显示动画进度条吗？

我在.aspx页面中有一个表单。在该表单中，有一个FileUpload控件可上载Excel文件。在上传该文件并将其保存在服务器上的同时，我将数据从Excel工作表传输到SQL表。在此转移过程中，我想显示ProgressBar，在转移所有数据后，它会自动删除..

我能做些什么来实现这个目标吗？

Answer 1

我可能会使用jQuery的ajaxForm（）提交表单。

然后，onSuccess使用JSON调用一个函数，该函数开始进一步的AJAX请求，以从您的Web服务器轮询上传进度。除了在ASP.NET中处理文件上载的URL之外，您还需要有另一种方法来返回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应该已经到达服务器，因此我们可以将它传递给我们的worker来读取流，解析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);
    });
}

Answer 2

您可以尝试以下内容：

1）在FileLoadButton上显示ProgressBar单击使用javascript

2）当服务器完成加载文件时，使用.aspx.cs ScriptManager.RegisterStartupScript内部运行javascript for hide ProgressBar

ProgressBar在将数据从Excel工作表传输到SQL数据库表时

2 个答案: