Show-loader auf Ajax.BeginForm Einreichen

Was ist der beste Weg, um zu zeigen, ein loader und deaktivieren Sie die Schaltfläche, wenn wir ein Formular Absenden:

@using (Ajax.BeginForm(MVC.Account.Login(), new AjaxOptions { OnSuccess = "onLoginSuccess" }, new { @id = "loginForm" }))
{
  <div id="logbtn">
    <input type="submit" name="invisible" class="subinvisible"/> 
    <p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
    <img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" />
  </div>
}

Den loader-image-Datei ist 

<img src="~/Content/Images/ui-loader-white-16x16.gif" />

Vielleicht mit OnBegin aus der BeginForm zu zeigen, dem loader und dem OnComplete zu verstecken-es? Aber wie kann ich das Bild ändern?

Jede sugestion zu finden, schöne Qualität Trittbrettfahrer?

Dank

InformationsquelleAutor Patrick | 2013-07-16
  1. 28

    Setzen Sie Ihre loading image-tag innerhalb eines div-Tags so:

    <div id="loading">
    <img src="~/Content/Images/ui-loader-white-16x16.gif" />
</div>

    In der CSS-Datei:

    div#loading { display: none; }

    Und, in Ihrer form:

    @using (Ajax.BeginForm(MVC.Account.Login(), 
  new AjaxOptions { OnSuccess = "onLoginSuccess", LoadingElementId = "loading", 
    OnBegin = "onLoginBegin" }, 
  new { @id = "loginForm" }))
{
  <div id="logbtn">
    <input type="submit" name="invisible" class="subinvisible"/> 
    <p>@HeelpResources.AccountLoginViewLoginButtonLabel</p>
    <img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" />
  </div>
}

    Und fügen Sie ein Skript, um Ihre Ansicht:

    <script type="text/javascript">
    function onLoginBegin()
    { 
        //Disable the button and hide the other image here 
        //or you can hide the whole div like below
        $('#logbtn').hide();
    }
</script>
    • Hallo, vielen Dank! Aber wo legst du das Bild laden? und wie ersetzt man die ui-symb-der Pfeil-rechts-weiß-15x15.png-Bild mit der loader?
    • Sorry, ich habe übersehen, dass. Sie setzen die be-Bild im inneren eine versteckte div. Und verwenden Sie die id der versteckten div-als LoadingElementId in Ihrer ajax-Formular. In, um sich zu verstecken das andere Bild und deaktivieren Sie die Schaltfläche, die Sie verwenden können, die OnBegin Eigenschaft des AjaxOptions Klasse. Schauen Sie sich die aktualisierten beantworten.
    • Super!!! Ich danke Ihnen sehr. Grüße
    • Du bist herzlich willkommen.
    InformationsquelleAutor ataravati
Schreibe einen Kommentar