razor - 是否可以使用剃须刀页面、非 MVC 仅直接剃须刀页面来更新引导进度条的百分比

Question

我在 asp.net core 3.1 razor page web 应用程序上有一个长时间运行的进程，这是非 MVC 重复而不是 MVC 设置。我能够显示一个引导进度条，当我长时间运行时它会无限滚动在剃刀页面上的 C# 代码中处理。

我正在寻找一种方法，可以在 c# 中 c# 中的 c# 代码中执行的长时间运行任务的代码/函数中的特定点更新引导进度条百分比？

我发现的一切都是针对 MVC 环境的，我尝试移植了一种 MVC 方法但没有运气，只是想知道是否有人只使用纯 Razor 页面遇到了从后面的代码更新进度条的解决方案？或者如果无法从后面的代码中使用客户端javascript（或我没有经验的ajax）来检查后面代码上的任何绑定属性/变量，如果我更新它们，例如百分比变化变量;）或其他东西那些线。

[更新] 我试图关注的示例博客https://www.jerriepelser.com/blog/communicate-status-background-job-signalr/

我想出了这个剃须刀页面代码，但它不起作用大声笑。

html

<div class="row">
    <div class="col-md-12">
        <h2>Start background process</h2>
        <p>Start a long running process by clicking on the button below:</p>
        <form method="post">
            <button type="submit" class="btn btn-primary btn-lg">Queue Background Job</button>
        </form>
    </div>
</div>

<p>Status of your background job: <strong><span id="job-status">Job status will go here...</span></strong></p>

@section Scripts
{
    <script src="~/lib/signalr/signalr.js"></script>
    <script>
        var connection = new signalR.HubConnectionBuilder()
            .withUrl("/jobprogress")
            .configureLogging(signalR.LogLevel.Information)
            .build();
        connection.on("progress",
            (percent) => {
                if (percent === 100) {
                    document.getElementById("job-status").innerText = "Finished!";
                } else {
                    document.getElementById("job-status").innerText = `${percent}%`;
                }
            });
        connection.start()
            .then(_ => connection.invoke("AssociateJob", "@Model.JobId"))
            .catch(err => console.error(err.toString()));
    </script>
}

后面的代码

 [BindProperties (SupportsGet = true)]
    public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
        private readonly IQueue _queue;
        private readonly IHubContext<JobProgressHub> _hubContext;
        public string JobId { get; set; }

        public IndexModel(ILogger<IndexModel> logger, IQueue queue, IHubContext<JobProgressHub> hubContext)
        {
            _logger = logger;
            _queue = queue;
            _hubContext = hubContext;
        }

        public IActionResult OnGet()
        {
            JobId = HttpContext.Session.GetString("jobId");
            return Page();
        }

       
        public IActionResult OnPost()
        {
            string jobId = Guid.NewGuid().ToString("N");
            _queue.QueueAsyncTask(() => PerformBackgroundJob(jobId));
            HttpContext.Session.SetString("jobId", jobId);
            JobId = jobId;
            return Page();
        }

    
        private async Task PerformBackgroundJob(string jobId)
        {
            for (int i = 0; i <= 100; i += 5)
            {
                // TODO: report progress with SignalR
                await _hubContext.Clients.Group(jobId).SendAsync("progress", i);


                await Task.Delay(100);
            }
        }
    }

标签： razorrazor-pages