ASP.NET表单提交后跳转至指定页面问题求助

在ASP.NET项目中，用户提交Create页面表单后需跳转至Learning页面。目前通过fetch可正常将数据提交至CardsController的Create接口并保存，但跳转功能失效。尝试过给submit按钮添加onclick跳转、JS绑定click事件均无效，仅在调试器中给fetch设置断点时跳转功能可正常生效。

核心原因 #

点击submit按钮时，浏览器会触发表单默认提交行为（刷新页面或执行原生表单跳转），导致fetch的异步请求还未完成，跳转代码就被中断。调试时断点会暂停默认行为，因此跳转能正常执行。

解决方案 #

1. 阻止表单默认提交行为 #

在表单的submit事件处理函数中添加event.preventDefault()，取消浏览器原生提交逻辑，确保fetch异步请求完成后再执行跳转。

修改后的script.js中事件绑定部分：

document.addEventListener('DOMContentLoaded', function() {
  let newCard = document.querySelector('.new-card');
  newCard.addEventListener('click', function() {
    addCard();
  });
  // 新增阻止默认行为
  document.querySelector('form.cards').addEventListener('submit', function(event) {
    event.preventDefault();
    saveCardDataToServer();
  });
});

2. 增强fetch错误处理（可选） #

为fetch添加HTTP状态检查和异常捕获，避免网络错误或服务器非2xx响应导致逻辑中断，同时便于调试。

修改后的saveCardDataToServer函数：

function saveCardDataToServer() {
    let cards = [];
    document.querySelectorAll('.cards > .card').forEach((card) => {
        let termInput = card.querySelector('input[name="term"]');
        let definitionInput = card.querySelector('input[name="definition"]');
        if (termInput && definitionInput) {
            let term = termInput.value.trim();
            let definition = definitionInput.value.trim();
            cards.push({
                Term: term,
                Definition: definition
            });
        } else {
            console.error("Input elements not found in card:", card);
        }
    })

    fetch('/Cards/Create/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({Cards: cards})
    })
    .then(response => {
        // 检查HTTP响应状态是否正常
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then((data => {
        if (data.success) {
            console.log("Data successfully saved: ", data);
            window.location.href = "/Cards/Learning";
        } else {
            console.error("Error saving card: ", data.message);
        }
    }))
    .catch(error => {
        console.error("Fetch request failed:", error);
    });
}

说明 #

• 阻止默认行为后，表单将完全由JS的fetch逻辑处理，确保异步请求完成后再执行页面跳转
• 增强错误处理可捕获网络异常、服务器错误等情况，避免无提示的逻辑中断

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