插入数据后跳转至JSON文件而非视图，Chosen.js与_Layout适配问题求助

这个问题我之前也碰到过，核心原因就是未引用_Layout导致脚本依赖管理混乱，加上Chosen.js和jQuery DataTables的脚本加载顺序/版本冲突，最终让表单提交后的响应处理出错。下面是具体的解决步骤：

1. 严格控制脚本加载顺序，避免jQuery重复/版本冲突 #

因为你的AddOrView视图没有引用默认_Layout，所有依赖脚本都需要手动引入，必须遵循以下顺序：

• 首先引入唯一版本的jQuery（确保和主视图DataTables使用的jQuery版本一致，不要重复引入）
• 然后引入Chosen.js的CSS文件
• 接着引入Chosen.js的JS文件
• 再引入jQuery DataTables的CSS和JS文件
• 最后写你的自定义业务脚本（表单提交、Chosen初始化等）

示例代码（放在AddOrView视图的<head>或页面底部）：

<!-- 先引入jQuery -->
<script src="~/Scripts/jquery-3.6.0.min.js"></script>

<!-- Chosen.js相关 -->
<link rel="stylesheet" href="~/Scripts/chosen/chosen.min.css">
<script src="~/Scripts/chosen/chosen.jquery.min.js"></script>

<!-- DataTables相关 -->
<link rel="stylesheet" href="~/Scripts/DataTables/datatables.min.css">
<script src="~/Scripts/DataTables/datatables.min.js"></script>

<!-- 自定义脚本 -->
<script>
$(document).ready(function() {
    // 初始化Chosen下拉框
    $('.chosen-select').chosen({
        width: '100%'
    });
});
</script>

2. 改用AJAX处理表单提交，避免默认重定向 #

之前的问题大概率是表单用了默认提交方式，后端返回JSON后直接被浏览器渲染成了JSON页面。改用AJAX提交可以完全控制提交后的行为：

前端代码（AddOrView视图中） #

给提交按钮绑定AJAX事件，阻止默认表单提交：

$(document).ready(function() {
    // 绑定提交按钮事件
    $('#submit-add-btn').click(function(e) {
        e.preventDefault(); // 阻止默认表单提交行为

        var formData = $('#add-data-form').serialize(); // 序列化表单数据

        $.ajax({
            url: '@Url.Action("AddData", "YourController")', // 替换成你的后端接口地址
            type: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    // 成功后关闭弹窗
                    $('#your-modal-id').modal('hide');
                    // 刷新主页面的DataTables数据
                    window.parent.$('#data-table-id').DataTable().ajax.reload();
                } else {
                    // 处理错误提示
                    alert('数据插入失败：' + response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('请求出错：', error);
                alert('服务器请求失败，请稍后重试');
            }
        });
    });
});

后端代码（控制器中） #

修改你的添加动作，返回JSON响应而不是视图/重定向：

[HttpPost]
public JsonResult AddData(YourDataModel model)
{
    if (ModelState.IsValid)
    {
        // 执行数据插入逻辑
        _dbContext.YourDataTable.Add(model);
        _dbContext.SaveChanges();
        return Json(new { success = true });
    }
    else
    {
        // 收集验证错误信息
        var errorMessages = ModelState.Values
            .SelectMany(v => v.Errors)
            .Select(e => e.ErrorMessage);
        return Json(new { success = false, message = string.Join("；", errorMessages) });
    }
}

3. 检查并移除重复的jQuery引用 #

有些第三方插件可能会自带jQuery（虽然Chosen.js不会，但要确认），如果你的页面中存在多次引入jQuery的情况，会导致之前绑定的DataTables事件失效，最终引发提交逻辑混乱。确保整个页面只引入一次jQuery。

4. 验证弹窗的渲染方式 #

如果你的AddOrView是作为弹窗内容加载的（比如通过AJAX加载到模态框），要确保弹窗加载时不会重复引入脚本。可以把公共脚本（jQuery、Chosen、DataTables）放在主视图中，弹窗视图只放自定义业务脚本，避免重复加载。

按照以上步骤处理后，就能解决插入数据后跳转到JSON页面的问题，同时保留Chosen.js的下拉框功能。

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