Question

我是jquery ajax的新手。我想在不使用DataAnnotations的情况下学习客户端jquery验证。当我按下登录按钮时，页面刷新不会使用ajax帖子发布到控制器的登录（用户x）方法。我不是专家，我们将非常感谢任何建议和意见。

我的模特

public class User
{
    public String UserName { get; set; }
    public String Password { get; set; }
}

我的控制器

public class LoginController : Controller
{
  [HttpPost]
    public bool Login(User x)
    {
        return false;
    }

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

该视图是LoginTst＆amp;脚本

＆＃13;

$(document).ready(function()
    {
        $("#signin").click(function ()
        {
           
                $("#loginForm").validate({
                    rules: {
                        UserName: {
                            required: true,
                            minlength: 2,
                            maxlength: 15
                        },
                        Password: {
                            required: true,
                            minlength: 5,
                            maxlength: 18
                        }
                    },
                    messages: {
                        UserName: {
                            required: "username req",
                            minlength: "user is small",
                            maxlength: "user is long"
                        },
                        Password: {
                            required: "pass req",
                            minlength: "pass is small",
                            maxlength: "pass is long"
                        }
                    },
                    submitHandler: function (form) {
                        var form = $('#loginForm');
                        $.ajax({
                            cache: false,
                            async: true,
                            type: "POST", 
                            url: form.attr('Login'), // the action it 
                            data: form.serialize(),
                            success: function (data) {
                                if (data == false) {
                                    alert("Username doesn't exist");
                                }
                            }
                        });
                    }

                });

            });

        
    });

＆＃13;

<form action="" name="loginForm" id="loginForm">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" id="UserName" name="UserName">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" placeholder="Password" id="Password" name="Password">
        </div>
        <div class="form-group">
        <button class="btn btn-warning btn-block" type="submit" id="signin">login</button>
        </div>   
     </form>

＆＃13;

我做错了什么？

Answer 1

您将网址设置为form.attr('Login')，但在您的HTML中，表单没有＆＃34;登录＆＃34;属性。

您可能要做的是在表单上设置操作（到您想要的网址），然后更改javascript中的网址以使用form.attr（＆＃39; action＆＃39;）。

Answer 2

问题是您的操作未设置。您可以手动设置它，也可以使用Html.BeginForm包装输入字段。后者允许您在控制器上引用控制器和方法，而不必担心相对路径。

以下是一个例子：

@using (@Html.BeginForm("Login", "Login", FormMethod.Post, new {@id="loginForm"}))
{   
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Username" id="UserName" name="UserName">
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="Password" id="Password" name="Password">
    </div>
    <div class="form-group">
      <button class="btn btn-warning btn-block" type="submit" id="signin">login</button>
    </div>  
}

当然，您也可以使用HTML Helpers作为using块内的输入控件。

您还需要更新submitHandler以拉入表单助手生成的操作：

submitHandler: function(form) {
  var form = $('#loginForm');
  $.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: form.attr('action'), // the action as defined in the <form> 
    data: form.serialize(),
    success: function(data) {
      if (data == false) {
        alert("Username doesn't exist");
      }
    }
  });
}

您可以在此处找到一个有效的dotnetfiddle示例：https://dotnetfiddle.net/kRfSnh

MVC使用jquery ajax验证并发布到控制器

2 个答案: