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

Posted 2023-03-05

【中文标题】ASP.Net MVC 4 在表单提交时设置“onsubmit”

【英文标题】：ASP.Net MVC 4 Set 'onsubmit' on form submission

【发布时间】：2015-04-20 14:02:51

【问题描述】：

我有以下表格：

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

提交时我想运行一个 javascript 函数，所以我添加了以下内容：

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

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

【问题讨论】：

另外，当我在浏览器中查看源代码时，on submit 甚至没有呈现在 razor 输出的 HTML 中......

【参考方案1】：

你需要这个：

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

        //form

注意using 这会使表单自动关闭，而无需使用您需要关闭它，如此MSDN article 中所述。

您可以确认使用此方法调用了 javascript 以隔离问题：

@using (Html.BeginForm("ActionMethod","Controller",FormMethod.Post, new  onsubmit = "alert('test')" ))

        <input type="submit" value="test" />

这应该会弹出一个警报。

如果第一个失败而第二个有效，则说明您的 js 脚本引用有问题。这会在您的浏览器控制台中引发错误。

更新

如果你给你的表单一个 Id，你可以使用下面的 jquery 代替强行绑定你的表单（jQuery reference）：

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

        //form


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

这会在表单为ready时绑定文档。

【讨论】：

感谢@hutchonoid：您的示例适用于警报框，但是当我将该警报语句移动到我在页面中包含的 js 文档中的另一个 js 函数中时.. 外部函数没有被调用...有什么想法吗？

@DeanGrobler 是的，它可能是您的脚本引用。如果您在开发工具中使用 chrome，请检查网络选项卡。您可能有 404，如果是这种情况，它将成为您的路径。

确实是一个参考错误，指出'myFunctionName'没有定义......但之所以这样说是因为我将文档加载到页面中的方式是使用@section AddToHead [在这里加载 JS] 无法解决这个问题？

为什么这是一个更好的选择，只是在按钮本身上单击一下？

@hutchonoid 如果您添加了有关表单验证的注释，那就太好了。现在，不管有没有表单错误，函数都会执行。