ASP.NET display progress bar during post back

问题

I have a fileupload control on a form and a button. Once a button is clicked the server converts the file into a datatable and loops through datatable records for validation purposes.

My problem: the validation process takes a long time, so i wanted to display current item being processed to user.

My attempts: i found Ajax and SignalR being implemented in such scenarios. However, Ajax requires an update panel to work which cannot work with the updatefile control. I tried SignalR and it works however, it cannot work during a postback --> apparently.

Can anyone assist me in finding a solution.

Thank you!

回答1:

Hey you can use ModalPopupExtender of ajaxToolkit something like this

<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
                 BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender"
                 TargetControlID="hiddenField" PopupControlID="Panel1" DynamicServicePath="" Enabled="True" />
        <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
      <p class="wait">Please wait!</p>

    </asp:Panel> 
     <asp:HiddenField ID="hiddenField" runat="server" />

add the above code any where on your page then on your button of file upload try this

 <input   type="submit" value="Upload" id="upload"
                     causesvalidation="False" onclick="javascript:return validateAdd();"
                    onserverclick="btnupload_ServerClick" runat="server" />

in javascript

   function validateAdd() {
              var myExtender = $find('ProgressBarModalPopupExtender');
                    myExtender.show();
                    return true;
                }

and in code behind

protected void btnupload_ServerClick(object sender, EventArgs e)
{
// your code of upload 
//
// your code of upload 

ProgressBarModalPopupExtender.Hide();
}

this shall do

回答2:

If you only target HTML5 users you can use the FileReader class and stream the file with ajax. This will work with SignalR

I did it like this in my project, maybe it can give you some pointers

(function(app) {
    app.FileUploadViewModel = app.define({
        init: function (parent, file, callback) {
            this.kb = 1024;
            this.bufferSize = this.kb * 512;
            this.speedSampleAt = this.bufferSize; 
            this.file = file;
            this.parent = parent;

            this.reader = new FileReader();
            this.total = this.file.size / this.bufferSize;
            this.current = ko.observable(0);
            this.progress = ko.computed(this.getProgress, this);
            this.speed = ko.observable(0);
            this.speedText = ko.computed(this.getSpeedText, this);
            this.name = this.file.name;

            this.reader.onload = this.onLoadPart.bind(this);
            this.callback = callback;
            this.createStream();
        },
        prototype: {
            createStream: function() {
                app.utils.post("api/upload/createstream", {
                    parentId: this.parent.id,
                    filename: this.file.name
                }, function (id) {
                    this.id = id;
                    this.loadPart();
                }.bind(this));
            },
            getSpeedText: function() {
                return Math.round(this.speed()) + " Mbit / s";
            },
            getProgress: function () {
                return (this.current() / this.total * 100) + "%";
            },
            loadPart: function () {
                var start = this.current() * this.bufferSize;
                this.calculateSpeed(start);
                var blob = this.file.slice(start, start + this.bufferSize);

                this.done = blob.size != this.bufferSize || blob.size === 0;
                this.reader.readAsDataURL(blob);
            },
            onLoadPart: function (part) {
                if (part.loaded === 0) {
                    this.onPartTransfered();
                } else {
                    var base64 = part.target.result.substr(part.target.result.indexOf(",") + 1);
                    app.utils.post("api/upload/Part", { id: this.id, data: base64 }, this.onPartTransfered.bind(this));
                }
            },
            onPartTransfered: function () {
                this.current(this.current() + 1);

                if (this.done) {
                    this.callback(this);
                    app.utils.post("api/upload/closestream", this.id, function (file) {
                        this.parent.addChild(file);
                    }.bind(this));
                } else {
                    this.loadPart();
                }
            },
            calculateSpeed: function (position) {
                if (this.lastSpeedSample === undefined) {
                    this.lastSpeedSample = new Date();
                }

                if (position % this.speedSampleAt === 0) {
                    var delta = new Date() - this.lastSpeedSample;
                    var seconds = delta / 1000;
                    var mbit = this.speedSampleAt / this.kb / this.kb * 8;
                    var speed = mbit / seconds;
                    this.lastSpeedSample = new Date();

                    this.speed(speed);
                }
            }
        }            
    });
})(window.Filebrowser = window.Filebrowser || {});

来源：https://stackoverflow.com/questions/24059067/asp-net-display-progress-bar-during-post-back

标签

ASP.NET

ajax

file-upload

signalr