Wie zeige ich ein Lade-Spinner beim Einreichen für eine Teilansicht in asp.net MVC?

Ich habe eine Anwendung geschrieben, die Teilansichten lädt, wenn Sie auf "Weiter" klicken. Manchmal hängt der Server ein wenig, sodass ich eine Art Lade-Nachricht oder Spinner anzeigen möchte, wenn der Benutzer auf "Senden" klickt, damit er weiß, dass die Seite etwas unternimmt.Wie zeige ich ein Lade-Spinner beim Einreichen für eine Teilansicht in asp.net MVC?

Dies ist nur Ihre Standard-Form ist aber mein einreichen Code sieht wie folgt aus (ein Feld enthalten, so können Sie sehen, ein Beispiel):

    <div class="form-group"> 
        @Html.LabelFor(m => m.JointAdditionalIncomeSource, new { @class = "col-sm-2 control-label" }) 
        <div class="col-sm-10"> 
         <div class="col-sm-4"> 
          @Html.TextBoxFor(m => m.JointAdditionalIncomeSource, new { @class = "form-control", placeholder = "Additional Income Source" }) 
          @Html.ValidationMessageFor(m => m.JointAdditionalIncomeSource) 
         </div> 
        </div> 
       </div> 

      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-3 col-sm-10"> 
       <div class="col-sm-4"> 
        <input type="submit" value="Back" id="back" class="btn btn-default" /> 
        <input type="submit" value="Continue" id="continue" class="btn btn-default" /> 
       </div> 
      </div> 
     </div>

Ich habe nach Möglichkeiten, um auf Google sah dies und so zu tun, Bis jetzt hatte ich kein Glück. Jquery wäre keine schlechte Methode, wenn jemand ein Beispiel dafür hätte.

Updates:

Das ist mein aktueller Code, der nicht funktioniert.

<head> 
<meta charset="utf-8"> 
<title></title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 


<script> 
    $('#continue').submit(function() { 
     $('#LoanType').hide(); 
    }); 
</script> 
<script type="text/javascript"> 
    function onBegin() { 
     $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />'); 
    } 
    function onComplete() { 
     $("#divLoading").html(""); 
    } 
</script>

<body> 
    <!--If user has javascript disabled--> 
    <noscript> 
     <div style="position: fixed; top: 0px; left: 0px; z-index: 3000; 
            height: 100%; width: 100%; background-color: #FFFFFF"> 
      <p style="margin-left: 10px">To continue using this application please enable Javascript in your browser.</p> 
     </div> 
    </noscript> 

    <!-- WIZARD --> 
    <div id="MyWizard" class="site-padding-top container"> 


     <div data-target="#step1" id="step1" class="app-bg"> 

      <div class="form-horizontal"> 
       <div id="LoanType"> 
        <div class="divider-app"> 
         <p>Loan Type</p> 

        </div> 
        @using (Ajax.BeginForm("SelectLoanType", new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "step2" })) 
        { 
         <div class="form-group"> 
          @Html.LabelFor(m => m.LoanType, new { @class = "col-sm-2 control-label" }) 
          <div class="col-sm-10"> 
           <div class="col-sm-4"> 
            @Html.DropDownListFor(m => m.LoanType, new SelectList(Model.AllAvailableLoanTypes.Select(x => new { Value = x, Text = x }), "Value", "Text"), new { @class = "form-control", id = "loanType" }) 
           </div> 
          </div> 
         </div> 

         <div class="form-group" id="LoanTypeSubmit"> 
          <div class="col-lg-offset-3 col-sm-10"> 
           <div class="col-sm-4"> 

            <input type="submit" value="Continue" id="continue" class="btn btn-default" /> 
           </div> 
          </div> 
         </div> 

        } 
        <div id="divLoading"></div> 
       </div>

Die Verzögerung in der Steuerung arbeitet.

Quelle

2014-05-04 TheDizzle

möglich Duplikat [Wie Verarbeitung Animation/Spinner während Ajax-Request zeigen?] (http://stackoverflow.com/questions/4901537/how-to-show-processing-animation-spinner-during-ajax-request) –

Ich verlinkte auf eine ähnliche Frage. Das serverseitige Zeug spielt keine Rolle und der jQuery-Code ist derselbe. –

geht die komplette Lösung -

Sagen wir Sie einen Ajax-Controller wie diese haben -

public ActionResult Ajax() 
    { 
     return View(); 
    }

, die die folgenden Ajax-Ansicht dient -

@{ 
    ViewBag.Title = "Ajax"; 
} 

<h2>Ajax</h2> 

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
<script type="text/javascript"> 
    function onBegin() { 
     $("#divLoading").html('<image src="../Content/ajax-loader.gif" alt="Loading, please wait" />'); 
    } 
    function onComplete() { 
     $("#divLoading").html(""); 
    } 
</script> 

@using (Ajax.BeginForm("LoadRules", "Home", new AjaxOptions { UpdateTargetId = "Rules", OnBegin = "onBegin", OnComplete = "onComplete" })) 
{ 
    <input type="submit" value="Load Rules" /> 
} 

<div id="divLoading"></div> 

<div id="Rules"></div>

Dann, wenn Sie auf Der Submit-Button wird den folgenden Controller treffen, der eine Verzögerung von 5 Sekunden (Simulation einer lang andauernden Task) hat, um die Teilansicht zu bedienen -

public ActionResult LoadRules(DDLModel model) 
    { 
     System.Threading.Thread.Sleep(5000); 
     return PartialView("MyPartial"); 
    }

und die Teilansicht ist eine einfache Ansicht -

<div> 
    This is Partial View 
</div>

Hier wird das zeigen, lud ich einfach die folgende gif-Datei verwendet -

enter image description here

, wenn wir auf der klicken Sie auf Absenden Mit der Taste wird der Fortschritt auf folgende Weise angezeigt:

enter image description here

Und wenn die Verzögerung von 5 Sekunden auf der Server-Seite abgeschlossen ist, wird die Teilansicht zeigen -

enter image description here

Quelle

2014-05-04 05:10:48 ramiramilu

Ich verstehe nicht, wie die Übermittlungssteuerelemente die .gif anzeigen. Ich habe den Code eingegeben und es scheint nichts zu laden, wenn ich auf "Submit" klicke. Ich habe meinen ursprünglichen Beitrag aktualisiert. – TheDizzle

@TheDizzle, Sie haben die Ereignishandler OnBegin und OnComplete nicht in AjaxOptions eingeschlossen. Ich bin mir auch nicht sicher, wer mir eine negative Stimme gegeben hat, aber ich bin mir nicht sicher warum.Es funktioniert für mich und das Original-Poster sollte genauso funktionieren, wie ich erzählt habe, aber er hat einen wichtigen Schritt in AjaxOptions verpasst. – ramiramilu

Wie zeige ich ein Lade-Spinner beim Einreichen für eine Teilansicht in asp.net MVC?

Antwort

Verwandte Themen