从 Razor 表单提交调用 JS 方法答案

【问题标题】：Call JS method from Razor form submit从 Razor 表单提交调用 JS 方法
【发布时间】：2016-12-18 09:53:22
【问题描述】：

当我提交表单时，我想启动下面写的Javascript 方法。这个JS 方法将向后端发送一个POST 请求。但是，在下面编写的代码中，这个JS 方法没有被触发。有人可以帮我解决这个问题吗？

@using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal",  onsubmit = "submitdata" }))
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(m => m.EMAIL, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.email,  new {id ="Email", @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.pwd, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.pwd, new {id="pwd", @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" onsubmit="submitdata"/>
        </div>
    </div>
}

Javascript

function submitdata() {
    var pwd = document.getElementById("pwd");
    var email = document.getElementById("email");

    $.ajax({
        type: 'post',
        url: '/Account/Reg',
        data: {
            email: email,
            password: pwd
        },
        success: function (response) {
            $('#success__para').html("You data will be saved");
        }
    });

    return false;

}

【问题讨论】：

标签： javascript c# jquery razor

【解决方案1】：

您在 onsubmit 属性中错过了 ()；

onsubmit = "submitdata()"

【讨论】：

而不是在表单上使用onsumit = "submitdata()" 我如何在按钮单击时使用它？

【解决方案2】：

正如 Vostrugin 在他的回答中提到的，您在方法调用中缺少 ()。

这里是unobtrusive javascript方式（使用jQuery）

function submitdata() {
   // your existing code
}
$(function(){
  $("form").submit(function(e){
     e.preventDefault();
     submitData();
  });
});

如果你想用一个特定的按钮点击来连接它，使用一个jQuery选择器来获取按钮并绑定点击事件。

<input type="submit" id="myButton" value="Register"/>

和

$(function(){
  $("#myButton").click(function(e){
     e.preventDefault();
     submitData();
  });
});

使用这种方法，您应该从 UI 标记中删除 onsubmit 事件。

【讨论】：