web-dev-qa-db-ja.com

ASP.Net MVCで長時間実行されているサーバー呼び出しの進行状況バー

長時間実行されているサーバー呼び出し中に進行状況バーを作成したいだけです。コントローラーが長時間実行されているジョブを実行している間、コントローラーへのajax post要求を作成できませんでした。

現在の長時間実行タスクの実際のステートメントを取得するために、追加のアクションを作成したいと思います。私はajaxリクエストでポーリングを作成しようとしましたが、サーバー側からステータスを返し、クライアント側のプログレスバーに表示できます。何か案は ？

asp.netajaxasp.net-mvc
20
Jayakaran Theivendramoorthy

これを行う最も簡単で正しい方法は、SignalRを使用することです。 https://www.nuget.org/packages/Microsoft.AspNet.SignalR/2.1.2 でMicrosoft SignalRをダウンロードしてください

ハブと呼ばれるプロジェクトパスの別のフォルダーにハブクラスを作成し、2つのクラスファイルをハブフォルダーに追加します。

Startup.cs

using Owin;
using Microsoft.Owin;
[Assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

ProgressHub.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace RealTimeProgressBar
{
    public class ProgressHub : Hub
    {

        public string msg = "Initializing and Preparing...";
        public int count = 1;

        public static void SendMessage(string msg , int count)
        {
            var message = "Process completed for " + msg;
            var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
            hubContext.Clients.All.sendMessage(string.Format(message), count);
        }

        public void GetCountAndMessage()
        {
            Clients.Caller.sendMessage(string.Format(msg), count);
        }
    }
}

コントローラーでは、

// assemblies
using Microsoft.AspNet.SignalR;
using RealTimeProgressBar;   


//call this method inside your working action
ProgressHub.SendMessage("initializing and preparing",  2);

ビューで、

<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.--> 
<script type="text/javascript">
  $(document).ready(function () {

    $("#progressBar").kendoProgressBar({
        min: 0,
        max: 100,
        type: "percent",
    });
});

function StartInvoicing()
{
    var progressNotifier = $.connection.progressHub;

    // client-side sendMessage function that will be called from the server-side
    progressNotifier.client.sendMessage = function (message, count) {
        // update progress
        UpdateProgress(message, count);
        //alert(message);
    };

    // establish the connection to the server and start server-side operation
    $.connection.hub.start().done(function () {
        // call the method CallLongOperation defined in the Hub
        progressNotifier.server.getCountAndMessage();
    });
}

// Update the progress bar 
function UpdateProgress(message, count) {
    var result = $("#result");
    result.html(message);
    $("#progressBar").data("kendoProgressBar").value(count);
}
</script>

詳細については、Googleの助けを借りていくつかの既存の記事を参照してください

43
Jayakaran Theivendramoorthy

私はそのために長期にわたるサービスを利用していました。以下に基本的な考え方を示しました。要件に応じて使用してください。

  1. 進捗引数ProgressArgsの構造を作成しました
  2. 長期実行サービスLongRunningProcess（）で、定期的に進行値を更新し、データベースにJSON形式で保存しました
  3. AjaxによるJSON文字列の進捗を返すActionメソッドgetProgress()を作成しました。
  4. 関数Javascript getProgress()関数を作成しました。この関数は、一度開始すると、プロセスが完了するまで進行状況を確認するためにサーバーを定期的に呼び出します。

大まかな例を挙げて実装しました。お役に立てば幸いです。

進行状況引数構造のクラス

public class ProgressArgs
{
    public int Completed { get; set; }
    public int Total { get; set; }
    public int Percentage { get; set; }
    public string Status { get; set; }
}

その過程で、データベースの統計を更新し続けました

    public void LongRunningProcess()
    {

        ProgressArgs result = new ProgressArgs();
        result.Completed = 0;
        result.Total = userList.Count;
        foreach (var item in itemList)
        {
           //Do Some processing which u want to do

            result.Total++;
            result.Percentage = (result.Completed * 100) / result.Total;
            result.Status = "Processing";
            string strToSave = Newtonsoft.Json.JsonConvert.SerializeObject(result);
            //update the strToSave to the database somewhere.
        }

        //after completing of processing
        result.Total++;
        result.Percentage = (result.Completed * 100) / result.Total;
        result.Status = "Completed";
        string strToSave = Newtonsoft.Json.JsonConvert.SerializeObject(result);
        //update the strToSave to the database somewhere.

    }

Ajaxで進行状況を取得するC＃アクション

    public string getProgress()
    {    
        string strJSON = config.GetValue("progress");  //Get stats from the database which is saved in json
        return strJSON;
    }

Javascriptコード

//Ajax Get Progress function
    function getProgress() {
        var dataToSend = '';
        $.ajax({
            url: '@Url.Action("getProgress")', //Link to the action method
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: dataToSend,
            success: function (response) {
                console.log(response);
                if (response != null) {
                    data = JSON.parse(response);
                    console.log(data);
                    //update the progressbar
                    progressbar.progressbar("value", data.Percentage);
                    //When the jobalert status is completed clear the interval
                    if (data.Status == 0) {
                        setTimeout(getProgress, 800); //TImout function to call the respective function at that time
                    }
                    serviceCompleted(data); function to call after completing service
                }
            },
            error: function (xhr) {
                alert('Error: There was some error while posting question. Please try again later.');
            }
        });
    }
1
Pratik Bhoir