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

Question

Here's my question :
It is possible to update a page server side whitout reloading it ?
Let's me explain :
I've a page with a form in it where the user upload a .csv with many row to add to the database. But the inserts take some time and I would like to implement a bootstrap progress bar but I cannot figure how to update the progress bar value from the controller.

Answer 1

It is possible. You could use SignalR (or other libraries) for push notifications to the client.

1. Upload the file and return a token/id
2. Subscribe to a SignalR Hub using that token
3. Meanwhile the server processes the file and publishes the progress using the SignalR hub and your token.
4. Your client receives those notifications from the hub and updates the progress accordingly.

Answer 2

I finally just use some Ajax and progress object.
Here's the code if someone need it :
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;
    }

}

Insert Function :

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>

And JS to get progress :

$(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")   
        }

    });
}