0

テキストボックスが空のときに追加するシェイクアニメーションクラス（Css3）を追加しましたが、asp.net mvcがユーザーをホームページに再度リダイレクトするため、正しく機能しません。このことを処理するための任意のアプローチ。

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

    [HttpPost]
    public ActionResult Index(string username, string password)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("Index", "Product");
        }
        else
        {
            return RedirectToAction("Index","Home");
        }  
    }

jquery関数

 $('#loginButton').click(function () {
    shaking();
});


function shaking() {
    if ($('#username').val() || $('#password').val()) {

    }
    else {
        $('#loginForm').addClass("shake");
        setTimeout(function () {
            $('#loginForm').removeClass();
        }, 2000);
    }
};
4

1 に答える 1

0

ボタンクリック時のデフォルトアクションを防ぐ必要があります。そうしないと、フォームが送信されます（リダイレクトが発生します）。イベントを関数に渡すとpreventDefault()、関連するフィールドが入力されていない場合にイベントを呼び出して送信を防ぐことができます。

$('#loginButton').click(function (e) {
    shaking(e);
});


function shaking(e) {
    if ($('#username').val() && $('#password').val()) { // should be an && to check both
        // do something if both username and password filled in
    }
    else {
        e.preventDefault(); // prevent form from being submitted

        $('#loginForm').addClass("shake");
        setTimeout(function () {
            $('#loginForm').removeClass();
        }, 2000);
    }
};​
于 2012-07-14T07:32:25.087 に答える