12

フォームを送信するときにローダーを表示してボタンを無効にする最良の方法は何ですか:

@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>
}

ローダのイメージファイルは

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

たぶん、BeginForm の OnBegin を使用してローダーを表示し、OnComplete を使用して非表示にしますか? しかし、どうすれば画像を変更できますか？

高品質の無料ローダーを見つけるための提案はありますか?

ありがとう

4

1 に答える 1

33

次のように、読み込み中のイメージ タグを div タグ内に配置します。

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

CSS ファイルで:

div#loading { display: none; }

そして、あなたのフォームで：

@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>
}

そして、ビューにスクリプトを追加します。

<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>
于 2013-07-16T23:24:18.667 に答える