Search code examples
c#asp.net-coreasp.net-core-mvcserver-side

Asp .Net core Update Page server side without refresh


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.


Solution

  • 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")   
            }
    
        });
    }