ASP.Net MVC 4在表单提交时设置'onsubmit'

Question

我有以下表单:

@Html.BeginForm("ActionMethod","Controller",FormMethod.Post)

提交表单时，我想运行一个Javascript函数，因此我添加了以下内容：

@Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { onsubmit = "myJsFunction()" })

但是，它不起作用...我做错了什么？谢谢！

- user818700

---

同样，当我在浏览器中查看源代码时，在 Razor 输出的 HTML 中甚至没有渲染出 OnSubmit... - user818700

Answer 1

你需要用这个代替：

@using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { onsubmit = "return myJsFunction()" }))
{
        //form
}

注意：using让表单自闭合，否则您需要按照此MSDN文章中所述进行关闭。

使用此方法可以排除问题来确认JavaScript是否被调用：

@using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { onsubmit = "alert('test')" }))
{
        <input type="submit" value="test" />
}

这应该会弹出一个警告。

如果第一个失败，第二个成功，则可能是您的js脚本引用存在问题。这会在浏览器控制台中引发错误。

更新

如果您给表单分配一个ID，而不是强制性地绑定表单，您可以使用以下jquery（jQuery参考）：

@using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new { id = "target"}))
{
        //form
}

<script>
    $(function () {
        $("#target").submit(function (event) {
            event.preventDefault();
            myJsFunction();
        });
    });
</script>

当文档ready时，这将绑定表单。

- hutchonoid

---

感谢 @hutchonoid 提供的例子: 您的示例可以使用alert框，但是当我将那个alert语句移动到我在页面中包含的js文档中的另一个js函数中时，外部函数不会被调用... 有什么建议吗？ - user818700

@DeanGrobler 是的，很可能是你的脚本引用有问题。如果你在Chrome的开发者工具中检查网络选项卡，你可能会看到404错误，如果是这种情况，那么就是你的路径有误。 - hutchonoid

确实是一个引用错误，指出 'myFunctionName' 未定义...但它之所以这样说是因为我加载文档到页面的方式是使用 @section AddToHead { [load JS here] }。无法解决这个问题吗？ - user818700

为什么这比在按钮本身上放置一个onclick更好呢？ - Paul Zahra

@PaulZahra 在表单上并不一定只有一个提交按钮或者没有提交按钮，所以这个位置是完全正确的。 - Tom Blodget

@hutchonoid 如果您添加有关表单验证的说明，那将是很棒的。现在，无论是否存在表单错误，该函数都会执行。 - LatentDenis

Answer 2

@using (Html.BeginForm("Edit", "Home", FormMethod.Post, new { id = "form1Demo", onsubmit = "return CheckSubmit(event);" })){

//form

}

<script>

    function CheckSubmit(e) {

        var Name = $("#Name").val();

        var Roll = $("#Roll").val();

        var Price = $("#Price").val();

        if (Name == "" || Roll == "" || Price == "") {

            $("#msg").html("Please Enter All Values!");

            swal("Validation Error!", "Please Insert All Values", "warning");

            return false;
        }

        return true;
    }

</script>

- Md Shahriar