Question

我正在开发MVC应用程序。

我有用户表单，其中用户应该使用用户名和密码添加他/她的详细信息。

当用户填写整个表单并单击“保存”按钮时，我会检查用户名的重复。

我在控制器中编写了这个复制检查逻辑，当用户点击提交按钮时，我从视图中调用此方法。（在控制器的方法中，如果存在用户名，则返回true，否则为false。）

方法工作正常，但问题是当光标进入控制器方法时，意味着数据被保存。（虽然我使用了preventDefault（））

光标不等待视图中的方法返回值。即真或假。

它应该检查返回值并相应地表现。

如何解决？

$('#submit').click(function(e) 
    {
        var uName = $('#EditUserName').val();
        var url = "@Html.Raw(Url.Action("CheckDuplicateUserName", "Employee", new {@Id=Model.Id, @UserName = "userName"}))";
         url = url.replace("userName", uName);
         url = url.replace("Id", '@ViewBag.Employee.Id');
        $.post(url, function (data)
        {
            if (data == true) 
            {

                $('#EditduplicateUserName').text("UserName already exist,please try some other username.");
                e.preventDefault();
                return false;
            }
            else
            {
                $('#EditduplicateUserName').text("");
            }

        });

    });

Answer 1

你不能在ajax成功函数中调用preventDefault，因为ajax是异步的，你的click事件将在ajax成功事件触发之前（收到响应时）完成。

解决方案是始终在click事件中阻止默认，然后在成功函数中以编程方式提交表单（如果未使用用户名）。

$('#submit').click(function (e) {
    e.preventDefault(); // always prevent default

    var uName = $('#EditUserName').val();
    var url = "@Html.Raw(Url.Action("CheckDuplicateUserName", "Employee", new {@Id=Model.Id, @UserName = "userName"}))";

    url = url.replace("userName", uName);
    url = url.replace("Id", '@ViewBag.Employee.Id');
    $.post(url, function (data) {
        if (data == true) {

            $('#EditduplicateUserName').text("UserName already exist,please try some other username.");
        } else {
            $('#EditduplicateUserName').text("");
            $('#yourform')[0].submit(); // submit the form
        }

    });
});

附注：表单的onsubmit事件比提交按钮的click事件更受欢迎，因为前者在其他情况下触发，例如通过回车键提交，而后者则没有。 / p>

在controller方法返回值之前，首先执行提交按钮的click事件

1 个答案: