JQuery 提交时的进度条和局部视图

Question

我有一个可用的搜索功能，但想在提交时包含 jquery 进度条。有时部分视图可能需要长达 5 秒的时间来加载。需要进度条，这样用户就不会一直按 submit/enter 键。我想隐藏进度条，直到按下提交。

有没有办法用百分比来实际衡量加载时间？

Jquery进度条：https://jqueryui.com/progressbar/#label

查看：

@model Application.Web.ViewModels.BillingViewModel

@{
ViewBag.Title = "BillingLetterSearch";
Layout = "~/Views/Shared/_LayoutFullWidth.cshtml";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-progressbar {
 position: relative;
}
.progress-label {
 position: absolute;
 left: 50%;
 top: 4px;
 font-weight: bold;
 text-shadow: 1px 1px 0 #fff;
}
</style>

<div class="row">
<panel>
    <table class="table">
        <thead>
            <tr>
                <th>Search By Employee Number:</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3">
                    @Html.TextBoxFor(x => Model.EmployeeNumber, new { @class = "form-control", @id = "EmployeeNumber", @autofocus = "autofocus" })
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="4" style="text-align:center;">
                    <br>
                    <div class="submit-holder">
                        <button id="SubmitButton" class="btn-mvc btn-mvc-large btn-mvc-green" onclick="DisplayBuyinInfo();">
                            Search
                        </button>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</panel>
<div class="row" id="Results">
    @Html.Partial("_SearchByEmployeeNumber", Model.EmployeeNumber)
</div>

<script>
  function DisplayBuyinInfo() {
    $("#Results").load('@(Url.Action("_SearchByEmployeeNumber", "Bill", null, Request.Url.Scheme))?id=' + $("#EmployeeNumber").val());
};



$(document).ready(function () {
    $('#EmployeeNumber').keypress(function (e) {
        if (e.keyCode == 13)
            $('#SubmitButton').click();
    });
});


$(function () {
    //$('#progressbar').hide();
    //$('#SubmitButton').click(function () {
        //$('#progressbar').show();
        var progressbar = $("#progressbar"),
          progressLabel = $(".progress-label");

        progressbar.progressbar({
            value: false,
            change: function () {
                progressLabel.text(progressbar.progressbar("value") + "%");
            },
            complete: function () {
                progressLabel.text("Complete!");
            }
        });

        function progress() {
            var val = progressbar.progressbar("value") || 0;

            progressbar.progressbar("value", val + 2);

            if (val < 99) {
                setTimeout(progress, 80);
            }
        }

        setTimeout(progress, 2000);
    });
//});
</script>

部分视图：_SearchByEmployeeNumber

@model Application.Web.ViewModels.BillingViewModel


<div id="progressbar"><div class="progress-label">Loading...</div></div>



//...code left out for brevity

控制器

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult _SearchByEmployeeNumber(string id)
{
  //...code left out for brevity
}

Answer 1

拥有进程栏会增加更多开销：服务器必须定期发送估计 time/amount 尚待下载的内容。更简单的方法是在提交表单后禁用提交按钮。

    // jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e){
    var $form = $(this);

    if ($form.data('submitted') === true) {
      // Previously submitted - don't submit again
      e.preventDefault();
    } else {
      // Mark it so that the next submit can be ignored
      $form.data('submitted', true);
    }
  });

  // Keep chainability
  return this;
};
// use it like

$('#myFormID').preventDoubleSubmission();

这不是我的代码，而是来自： http://technoesis.net/prevent-double-form-submission-using-jquery/

如果需要很长时间才能看到结果的任何结果，也可以使用这个：

所以你可以在第一次点击后禁用提交按钮，但那是客户端，我从不相信我的客户（访客）。它也没有给出任何关于等待时间的提示我自己更喜欢立即重定向到另一个页面并通知访问者等待几秒钟，直到 xx 时间并显示微调图像。这被称为 Post-Redirect-GET (PRG) 模式。

我的回答不是关于你的进度条问题，而是你自己所说的 "ultimate question" 的答案:)

Answer 2

The progress bar is needed so the user will not keep pressing submit/enter key

根据我的经验，进度条不能阻止用户持续按下submit/enter键。此外，它会增加您管理它的难度。

简单的解决方案是禁用 submit button，直到您的工作完成。

但是，在提交表单后，用户可以通过刷新页面重新提交。为了防止它，你应该实现 PRG (Post-Redirect-Get) pattern。 Wikipedia把这个问题写的很清楚

问题

解决方案

Answer 3

您可以通过两种方式解决此问题：

有一个进度条只显示一些进度，而不是准确或实际的值（例如，微调器或加载器）。

并且有一个更新值的实际进度条。

后者（我猜这就是你想要的）通常通过 AJAX 调用运行，它从你调用的任何后端获取实际值。

例如，如果您正在使用 PHP，那么您必须使用一种机制访问该 PHP uri，该机制将让您知道您的进度的标准化（最小-最大）值，对于给定的间隔或轮询时间。

这种方法的问题在于，您并不总是知道查询将花费多长时间，因此您无法获得准确的值。

我以前用过 NProgress，我非常喜欢它的最小化和简单方法。

因为你正在提交东西你能准确衡量它的进度吗？如果可以，那么我建议你为那个进度更新实现一个AJAX回调，然后，你就可以使用进度条了。

如果没有，则简单地显示一个带有微调器的叠加层，并在成功时将其删除。

JQuery 提交时的进度条和局部视图

JQuery Progress bar and partialview on submit

jquery

partial-views

progress-bar

asp.net-mvc-5