Question

我正尝试使用javascript验证某些数据，因此在创建此表单后：

<form asp-controller="User" asp-action="UpdateUser" asp-antiforgery="true" id="userInformations">
   <div class="form-group">
<label class="col-lg-6 control-label">@Localizer["OldPassword"] (*)</label>
<div class="col-lg-12">
    <input class="form-control" required id="oldPassword"
            asp-for="@Model.ExistingPassword" type="password" />
</div>
<div class="form-group">
    <label class="col-lg-6 control-label">@Localizer["NewPassword"] (*)</label>
    <div class="col-lg-12">
        <input class="form-control" required id="newPassword"
                asp-for="@Model.Password" type="password" />
    </div>
</div>
<button type="submit" class="btn btn-primary">Store</button>
</form>

我绑定了一个拦截提交的javascript函数：

$('#userInformations').on('submit', function (event) {
  event.preventDefault();
 //validate some fields

//execute ajax request
$.ajax({
    url: $(this).attr('action'),
    type: "POST",
    data: $(this).serialize(),
    success: function (result) {
        alert(true);
        console.log(result)
    },
    error: function (data) {
        console.log(data);
    }
});

});

现在，当我按下“提交”按钮时，UpdateUser中的方法UserController被首先调用javascript函数，我不明白为什么会这样，因为我使用了preventDefault 。如何防止调用绑定到表单的asp net操作？

Answer 1

如果首先需要JavaScript，则必须从表单中删除asp-Controller和action，然后可以通过JavaScript验证表单并通过Ajax调用将数据发送到Controller / action。

Answer 2

您想要的效果是使用javascript验证某些数据，并在按下“提交”按钮时通过ajax实施操作调用？

我使用您提供的代码，它可以正常工作。

尝试以下两种方法：

1。在JavaScript上方添加以下代码

<script src="~/lib/jquery/dist/jquery.js"></script>

2。或者直接在 @section脚本{}

中编写您的JavaScript

在ajax请求之前调用表单操作

2 个答案: