Question

在this tutorial之后，我试图在长时间操作中显示各个步骤的进度。基于该示例，我能够在集线器中成功模拟长时间操作，并在每个步骤向客户端报告更新。

更进一步，我现在想要显示在具有[HttpPost]属性的MVC操作方法中发生的实时，长时间运行的进程的状态。

问题是我似乎无法从集线器上下文更新客户端。我意识到我必须创建一个集线器上下文来使用集线器进行通信。我所知道的一个区别是我必须使用hubContext.Clients.All.sendMessage(); VS.示例中列出了hubContext.Clients.Caller.sendMessage();。根据我在ASP.NET SignalR Hubs API Guide - Server中的调查结果我应该能够使用示例中所述的Clients.Caller，但我仅限于在集线器类中使用它。主要是，我只是想了解为什么我无法从动作方法中获得信号。

我提前感谢你的帮助。

我已经创建了我的OWIN Startup()类......

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(HL7works.Startup))]

namespace HL7works
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

我的中心是这样写的......

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

namespace HL7works
{
    public class ProgressHub : Hub
    {
        public string msg = string.Empty;
        public int count = 0;

        public void CallLongOperation()
        {
            Clients.Caller.sendMessage(msg, count);
        }
    }
}

我的控制器......

// POST: /Task/ParseToExcel/
[HttpPost]
public ActionResult ParseToExcel(HttpPostedFileBase[] filesUpload)
{
    // Initialize Hub context
    var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
    hubContext.Clients.All.sendMessage("Initalizing...", 0);

    double fileProgressMax = 100.0;
    int currentFile = 1;
    int fileProgress = Convert.ToInt32(Math.Round(currentFile / fileProgressMax * 100, 0));

    try
    {
        // Map server path for temporary file placement (Generate new serialized path for each instance)
        var tempGenFolderName = SubstringExtensions.GenerateRandomString(10, false);
        var tempPath = Server.MapPath("~/" + tempGenFolderName + "/");

        // Create Temporary Serialized Sub-Directory
        System.IO.FileInfo thisFilePath = new System.IO.FileInfo(tempPath + tempGenFolderName);
        thisFilePath.Directory.Create();

        // Iterate through PostedFileBase collection
        foreach (HttpPostedFileBase file in filesUpload)
        {

            // Does this iteration of file have content?
            if (file.ContentLength > 0)
            {
                // Indicate file is being uploaded
                hubContext.Clients.All.sendMessage("Uploading " + Path.GetFileName(file.FileName), fileProgress);

                file.SaveAs(thisFilePath + file.FileName);
                currentFile++;
            }
        }

        // Initialize new ClosedXML/Excel workbook
        var hl7Workbook = new XLWorkbook();

        // Start current file count at 1
        currentFile = 1;

        // Iterate through the files saved in the Temporary File Path
        foreach (var file in Directory.EnumerateFiles(tempPath))
        {
            var fileNameTmp = Path.GetFileName(file);

            // Update status
            hubContext.Clients.All.sendMessage("Parsing " + Path.GetFileName(file), fileProgress);

            // Initialize string to capture text from file
            string fileDataString = string.Empty;

            // Use new Streamreader instance to read text
            using (StreamReader sr = new StreamReader(file))
            {
                fileDataString = sr.ReadToEnd();
            }

            // Do more work with the file, adding file contents to a spreadsheet...


            currentFile++;
        }


        // Delete temporary file 
        thisFilePath.Directory.Delete();


        // Prepare Http response for downloading the Excel workbook
        Response.Clear();
        Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
        Response.AddHeader("content-disposition", "attachment;filename=\"hl7Parse_" + DateTime.Now.ToString("MM-dd-yyyy") + ".xlsx\"");

        // Flush the workbook to the Response.OutputStream
        using (MemoryStream memoryStream = new MemoryStream())
        {
            hl7Workbook.SaveAs(memoryStream);
            memoryStream.WriteTo(Response.OutputStream);
            memoryStream.Close();
        }

        Response.End();
    }
    catch (Exception ex)
    {
        ViewBag.TaskMessage =
            "<div style=\"margin-left:15px;margin-right:15px\" class=\"alert alert-danger\">"
            + "<i class=\"fa fa-exclamation-circle\"></i> "
            + "An error occurred during the process...<br />"
            + "-" + ex.Message.ToString()
            + "</div>"
            ;
    }

    return View();
}

在我的视图中（已更新以反映详细信息的答案）...

@using (Html.BeginForm("ParseToExcel", "Task", FormMethod.Post, new { enctype = "multipart/form-data", id = "parseFrm" }))
{

    <!-- File Upload Row -->
    <div class="row">

        <!-- Select Files -->
        <div class="col-lg-6">
            <input type="file" multiple="multiple" accept=".adt" name="filesUpload" id="filesUpload" />
        </div>


        <!-- Upload/Begin Parse -->
        <div class="col-lg-6 text-right">
            <button id="beginParse" class="btn btn-success"><i class="fa fa-download"></i>&nbsp;Parse and Download Spreadsheet</button>
        </div>

    </div>

}



 <!-- Task Progress Row -->
<div class="row">

    <!-- Space Column -->
    <div class="col-lg-12">
        &nbsp;
    </div>

    <!-- Progress Indicator Column -->
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {
            $('.progress').hide();

            $('#beginParse').on('click', function () {
                $('#parseFrm').submit();
            })

            $('#parseFrm').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    url: '/Task/ParseToExcel',
                    type: "POST",
                    //success: function () {
                    //    console.log("done");
                    //}
                });

                // initialize the connection to the server
                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);
                };

                // 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.callLongOperation();
                });
            });
        });

        function UpdateProgress(message, count) {

            // get status div
            var status = $("#status");

            // set message
            status.html(message);

            // get progress bar
            if (count > 0) {
                $('.progress').show();
            }

            $('.progress-bar').css('width', count + '%').attr('aria-valuenow', count);
            $('.progress-bar').html(count + '%');

        }


    </script>

    <div class="col-lg-12">
        <div id="status">Ready</div>
    </div>

    <div class="col-lg-12">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:20px;">
                0%
            </div>
        </div>
    </div>
</div>
<!-- Task Message Row -->
<div class="row">
    <div clss="col-lg-12">
        @Html.Raw(ViewBag.TaskMessage)
    </div>
</div>

更新：我的问题的解决方案最终成为了详细的答案，但稍微修改了AJAX post方法以将文件传递给我的操作方法..

e.preventDefault();

$.ajax({
    url: '/Task/ParseToExcel',
    type: "POST",
    data: new FormData( this ),
    processData: false,
    contentType: false,
    //success: function () {
    //    console.log("done");
    //}
});

参考.. http://portfolio.planetjon.ca/2014/01/26/submit-file-input-via-ajax-jquery-easy-way/

Answer 1

好的，我已经有了一些玩法，我认为你最好使用一个名为'jQuery Form Plugin'的插件（http://jquery.malsup.com/form），这将有助于解决HttpPostedFiles问题。< / p>

我已经接受了您的代码并进行了一些调整并使其正常运行。你需要在循环的每一轮（两个循环）中重新计算你的fileProgress，并且你已经添加到表单中的按钮不再需要通过jQuery触发帖子，所以我评论了这一点。

另外，我认为CallLongOperation（）函数现在是多余的（我想这只是来自源材料的一个演示），所以我从你的集线器启动逻辑中删除了这个调用，并将其替换为显示的行按钮 - 直到signalR准备好你应该阻止用户开始上传，但signalR几乎立即开始，所以我认为你甚至不会注意到这种延迟。

我不得不评论一些代码，因为我没有这些对象（XLWorkbook的东西，openxml位等），但你应该能够在没有这些位的情况下运行它并跟踪代码来跟踪逻辑，然后将这些位添加回自己。

这是一个有趣的问题，希望我帮助过：）

控制器：

public class TaskController : Controller
{
    [HttpPost]
    public ActionResult ParseToExcel(HttpPostedFileBase[] filesUpload)
    {
        decimal currentFile = 1.0M;
        int fileProgress = 0;
        int maxCount = filesUpload.Count();

        // Initialize Hub context
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
        hubContext.Clients.All.sendMessage("Initalizing...", fileProgress);            

        try
        {
            // Map server path for temporary file placement (Generate new serialized path for each instance)
            var tempGenFolderName = DateTime.Now.ToString("yyyyMMdd_HHmmss"); //SubstringExtensions.GenerateRandomString(10, false);
            var tempPath = Server.MapPath("~/" + tempGenFolderName + "/");

            // Create Temporary Serialized Sub-Directory
            FileInfo thisFilePath = new FileInfo(tempPath);
            thisFilePath.Directory.Create();

            // Iterate through PostedFileBase collection
            foreach (HttpPostedFileBase file in filesUpload)
            {
                // Does this iteration of file have content?
                if (file.ContentLength > 0)
                {
                    fileProgress = Convert.ToInt32(Math.Round(currentFile / maxCount * 100, 0));

                    // Indicate file is being uploaded
                    hubContext.Clients.All.sendMessage("Uploading " + Path.GetFileName(file.FileName), fileProgress);

                    file.SaveAs(Path.Combine(thisFilePath.FullName, file.FileName));
                    currentFile++;
                }
            }

            // Initialize new ClosedXML/Excel workbook
            //var hl7Workbook = new XLWorkbook();

            // Restart progress
            currentFile = 1.0M;
            maxCount = Directory.GetFiles(tempPath).Count();

            // Iterate through the files saved in the Temporary File Path
            foreach (var file in Directory.EnumerateFiles(tempPath))
            {
                var fileNameTmp = Path.GetFileName(file);

                fileProgress = Convert.ToInt32(Math.Round(currentFile / maxCount * 100, 0));

                // Update status
                hubContext.Clients.All.sendMessage("Parsing " + Path.GetFileName(file), fileProgress);

                // Initialize string to capture text from file
                string fileDataString = string.Empty;

                // Use new Streamreader instance to read text
                using (StreamReader sr = new StreamReader(file))
                {
                    fileDataString = sr.ReadToEnd();
                }

                // Do more work with the file, adding file contents to a spreadsheet...
                currentFile++;
            }


            // Delete temporary file 
            thisFilePath.Directory.Delete();


            // Prepare Http response for downloading the Excel workbook
            //Response.Clear();
            //Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
            //Response.AddHeader("content-disposition", "attachment;filename=\"hl7Parse_" + DateTime.Now.ToString("MM-dd-yyyy") + ".xlsx\"");

            // Flush the workbook to the Response.OutputStream
            //using (MemoryStream memoryStream = new MemoryStream())
            //{
            //    hl7Workbook.SaveAs(memoryStream);
            //    memoryStream.WriteTo(Response.OutputStream);
            //    memoryStream.Close();
            //}

            //Response.End();
        }
        catch (Exception ex)
        {
            ViewBag.TaskMessage =
                "<div style=\"margin-left:15px;margin-right:15px\" class=\"alert alert-danger\">"
                + "<i class=\"fa fa-exclamation-circle\"></i> "
                + "An error occurred during the process...<br />"
                + "-" + ex.Message.ToString()
                + "</div>"
                ;
        }

        return View();
    }
}

查看：

@using (Html.BeginForm("ParseToExcel", "Task", FormMethod.Post, new { enctype = "multipart/form-data", id = "parseFrm" }))
{
    <!-- File Upload Row -->
    <div class="row">

        <!-- Select Files -->
        <div class="col-lg-6">
            <input type="file" multiple="multiple" accept=".adt" name="filesUpload" id="filesUpload" />
        </div>

        <!-- Upload/Begin Parse -->
        <div class="col-lg-6 text-right">
            <button id="beginParse" class="btn btn-success"><i class="fa fa-download"></i>&nbsp;Parse and Download Spreadsheet</button>
        </div>
    </div>
}

<!-- Task Progress Row -->
<div class="row">

    <!-- Progress Indicator Column -->
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $('.progress').hide();
            $('#beginParse').hide();

            // initialize the connection to the server
            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);
            };

            // establish the connection to the server
            $.connection.hub.start().done(function () {
                //once we're connected, enable the upload button
                $('#beginParse').show();
            });

            //no need for this, the button submits the form
            //$('#beginParse').on('click', function () {
            //    $('#parseFrm').submit();
            //})

            //ajaxify the form post
            $('#parseFrm').on('submit', function (e) {
                e.preventDefault();
                $('#parseFrm').ajaxSubmit();
            });
        });

        function UpdateProgress(message, count) {

            // get status div
            var status = $("#status");

            // set message
            status.html(message);

            // get progress bar
            if (count > 0) {
                $('.progress').show();
            }

            $('.progress-bar').css('width', count + '%').attr('aria-valuenow', count);
            $('.progress-bar').html(count + '%');

        }


    </script>

    <div class="col-lg-12">
        <div id="status">Ready</div>
    </div>

    <div class="col-lg-12">
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:20px;">
                0%
            </div>
        </div>
    </div>
</div>
<!-- Task Message Row -->
<div class="row">
    <div clss="col-lg-12">
        @Html.Raw(ViewBag.TaskMessage)
    </div>
</div>

P.S。不要忘记在_Layout.cshtml中添加对jQuery Form Plugin的脚本引用：

<script src="http://malsup.github.com/jquery.form.js"></script>

Answer 2

目前尚不清楚问题究竟是什么，但是使用你的代码我已经通过一些更改来完成这项工作。

首先，表单帖子正在重新加载页面，如果您要为此使用POST，则需要通过捕获post事件并阻止默认操作（然后使用jQuery接管）来异步执行此操作。我不确定你打算如何触发帖子（也许我只是在你的代码中错过了它），所以我添加了一个按钮并挂钩，但是根据需要改变它：

<!-- Progress Indicator Column -->
<script type="text/javascript" language="javascript">

    $(document).ready(function () {
        $('.progress').hide();
        $('#button1').on('click', function () {
            $('#form1').submit();
        })

        $('#form1').on('submit', function (e) {

            e.preventDefault();

            $.ajax({
                url: '/Progress/DoTest',
                type: "POST",
                success: function () {
                    console.log("done");
                }
            });

            // initialize the connection to the server
            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);
            };

            // 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.callLongOperation();
            });
        });
    });

    function UpdateProgress(message, count) {

        // get status div
        var status = $("#status");

        // set message
        status.html(message);

        // get progress bar
        if (count > 0)
        {
            $('.progress').show();
        }

        $('.progress-bar').css('width', count + '%').attr('aria-valuenow', count);
        $('.progress-bar').html(count + '%');

    }

</script>

<div class="col-lg-12">
    <div id="status">Ready</div>
</div>


<form id="form1">
    <button type="button" id="button1">Submit Form</button>
</form>

<div class="col-lg-12">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:20px;">
            0%
        </div>
    </div>
</div>

我还简化了控制器，只关注手头的问题。打破问题并让机制首先工作，特别是如果你遇到问题，然后再添加额外的逻辑：

public class ProgressController : Controller
{
    // GET: Progress
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult DoTest()
    {
        // Initialize Hub context
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
        hubContext.Clients.All.sendMessage("Initalizing...", 0);

        int i = 0;
        do
        {
            hubContext.Clients.All.sendMessage("Uploading ", i * 10);
            Thread.Sleep(1000);
            i++;
        }
        while (i < 10);             

        return View("Index");
    }
}

另外，请确保您的javascript引用正确排序，jquery必须首先加载，然后是信号器，然后是hub脚本。

如果您仍有问题，请发布您的确切错误消息，但我怀疑这是您的问题的同步表单/重新加载。

希望这有帮助

使用来自MVC动作的signalR hub

2 个答案: