如何在C# ASP.NET中将表单提交至外部页面并显示自定义感谢页？

方案一：ASP.NET后端中转提交（推荐，无跨域风险） #

通过后端接口中转表单数据到外部地址，完全避开前端跨域问题，同时能可靠控制提交后的跳转逻辑。

实现步骤 #

1. 表单仍提交至自身ASP.NET控制器的Action
2. 在控制器中接收表单数据，使用HttpClient调用外部接口
3. 根据外部接口响应结果，跳转至自定义感谢页

控制器代码

using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

public class FormController : Controller
{
    private readonly HttpClient _httpClient;

    public FormController(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    [HttpPost]
    public async Task<IActionResult> SubmitExternalForm(FormSubmitModel model)
    {
        if (!ModelState.IsValid)
        {
            // 验证失败，返回原表单页并保留输入内容
            return View(model);
        }

        // 构造提交到外部的表单数据
        var formContent = new MultipartFormDataContent();
        formContent.Add(new StringContent(model.Username), "Username");
        formContent.Add(new StringContent(model.Email), "Email");
        // 按需添加其他表单字段

        // 调用外部接收接口
        var externalResponse = await _httpClient.PostAsync("http://web.ReciveData.com/", formContent);
        
        if (externalResponse.IsSuccessStatusCode)
        {
            // 提交成功，跳转至自定义感谢页
            return RedirectToAction("ThankYou");
        }
        else
        {
            // 提交失败，返回表单页并提示错误
            ModelState.AddModelError(string.Empty, "数据提交失败，请稍后重试");
            return View(model);
        }
    }

    // 自定义感谢页Action
    public IActionResult ThankYou()
    {
        return View();
    }
}

表单模型类

public class FormSubmitModel
{
    public string Username { get; set; }
    public string Email { get; set; }
    // 其他表单字段
}

前端表单代码

<form asp-action="SubmitExternalForm" method="post">
    <div class="form-group">
        <label asp-for="Username"></label>
        <input asp-for="Username" class="form-control" required />
        <span asp-validation-for="Username" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Email"></label>
        <input asp-for="Email" class="form-control" required />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

方案二：前端隐藏iframe提交（无需后端改造） #

通过隐藏iframe承载表单提交，避免页面刷新，提交完成后通过iframe的加载事件触发感谢页显示。

实现代码 #

<form id="externalForm" action="http://web.ReciveData.com/" method="post" target="hiddenSubmitFrame">
    <input type="text" name="Username" required placeholder="用户名">
    <input type="email" name="Email" required placeholder="邮箱">
    <!-- 其他表单字段 -->
    <button type="submit">提交</button>
</form>

<!-- 隐藏的iframe，用于承载表单提交 -->
<iframe name="hiddenSubmitFrame" id="hiddenSubmitFrame" style="display: none;"></iframe>

<!-- 自定义感谢内容，初始隐藏 -->
<div id="thankYouSection" style="display: none;">
    <h2>感谢您的提交！</h2>
    <p>我们已收到您的信息，将尽快与您联系。</p>
</div>

<script>
// 监听iframe加载完成事件
document.getElementById('hiddenSubmitFrame').addEventListener('load', function() {
    // 若外部提交成功后会跳转至成功页，可通过判断iframe内容进一步验证
    // 简单场景下，默认iframe加载完成即视为提交成功
    document.getElementById('externalForm').style.display = 'none';
    document.getElementById('thankYouSection').style.display = 'block';
});
</script>

注意：若外部网站有跨域限制，无法读取iframe内的响应内容，此场景下只能默认加载完成即显示感谢页，建议提前与外部站点确认提交后的跳转逻辑。

方案三：修复Fetch跨域提交问题 #

若外部站点支持CORS（跨域资源共享），可修正Fetch请求的配置，避免请求头错误：

document.getElementById('submitBtn').addEventListener('click', async function(e) {
    e.preventDefault();
    
    // 前端基础验证
    const username = document.getElementById('Username').value;
    const email = document.getElementById('Email').value;
    if (!username || !email) {
        alert('请填写所有必填字段');
        return;
    }

    const formData = new FormData();
    formData.append('Username', username);
    formData.append('Email', email);

    try {
        const response = await fetch('http://web.ReciveData.com/', {
            method: 'POST',
            body: formData,
            // 移除非法的自定义请求头，仅使用浏览器默认头即可（除非外部站点明确要求）
            credentials: 'omit' // 若无需携带Cookie，可设置为omit
        });

        if (response.ok) {
            // 提交成功，跳转至感谢页
            window.location.href = '/Form/ThankYou';
        } else {
            alert('提交失败，请重试');
        }
    } catch (error) {
        console.error('提交异常:', error);
        alert('提交出错，请稍后再试');
    }
});

注意：此方案依赖外部站点配置了允许当前域名的CORS规则，否则会触发跨域拦截错误。

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