.NET MVC：提交表单时脚本未执行及同时执行脚本与控制器方法的疑问

问题场景与代码 #

用户在.NET MVC项目中的视图代码如下：

@model MyModel
@{
    ViewBag.PageTitle = ..LocalizationResources.LogIn;
}

<hgroup class="title">
    <h3>@ViewBag.PageTitle</h3>
</hgroup>

@using (Html.BeginForm("MethodName", "ControllerName", null, FormMethod.Post, new { @class = "form-horizontal", id = "simulatorForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-group">
        @Html.LabelFor(m => m.ID, new { @class = "col-sm-2 control-label" })
        <div class="col-sm-10">
            @Html.TextBoxFor(m => m.ID, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.ID)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Name, new { @class = "col-sm-2 control-label" })
        <div class="col-sm-10">
            @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Name)
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            @Html.SubmitButton(..LocalizationResources.LogIn, null)
        </div>
    </div>

}

@section Scripts {
    <script type="text/javascript">
        document.getElementById('simulatorForm').addEventListener('submit', handleFormSubmit);

        function handleFormSubmit() {
            console.log("form submitted");

            var form = document.getElementById('simulatorForm');

            var id = form.elements['ID'].value.trim();
            var name= form.elements['Name'].value.trim();

            if (id == "" || name == "") return;

            console.log("form validated");

            var user = {
                "id": id,
                "name": name 
            };

            .... my intern init code

            return false;
        }

    </script>
}

遇到的问题 #

• 点击提交按钮时，未填全字段会输出form submitted日志；但填全字段后，该日志未出现，表单直接跳转到控制器方法。
• 疑问：是否存在脚本未执行就提交表单的情况？能否在提交表单时同时执行onSubmit脚本与控制器方法？

1. 填全字段后脚本未执行就提交的原因 #

核心问题出在你的脚本逻辑和错误处理上：

• 当字段填全时，handleFormSubmit函数里的.... my intern init code部分大概率抛出了运行时错误，导致JavaScript执行中断，后续的return false无法执行，表单触发默认提交行为。而浏览器在页面跳转前会清空控制台日志，所以你看不到form submitted的输出（实际上这个日志已经输出过，只是被跳转覆盖了）。
• 另一种小概率情况是DOM加载顺序问题：如果脚本执行时表单元素还未渲染完成，document.getElementById('simulatorForm')返回null，事件监听绑定失败。但这种情况会导致所有场景下脚本都不执行，和你描述的部分执行情况不符，所以优先级更低。

2. 同时执行脚本与控制器方法的实现方式 #

完全可以实现，根据需求分两种场景处理：

场景1：先执行同步脚本，再正常提交表单 #

去掉阻止默认提交的return false，仅在字段校验不通过时阻止提交：

function handleFormSubmit(e) {
    console.log("form submitted");

    var form = document.getElementById('simulatorForm');
    var id = form.elements['ID'].value.trim();
    var name = form.elements['Name'].value.trim();

    if (id === "" || name === "") {
        e.preventDefault(); // 校验不通过时阻止提交
        return;
    }

    console.log("form validated");

    var user = {
        "id": id,
        "name": name 
    };

    // 执行你的内部初始化代码
    // ...

    // 不做阻止操作，表单自动提交到控制器
}

场景2：异步脚本执行完成后再提交表单 #

如果脚本包含异步操作（如AJAX请求），需要先阻止默认提交，异步操作完成后手动触发表单提交：

function handleFormSubmit(e) {
    e.preventDefault(); // 先阻止默认提交行为

    console.log("form submitted");

    var form = document.getElementById('simulatorForm');
    var id = form.elements['ID'].value.trim();
    var name = form.elements['Name'].value.trim();

    if (id === "" || name === "") return;

    console.log("form validated");

    var user = {
        "id": id,
        "name": name 
    };

    // 模拟异步操作（比如发送数据到接口）
    fetch('/api/your-endpoint', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(user)
    }).then(() => {
        // 异步操作成功后，手动提交表单到控制器
        form.submit();
    }).catch(err => {
        console.error('异步操作失败:', err);
    });
}

额外排查建议 #

• 打开浏览器开发者工具的控制台，勾选"Preserve log"选项，提交表单后查看是否有报错信息，定位.... my intern init code中的问题。
• 绑定事件时确保DOM已加载完成，可将事件监听代码包裹在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('simulatorForm').addEventListener('submit', handleFormSubmit);
});

内容的提问来源于stack exchange，提问作者Dario Lucić