如何在表单提交后执行 Javascript答案

【问题标题】：How to execute Javascript following a form submission如何在表单提交后执行 Javascript
【发布时间】：2019-12-02 10:14:08
【问题描述】：

我有一个 Asp.Net Core 应用程序，我正在提交这样的表单：

@using (Html.BeginForm("MyMethod", "Action", FormMethod.Post)
{
    <button type="submit">RunMyMethod</button>                    
}

当对 MyMethod 的调用完成（成功）后，我想执行一段 JS 代码，例如：

@section Scripts {
    function functionWorked() {
        alert('This worked!');
    }
}

有没有办法做到这一点？我在想BeginForm 可能有某种形式的回调选项（但我看不到）。

【问题讨论】：

标签： javascript asp.net asp.net-core .net-core

【解决方案1】：

我不得不说，当提交表单时，您的页面被切换了。所以表单成功提交后，你永远不能在上面执行任何javascript。

但是，您可以覆盖表单的提交事件。

如果用户提交表单：

阻止浏览器切换页面。
请自行提交数据。
触发你的成功方法

就像这样：（下面的javascript需要jQuery）

@section Scripts {
        $('form').submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                data: $(this).serialize(),
                success: function (data) {
                   alert('This worked!');
                },
                error: function () {
                    alert('Unknown error!');
                }
            });
        });
}

【讨论】：

【解决方案2】：

将您的表单转换为基于 ajax 的，用于处理 onsuccess 事件。

@using (Ajax.BeginForm("Method", "Action", new AjaxOptions { OnSuccess ="onSuccess" }))
{
    <button type="submit">RunMyMethod</button>                    
}

和 Javascript/Jquery

<script type="text/javascript">
    function onSuccess(result) {
        alert("Success")
    }
</script>

【讨论】：

【解决方案3】：

我假设处理表单发布的控制器方法返回一个视图模型。通过布尔属性RenderMyScript 扩展该视图模型，该属性指示应包含您的脚本。将其设置为 true。

然后，检查视图中的布尔值：

@if (Model.RenderMyScript)
{
  @section Scripts {
      function functionWorked() {
          alert('This worked!');
      }
  }
}

【讨论】：

不过，您如何检测帖子何时完成？
我假设您的页面为帖子重新加载。如果控制器中的代码同步运行（默认情况下），则在渲染视图之前完成发布。因此将 RenderMyScript 设置为 true 将在帖子完成后和视图显示之前发生