Question

我正在使用knockout，Jquery和WCF服务。我使用ajax加载数据。假设这是我的ajax调用代码

 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);

            }
        });
    }

在我的WCF休息服务中，我遍历记录并更新数据库

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

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


        }

我想显示进度条，其中包含一些显示其复制记录的文本。

有关如何实现这一目标的任何建议吗？

Answer 1

您可以查看我的SignalR库

使用nuget安装

Install-Package SignalR.EventAggregatorProxy

按照在此处设置所需的几个步骤 https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki

您还需要在服务上实现事件聚合器。 Caliburn micro有一个小的，安装usting nuget

Install-Package Caliburn.Micro.EventAggregator

使用

更新您的服务

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));   

        }

在客户端

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

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

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

评论问题后

更新什么与pub / sub很漂亮是它的异步，所以你不需要调用任何东西来进行更新。但是，我猜有多个EmptDetail？您需要确保客户端仅获取有关其所选实体ID的更新。在您选择的地方（您可以访问实体ID）订阅活动

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

最后一个参数存储在服务器上，用于约束应该将哪些事件发送到此特定客户端，在此处读取服务器端约束处理程序

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

约束处理程序示例 https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/blob/master/SignalR.EventAggregatorProxy.Demo.MVC4/EventConstraintHandlers/ConstrainedEventConstraintHandler.cs

关于进度条，您可以使用Twitter引导程序或jQuery，具体取决于您在应用程序中使用的库。这是我为Boostrap做的一个

<强>视图模型

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);
    }
}

查看

<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>

进度条显示正在复制的数据

1 个答案: