Question

我有一个工作搜索功能，但想在提交时包含jquery进度条。有时，部分视图最多可能需要5秒才能加载。需要进度条，因此用户不会按下提交/输入键。我想隐藏进度条直到提交被按下。

有没有办法让百分比实际测量加载时间？

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>

PartialView：_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

需要进度条，因此用户不会继续按下提交/输入密钥

根据我的经验，进度条无法阻止用户按下提交/输入键。此外，它还会为您提供更多难以管理的工作。

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

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

问题

<强>解

Answer 2

拥有一个处理栏会增加更多开销：服务器必须定期发送估计的下载时间/数量。一种更简单的方法是在提交表单后禁用提交按钮。

    // 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）模式。

我的回答不是关于你的进度条问题，而是你的＆＃34;终极问题的回答＆＃34;你自己称之为：）

Answer 3

有两种方法可以解决这个问题：

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

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

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

例如，如果您使用的是PHP，那么您必须使用一种机制来访问该PHP uri，该机制可以让您知道进度的标准化（最小 - 最大）值，给定的间隔或轮询时间。 / p>

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

我过去曾使用NProgress，并且非常喜欢它的简单方法。

因为您提交某些内容可以准确衡量其进度吗？如果可以，那么我建议您为该进度更新实施AJAX回调，然后，您可以使用进度条。

如果没有，则只需使用微调器显示叠加层，并在成功时将其删除。

提交JQuery进度条和部分视图

3 个答案: