Question

我在Razor View中使用Html.BeginForm，这是一个由按钮触发的登录表单。此外，对于此按钮，我附加了onclick事件以从外部rest api获取带有ajax的令牌。我想对此进行排队（正如我所知，按钮触发2个异步事件）。

有什么办法可以在从html提交表单之前进行此api调用吗？

<section id="loginForm" class="form-signin">
    @using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { role = "form" }))
    {
        @Html.AntiForgeryToken()
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

        @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
        <label>
            <div class="checkbox">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>
        </label>
        <input type="submit" value="Sign in" id="loginBtn"class="btn btn-lg btn-primary btn-block btn-signin" />
    }
</section>

这是一个简单的MVC5片段。

Answer 1

在开始从参数开始提交表格湾之前，无法运行js事件。

但是您可以模拟这项工作，将输入类型从提交更改为按钮，然后添加 onclick 属性。

<section id="loginForm" class="form-signin">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl, id = "LoginForm" }, FormMethod.Post, new { role = "form" }))
{
    @Html.AntiForgeryToken()
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

    @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
    <label>
        <div class="checkbox">
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe)
        </div>
    </label>
    <input type="button" onclick="clickloginformbtn();" value="Sign in" id="loginBtn"class="btn btn-lg btn-primary btn-block btn-signin" />
}

然后在.js文件中编写此功能：

function clickloginformbtn(){
  //your code here
  $("#LoginForm").submit();
}

在发布Html.BeginForm

1 个答案: