时间戳

首页 > 解决方案 > 在 ajax 请求之前调用的表单操作

asp.net - 在 ajax 请求之前调用的表单操作

问题描述

我正在尝试使用 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);
    }
});

});

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

标签： asp.netasp.net-core

解决方案

如果您首先需要 JavaScript 而不是必须从表单中删除 asp-Controller 和操作，那么您可以通过 JavaScript 验证表单并通过 Ajax 调用将数据发送到控制器/操作。

推荐阅读