下载文档时意外生成JSON文件的问题排查求助

额外JSON下载的来源 #

那个意外的JSON文件，本质是你的外层formModProject表单被意外提交导致的。

当触发DownloadDoc的元素（比如按钮、链接）嵌套在using (Html.BeginForm("ModProject", ...))生成的表单内部时，点击这个元素会同时触发两个行为：

1. 执行你写的DownloadDoc函数，创建临时表单下载文档；
2. 触发元素的默认表单提交行为，也就是提交formModProject到ModProject Action。而ModProject Action返回的是JSON数据，浏览器无法识别该如何渲染，就会把它作为文件下载下来，这就是你看到的额外JSON文件。

当你移除外层的表单using块后，没有了外层表单，自然不会触发这个额外的提交，所以问题消失。

用preventDefault解决冲突的方法 #

你需要在触发DownloadDoc的事件中阻止默认的表单提交行为，有两种常见方式：

方式1：在事件绑定中直接阻止默认行为

如果用jQuery绑定点击事件，直接在回调里调用preventDefault：

// 假设下载按钮有download-btn类，并且用data-docid存储文档ID
$('.download-btn').on('click', function(e) {
    // 阻止默认的表单提交行为
    e.preventDefault();
    // 阻止事件冒泡，避免触发其他父元素的事件
    e.stopPropagation();
    var docId = $(this).data('docid');
    DownloadDoc(docId);
});

方式2：修改DownloadDoc函数，接收事件参数并处理

调整函数，让它接收事件对象，在开头就阻止默认行为：

function DownloadDoc(e, id) {
    // 阻止默认行为与事件冒泡
    if (e) {
        e.preventDefault();
        e.stopPropagation();
    }
    
    if (!isGuid(id)) {
        ErrorDialog("#MessageDialog", "#lblError", "The value passed is not a valid GUID.", "Invalid GUID");
        return false;
    }
    // 注意：原代码里的$(body)要改成$('body')，否则无法正确找到body元素
    var form = $('<form method="POST" action="DownloadProjectDocument" target="_blank">');
    form.append($('<input type="hidden" name="fileid" value="' + id + '">'));
    $('body').append(form);
    form.submit().remove();
    return false;
}

调用时传递事件对象：

<button onclick="DownloadDoc(event, 'your-guid-value')">下载文档</button>

额外小修正 #

你原来的DownloadDoc函数里有个小问题：$(body)应该写成$('body')，否则无法正确选中页面的body元素来添加临时表单。

内容的提问来源于stack exchange，提问作者Dean.DePue