progress bar showing data being copied

Question

I am using knockout, Jquery and WCF services. I load data using ajax. Assuming this is my ajax call code

 function DataLoad() {

        $.ajax({
            url: "../Service/EmpData",
            type: "PUT",
            contentType: 'application/json',
            processData: false              
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            },
            success: function (allData) {
                var item= $.map(Data, function (item) {

                    return new empList(item);
                });
                self.EmpList(item);

            }
        });
    }

In my WCF rest service i loop through records and update the database

 foreach (var rows in EmpTable)
        {
            EmpEntity EmpDetail=
                _EmpRepository.FirstOrDefault(x => x.EmpId== EmpId );

            EmpDetail.RowCount = saveEmp.CreatEmployees();               
            _EmpRepository.Update(EmpDetail);


        }

I want to show progress bar with some text displaying what records its copying.

Any suggestions on how to achieve this?

Answer 1

You can check out my SignalR library

Install using nuget

Install-Package SignalR.EventAggregatorProxy

Follow the few steps needed to set it up here https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki

You also need to implement a Event aggregator on your service. Caliburn micro has a small one, install usting nuget

Install-Package Caliburn.Micro.EventAggregator

Update your service with

foreach (var rows in EmpTable)
        {
            EmpEntity EmpDetail=
                _EmpRepository.FirstOrDefault(x => x.EmpId== EmpId );

            EmpDetail.RowCount = saveEmp.CreatEmployees();               
            _EmpRepository.Update(EmpDetail);
            eventAggregator.Publish(new EntitySavedMessage(EmpDetail));   

        }

On client

MyViewModel = function() {
   signalR.eventAggregator.subscribe(MyNameSpaceOnServer.EntitySavedEvent, this.onSavedEvent, this);
};

MyViewModel.prototype = {
   dataLoad: function() {
   },
   onSavedEvent: function(savedEvent) {
      //Act on saved event
   }
};

MVC4 Demo https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4

update after comment question Whats beautiful with pub / sub is that its async, so you dont need to call anything for the progress to update. How ever since there are more than one EmptDetail I guess? You need to make sure that the client only gets the updates concerning its selected entity id. At a place of your choosing (Where you have access to the entity id) subscribe to the event

signalR.eventAggregator.subscribe(MyNameSpaceOnServer.EntitySavedEvent, this.onSavedEvent, this, { id: this.selectedEmployer.id });

The last argument is stored on the server and used to constraint which events should be sent to this specific client, read up on server side constraint handlers here

https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki/Implement-constraint-handlers

Constraint handler example https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/blob/master/SignalR.EventAggregatorProxy.Demo.MVC4/EventConstraintHandlers/ConstrainedEventConstraintHandler.cs

About the progress bar, you can use Twitter bootstrap or jQuery depending on which library you use in your app. Here is one I did for Boostrap

ViewModel

ProgressBarViewModel = function (progress, total) {
    this.progress = ko.observable(progress);
    this.total = ko.observable(total);
    this.progressProcent = ko.computed(this.getProgressProcent, this);
    this.error = ko.observable();
};
ProgressBarViewModel.prototype = {
    getProgressProcent: function () {
        return (Math.round(this.progress() / this.total() * 100 * 10) / 10) + "%";
    },
    update: function (progress, total, error) {
        this.progress(progress);
        this.total(total);
        this.error(error);
    }
}

View

<div class="progress" data-bind="css: { 'progress-danger': error }">
    <div class="bar" data-bind="style: { width: progressProcent  }"><span data-bind="text: progressProcent"></span></div>
</div>