2014-12-05 3 views
21

Я просто хочу создать индикатор выполнения при длительных вызовах сервера. Я не мог создать запрос на отправку ajax контроллеру, в то время как контроллер выполняет длительную работу.Панель выполнения для длительных вызовов сервера в ASP.Net MVC

Я хочу создать дополнительное действие, чтобы получить фактическое утверждение текущей задачи. Я попытался создать опрос в запросе ajax, тогда я могу вернуть статус со стороны сервера и отобразить его на панели выполнения клиентской стороны. Есть идеи ?

+1

Может быть, посмотрите на SignalR: http://msdn.microsoft.com/en-us/ Журнал/hh852586.aspx – Marthijn

ответ

38

Правильный и простой способ сделать это с помощью SignalR. Пожалуйста, загрузите Microsoft SignalR в https://www.nuget.org/packages/Microsoft.AspNet.SignalR/2.1.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); 

В View,

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

+1

очень полезный код спасибо .. + этот код сценария $ (документ) .ready (функция() { StartInvoicing(); }); – DevC

+2

Возможно ли отправить «SendMessage» только одному клиенту, который открыл эту страницу? – Paul

+1

где определяется getCountAndMessage()? –

1

У меня было долгое обслуживание для этого, я дал базовую идею ниже. Используйте его в соответствии с вашими требованиями.

  1. Я сделал структуру аргументов прогресса ProgressArgs
  2. В сервисном LongRunningProcess долго работает(), обновленные значения прогресса на регулярные промежутки времени и сохраненную в формате JSON в базе данных
  3. Создан метод действий getProgress() который вернет ход строки JSON с помощью ajax.
  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. 

    } 

C# Действие получить прогресс на AJAX

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

Javascript Code

//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.'); 
      } 
     }); 
    } 
+0

проблема здесь, мне нужно вызвать getProgress() с формой submit $ ("# SaveInvoice").Отправить(); getProgress(); то getProgress бросает и код ошибки 0, а не вызывает вызов на стороне сервера –

+0

делает ли ajax? –

+0

есть. ajax выдает код ошибки 1. он не запускает класс действия. –

Смежные вопросы