JQuery Progress barとpartialview on submit

Question

私は動作する検索機能を持っていますが、送信時にjqueryプログレスバーを表示したいと思います。場合によっては、partialviewの読み込みに最大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> 

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はこの問題について非常に明確に書いています。

PROBLEM

SOLUTION

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/

あなたは結果のいずれかの結果を見る前に、それは長い時間がかかる場合は、これを使用することができます：だからあなたは

最初にクリックされた後にsubmitbuttonを無効にすることができますが、それはclientsideであり、私はクライアント（訪問者）を信頼することはありません。 また、待ち時間についてのヒントはありません 自分自身が別のページに直接リダイレクトすることを好み、xx時間まで数秒待ってスピナーイメージを表示するようにユーザーに通知します。 これは、Post-Redirect-GET（PRG）パターンとして知られています。

私の答えはあなたのプログレスバーの問題に関するものではありませんが、あなた自身がそれ:)

Answer 3

あなたはこれについて行くことができる2つの方法があります。

単にそれなしいくつかの進歩を表示するプログレスバーを持ちます正確で現実的な値（eg、スピナー、またはローダー）です。

そして値を更新する実際の進行状況バーがあります。

通常はAJAX呼び出しを介して機能します。これは、あなたが呼び出したバックエンドから実際の値を取得します。

たとえば、PHPを使用している場合、所定の間隔またはポーリング時間に対して、正規化された（最大値の）正規化された値を知るためのメカニズムを使用してPHP URIにアクセスする必要があります。

このアプローチの問題点は、のクエリの所要時間が常にであるとは必ずしもわからないということです。正確な値を設定することはできません。

私は過去にNProgressを使用しましたが、その最小限で簡単なアプローチで本当に好きです。

何かを提出しているので、の進捗状況を正確に測定できますか？可能であれば、進捗状況の更新のためのAJAXコールバックを実装してから、進捗バーを使用することをお勧めします。

そうでない場合は、単純にオーバーレイをスピナーで表示し、成功するとそれを削除します。