提交JQuery进度条和部分视图

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.在维基百科写关于这个问题非常清楚.

问题

解