嵌入WordPress页面的IFrame中.NET表单提交后URL跳转求助

方案1：修改.NET后端提交逻辑直接跳转 #

如果你的预约表单通过后端Action方法处理提交，直接在完成业务逻辑后添加跳转代码即可：

ASP.NET MVC示例 #

[HttpPost]
public ActionResult SubmitAppointment(AppointmentViewModel model)
{
    // 执行预约数据验证、存储等业务逻辑
    if (ModelState.IsValid)
    {
        // 保存预约信息到数据库或其他存储
        // ...
        
        // 跳转至指定成功页面URL
        return Redirect("https://your-domain.com/appointment-success");
    }
    
    // 验证失败时返回表单页面
    return View(model);
}

ASP.NET Web Forms示例 #

protected void SubmitBtn_Click(object sender, EventArgs e)
{
    // 处理预约数据逻辑
    // ...
    
    // 跳转指定URL
    Response.Redirect("https://your-domain.com/appointment-success");
}

方案2：前端JS拦截表单提交并跳转 #

如果表单通过前端AJAX提交，可在提交成功的回调里触发跳转；若需要跳出IFrame在整个WordPress页面跳转，使用top.location.href替代window.location.href：

// 获取表单元素
const appointmentForm = document.getElementById('appointment-form');

appointmentForm.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认表单提交行为
    
    // 收集表单数据
    const formData = new FormData(this);
    
    // 发送请求到.NET接口
    fetch(this.action, {
        method: 'POST',
        body: formData
    })
    .then(res => {
        if (res.ok) {
            // 跳转指定URL（top.location.href 用于跳出IFrame）
            top.location.href = 'https://your-domain.com/appointment-success';
        } else {
            // 处理提交失败场景
            alert('预约提交失败，请重试');
        }
    })
    .catch(err => {
        console.error('提交出错:', err);
        alert('提交出现异常，请稍后再试');
    });
});

注意事项 #

• 若WordPress站点与.NET脚本所在域名不同，需在.NET后端配置CORS允许跨域请求
• 移除或注释掉原本触发模态框的JS代码，避免逻辑冲突
• 跳转URL使用完整绝对路径，避免相对路径导致的跳转错误

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