JQuery Fortschrittsbalken und Teilansicht beim Senden

Question

Ich habe eine funktionierende Suchfunktion, möchte aber die jquery Fortschrittsbalken beim Senden einbeziehen. Manchmal kann das Laden der Teilansicht bis zu 5 Sekunden dauern. Der Fortschrittsbalken wird benötigt, damit der Benutzer die Taste zum Senden/Bestätigen nicht drückt. Und ich möchte den Fortschrittsbalken ausblenden, bis submit gedrückt wird.

Gibt es eine Möglichkeit, dass der Prozentsatz die Ladezeit tatsächlich misst?

JQuery Fortschrittsbalken: https://jqueryui.com/progressbar/#label

Ausblick:

@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

-Controller

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

Answer 1

Der Fortschrittsbalken benötigt wird, so wird der Benutzer drücken nicht halten einreichen/

aus meiner Erfahrung Schlüssel eingeben, einen Fortschrittsbalken nicht Stopp Benutzer halten/Pressen einreichen Enter-Taste. Außerdem wird es mehr harte Arbeit für Sie hinzufügen, um es zu verwalten.

Die einfache Lösung ist Deaktivieren die submit button bis Ihre Arbeit erledigt ist.

Nachdem das Formular gesendet wurde, können die Benutzer es jedoch erneut senden durch Aktualisieren der Seite. Um dies zu verhindern, sollten Sie die PRG (Post-Redirect-Get) pattern implementieren. Die Wikipedia schreibt sehr klar über dieses Problem.

DAS PROBLEM

SOLUTION

Answer 2

eine Vorarb-Bar Mit mehr Aufwand hinzufügen: Der Server regelmäßig hat eine geschätzte Zeit/Menge schicken, wie viel noch zum Download bereit. Ein einfacherer Weg besteht darin, die Schaltfläche zum Senden zu deaktivieren, nachdem das Formular abgeschickt wurde.

// 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(); 

Das ist nicht mein Code, sondern kommen aus: http://technoesis.net/prevent-double-form-submission-using-jquery/

Wenn es eine lange Zeit in Anspruch nimmt, bevor Sie eine Folge des Ergebnisses sehen, können Sie diese auch verwenden:

You So könnte den Submitbutton nach dem ersten Klick deaktivieren, aber das ist clientseitig und ich traue meinen Clients (dem Besucher) nie. Auch gibt es keine Hinweise auf Wartezeit Ich selbst bevorzuge eine sofortige Umleitung zu einer anderen Seite und informieren Sie den Besucher, ein paar Sekunden zu warten, bis zu xx Zeit und zeigt ein Spinner-Bild. Dies wird als Post-Redirect-GET (PRG) -Muster bezeichnet.

Meine Antwort ist nicht über Ihre progressbar Frage, aber eine Antwort auf Ihre „ultimative Frage“, wie Sie selbst es genannt :)

Answer 3

Es gibt zwei Möglichkeiten, wie Sie zu diesem gehen kann:

Mit einem Fortschrittsbalken, die einige Fortschritte ohne es zeigt einfach ein genauer oder realistischer Wert sein (zB ein Spinner oder ein Loader).

Und mit einem aktuellen Fortschrittsbalken, der einen Wert aktualisiert.

Die spätere (die ich vermute, was Sie wollen) funktionieren normalerweise über einen AJAX-Aufruf, der den tatsächlichen Wert von jedem aufgerufenen Backend erhält. Wenn Sie zum Beispiel PHP verwenden, müssen Sie auf dieses PHP-URI mit einem Mechanismus zugreifen, der Sie über einen normalisierten (minimierten) Wert für Ihren Fortschritt informiert, für ein gegebenes Intervall oder eine Abfragezeit.

Das Problem mit diesem Ansatz ist, dass Sie nicht immer wissen, wie lange eine Abfrage dauert, so dass Sie keinen genauen Wert haben können.

Ich habe NProgress in der Vergangenheit verwendet, und mag es wirklich für seinen minimalen und einfachen Ansatz.

Da Sie etwas einreichen können Sie seinen Fortschritt genau messen? Wenn Sie können, würde ich vorschlagen, dass Sie einen AJAX-Rückruf für diese Fortschrittsaktualisierung implementieren, und dann können Sie den Fortschrittsbalken verwenden.

Wenn nicht, dann zeigen Sie einfach ein Overlay mit einem Drehfeld an und entfernen es bei Erfolg.