从剃刀服务器更新进度条

Question

我的剃刀页面上有一个进度条。

我知道它有效，因为我在 onclick 事件上调用了它。

问题是让它从服务器端工作。这是代码：

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using System.Data.SqlClient;
    
    namespace websitename.Pages.test
    {
        public class surmodelModel : PageModel
        {
            public int niter { get; set; } = 50000;
            public int pvalue { get; set; } = 0;        
            public int thecounter = 0;

            public void OnGet()
            {
                Some programming
            }

            public JsonResult OnPost()
            {
                Initial programming

                for (i = 0; i < myniter; i++)
                {
                    More programming
                    ...
                    thecounter++;
                    pvalue = 100 * thecounter / myniter;
                    return new JsonResult(pvalue);
                }
                Final programming
                return new JsonResult(pvalue);
            }
        }
    }

这是视图端的javascript编程：

    <script>
        function gibbs(){
            $.ajax({
                dataType: "json",
                success: function(pvalue){
                    var pv = jQuery.parseJSON(pvalue);
                    movebar(pv);
            }})
        }   
        function movebar(pvalue){
            var elem = document.getElementById("mybar");
            var width = pvalue;
            var id = setInterval(frame, 10);
            function frame(){
# if (width <= 100) **your text**
                {
                    elem.style.width = width / 2 + '%';
                    elem.innerHTML = width * 1 + '%';
                }       
            }
        }
    </script>

基本思想是进度条应该在每次循环后更新。 为什么它不这样做呢？任何和所有的见解都值得赞赏。

Answer 1

for 循环在每一步后都会返回：

                for (i = 0; i < myniter; i++)
                {
                    More programming
                    ...
                    thecounter++;
                    pvalue = 100 * thecounter / myniter;
                    return new JsonResult(pvalue);
                }

这意味着

i

最初为 0，经过一些处理后，

pvalue

被计算并返回。相反，您的服务器端应该有一种方法来确定其进度，并在取得某些进展时返回。因此，您的服务器应该等待操作完成，即数据包完成并将实际的计算状态返回给客户端。相反，你从 0 开始，即使你取得了一些部分进展。