DNN MVC模块表单提交后跳转至顶部问题咨询

原因分析 #

这个问题大概率是DNN框架的全局事件绑定和自定义事件冲突，或是事件绑定时机不对导致preventDefault()未生效。另外DNN对MVC模块的表单提交有特殊处理逻辑，直接用原生绑定可能被覆盖。

具体解决方案 #

1. 确保jQuery事件在DOM加载完成后绑定

如果事件绑定代码放在页面头部，DOM元素还未渲染完成会导致绑定失效，需改为在$(document).ready()内绑定：

$(document).ready(function() {
    $('#frmTest').on('submit', function(e) {
        e.preventDefault();
        // 自定义表单提交逻辑，示例：Ajax请求
        $.post($(this).attr('action'), $(this).serialize(), function(response) {
            // 处理响应结果
        });
        return false;
    });
});

注意：优先绑定表单的submit事件而非按钮的click事件，避免表单通过回车等其他方式触发提交时逻辑失效。

2. 正确使用Ajax.BeginForm（原生MVC Ajax方案）

若使用Ajax.BeginForm，需确保DNN的MVC Ajax脚本已加载，并配置正确的AjaxOptions阻止默认跳转：

@using (Ajax.BeginForm("TestForm", "YourController", new AjaxOptions {
    HttpMethod = "POST",
    OnSuccess = "handleSuccess",
    OnFailure = "handleFailure",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "resultContainer" // 可选，指定要更新的DOM元素
}, new { id = "frmTest" }))
{
    @Html.ValidationSummary(false, "", new { @class = "text-danger" })
    <div class="form-group d-flex flex-md-row align-items-center">
        @Html.LabelFor(m => m.Name, new { @class = "form-label mr-2" })
        @Html.TextBoxFor(m => m.Name, new { @class = "form-control mr-2" })
        @Html.ValidationMessageFor(m => m.Name, null, new { @class = "" })
        <input type="submit" value="Submit" class="btn btn-primary" id="submit" />
    </div>
}

<script>
function handleSuccess(response) {
    // 处理成功响应
}
function handleFailure(response) {
    // 处理失败响应
}
</script>

同时需确认布局页_Layout.cshtml已引入MVC Ajax脚本，DNN通常会自动加载，若未加载可手动添加：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

3. 利用DNN专属属性禁用自动跳转

给表单添加data-dnn-ajax="true"属性，告知DNN以Ajax方式处理表单提交，避免页面跳顶：

<form action="testform" method="post" id="frmTest" data-dnn-ajax="true">
    <!-- 表单内容 -->
</form>

4. 阻止全局事件冲突

部分DNN皮肤或第三方模块可能绑定了全局submit事件，可通过event.stopImmediatePropagation()阻止其他事件执行：

$(document).ready(function() {
    $('#frmTest').on('submit', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation(); // 阻止其他绑定的submit事件触发
        // 自定义提交逻辑
        return false;
    });
});

验证排查 #

测试时可先注释所有自定义脚本，用最简表单提交测试，逐步排查是DNN全局逻辑还是代码自身问题。同时打开浏览器控制台，检查是否存在脚本错误，这类错误可能导致preventDefault()无法正常执行。

内容的提问来源于stack exchange，提问作者mz1378