在发布 Html.BeginForm 之前运行 js 方法答案

【问题标题】：Run js method before posting Html.BeginForm在发布 Html.BeginForm 之前运行 js 方法
【发布时间】：2017-11-05 12:11:39
【问题描述】：

我在 Razor 视图中使用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 sn-p。

【问题讨论】：

你能把表单帖子从 HTML 移到使用 ajax 吗？
你试过用Ajax.BeginForm代替Html.BeginForm吗？以及在提交之前运行的 JS 方法发生在哪里？
您可以尝试使用 JQuery 提交，然后在提交方法中调用您的函数。
我在考虑您的建议，但经过更多研究后，我决定在控制器中获取令牌并将其保存到 cookie。

标签： javascript jquery asp.net-mvc asp.net-mvc-5

【解决方案1】：

在提交表单bay onbegin参数之前无法运行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();
}

【讨论】：