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

亚历克西斯

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

亚历克西斯

我终于只使用了一些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")   
        }

    });
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Blazor,ASP.NET Core托管与ASP.NET Core中的服务器端

asp.net:更新页面内容而不刷新(部分页面更新)

asp.net加载服务器端网址,但不打开页面或窗口

如何在服务器端更改asp.net页面的标记(从.cs文件)

具有动态页面数的C#ASP.NET服务器端轮播滑块

ASP.NET MVC服务器端打印

ASP.NET图表在服务器端崩溃

ASP.NET Core MVC 2:NameValueCollection 实例在服务器端为空

ASP.NET Core 2的服务器端渲染Vue

在服务器端验证 ASP.Net Core MVC 后坚持 IEnumerable<T>

Blazor WASM Asp.net core Hosted = Blazor 服务器端?

防止从ASP.NET中的按钮刷新页面

ASP.NET MVC RedirectToAction不刷新页面

无法在服务器中运行asp.net Core,Angular 2,服务器端渲染项目

从服务器重定向到ASP.Net MVC Ajax请求的新页面

用于客户端和服务器端验证的 ASP.NET Core 重用代码

当我在浏览器中刷新页面时,如何在ASP.NET Core 2.2中启用自动重建?

ASP和ASP.Net支持哪些服务器端脚本语言

如何在服务器端Blazor中自定义ASP.NET Core身份?

真的,ASP.NET Core Hosted和服务器端Blazor有什么区别?

IExceptionFilter处理程序在ASP.NET Core 3.1 Blazor(服务器端)中不起作用

ASP.NET Core服务器端验证失败导致Microsoft.AspNetCore.Mvc.SerializableError

ASP.NET Core 2.0仅在服务器端访问本地文件夹而不暴露于Web

如何在ASP.net Core中实现dataTables服务器端分页/搜索/排序

asp.net/javascript创建cookie,创建客户端或服务器端的优势?

在ASP.NET服务器端还是客户端中的HTML控件?

ASP.NET服务器端或客户端的验证控件?

ASP.Net MVC客户端和服务器端计算

如何使用asp.net访问服务器端的客户端文件