2

asp.net mvc 4アプリケーションにjQueryアニメーションローダーを配置しようとしています。ユーザーが送信ボタンをクリックすると、画面全体が白いウォッシュで追い越され、しばらくお待ちください。これはすべて機能します。私が問題を抱えている部分は、フォームに検証エラーがあると、クライアント側の検証が開始され (保持したい)、jquery ローダー画面の後ろに閉じ込められることです。私はローダーを次のように呼び出しています：

        $(function () {
            $("#submitbtn").click(function () {
                $("#loading").fadeIn();
            });
        });

私の$(document).ready(....機能で。私の最初の考えは、使用することでした

        @if (ViewData.ModelState.IsValid)
        {
            <text>$(function () {
                $("#submitbtn").click(function () {
                    $("#loading").fadeIn();
                });
            });</text>
        }

しかし、ページがロードされると、これは有効であり、それが書き出されます (私の悪い私は知っていたはずです)。今、私は途方に暮れています。これを行う方法がわかりません。誰でも助けることができますか？

4

1 に答える 1

2

あなたの問題をどのように理解したかに基づいて、私はそれを撃ちます。だからあなたは持っています：

    $(function () {
        $("#submitbtn").click(function () {
            $("#loading").fadeIn();
            if (validFormInputs()) {                   
                yourForm.submit();
            }
            else {
                // hide the laoder again
                $("#loading").fadeOut(); // or .hide or however you want to hide it
            }
        });
    });

送信は ajax 投稿ではなくポストバックであるため、送信アクションが速すぎるとローダーがまったく表示されない場合があります。サーバー側で、クライアント側の検証で捕捉されなかったエラーが発生した場合は、ビューを再度返すだけでよく、JavaScript で特別なことをする必要はありません。したがって、メソッドは次のようになります。

[HttpPost]
public ActionResult Edit(YourModel input) {
    if (!ModelState.IsValid) {
        return View(input);
    }

    // do something here, redirect or return the view again
}

繰り返しますが、このコードはポスト バック アクション用であり、ajax ポスト用ではないことに注意してください。

更新： したがって、基本的にここにステップがあります：

  1. 送信ボタンのクリック イベントをキャプチャする$("#submitbtn").click(function ()...
  2. ローダーを表示する$("#loading").fadeIn();
  3. クライアント側の検証を行うvalidFormInputs()

  4. 検証が失敗した場合は、ローダーを非表示にします$("#loading").fadeOut();

    4a. 検証プラグインを使用していると仮定します。いずれにしても、エラー メッセージを表示する必要があります。

  5. 検証が成功したら、フォームを送信しますyourForm.submit();

  6. サーバー側の検証が失敗した場合は、ビューを返しますreturn View(input);

于 2013-03-28T03:49:22.513 に答える