ASP .NET Core更新页面服务器端，无需刷新

Question

这是我的问题：
是否可以在重新加载页面服务器端的情况下更新它？
让我解释一下：
我有一个带有表单的页面，用户在其中上载具有许多行的.csv文件以添加到数据库中。 但是插入操作需要花费一些时间，我想实现一个自举进度条，但是我无法弄清楚如何从控制器更新进度条的值。

Answer 1

有可能的。 您可以使用SignalR（或其他库）向客户端推送通知。

1. 上传文件并返回令牌/ ID
2. 使用该令牌订阅SignalR集线器
3. 同时，服务器使用SignalR集线器和令牌处理文件并发布进度。
4. 您的客户从中心收到这些通知，并相应地更新进度。

Answer 2

我终于只使用了一些Ajax和progress对象。
这是如果有人需要的代码：
ProgressHandler.cs

public class ProgressHandler
{
    public int Progress { get; set; }
    public int MaxProgress { get; set; }
    public int Percentage { get; set; }
    public String PercentageStr { get; set; }
    public String[] Events { get; set; }


    public String Statut { get; set; }
    public static ProgressHandler PH { get; set; }
    public ProgressHandler()
    { }
    public ProgressHandler(int maxProgress)
    {
        MaxProgress = maxProgress;
        PH = this;
    }

    public static ProgressHandler Current()
    {
        return PH;
    }

    public void Init()
    {
        Progress = 0;
        MaxProgress = 0;
        Statut = "Waiting";
    }

    public int GetPercentage()
    {
        if (MaxProgress != 0)
        {
            return (int)(((float)Progress / (float)MaxProgress) * 100);
        }
        else
        {
            return 0;
        }
    }

    public int EventSize()
    {
        if(Events!=null)
        {
            return Events.Count();
        }
        return 0;
    }

}

插入功能：

public FileContentResult AddEmployeeListSubmit(AddEmployeeList model)
    {
        //working with file
        _progressHandler.MaxProgress = emps.Count;
        _progressHandler.Statut = "Running";
        //working with file and insert...
        int iter = 0;
        foreach(var Employee in EmployeeList)
        {
        //make insert in db
        iter++;
        _progressHandler.Progress = iter;
        }
        _progressHandler.Statut = "Complete";
        _progressHandler.Events = Errors.ToArray();
        return something;
}

InsertPage.cshtml

<div id="updateBar" hidden>
            <h1>Update in progress : <span class="label label-info" id="progressDisp"></span></h1>
            <div class="progress">
                <div class="progress-bar progress-bar-striped active" id="insertProgress" role="progressbar"
                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                    0%
                </div>
            </div>
        </div>

和JS取得进展：

$(document).ready(function () {
    var myInterval = setInterval(function () {
        getProgress();
    }, 500);
});
function getProgress() {
    $.ajax({
        type: "POST",
        data: "",
        url: "/Login/GetProgress",
        dataType: 'json',
        contentType: false,
        processData: false,
        success: function (response) {
            if (response.statut == "Running")
                $("#updateBar").slideDown();
            if (response.statut == "Complete") {
                $("#progressDisp").text("Complete").removeClass("label-info").addClass("label-success");
                $("#insertProgress").css("width", "100%").attr('aria-valuenow', 100).text("100%");

                if (response.events.length > 0 && !$("#insertError").is(":visible")) {
                                       $.each(response.events, function (key, value) {
                        console.log(key + ":" + value);
                        $("#insertError").html($("#insertError").html()+"<br><strong> Insert Error </strong>" + value);
                    });
                    $("#insertError").slideDown();
                }
            }
            else {

                $("#insertProgress").css("width", response.percentage + "%").attr('aria-valuenow', response.percentage).text(response.percentageStr + "%");
                $("#progressDisp").text(response.progress + "/" + response.maxProgress);
            }
        },
        error: function (response) {
            console.log("error")   
        }

    });
}