jquery - 在 asp.net mvc 中处理 jquery 函数

Question

我添加了一个摇动动画类 (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);
    }
};

Answer 1

您需要防止单击按钮时的默认操作，否则会导致提交表单（导致您注意到重定向）。如果将事件传递到函数中，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);
    }
};​