JQueryプログレスバーと送信時の部分ビュー

動作する検索機能がありますが、送信時に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
}