如何从ASP.NET Web Forms页面向.NET Core Web API提交表单？

首先咱们得先解决跨域问题——因为你的Web Forms站点和.NET Core API是两个独立应用，端口肯定不一样，API默认会拒绝跨域请求。然后再看表单提交的具体实现，分两种常见方式给你说明：

1. 给.NET Core API配置跨域支持 #

打开你的ToDoApi项目，在Startup.cs（ASP.NET Core 2.1版本用这个文件）里做以下修改：

• 在ConfigureServices方法中添加CORS服务配置：

  public void ConfigureServices(IServiceCollection services)
  {
      // 保留原有代码...
      services.AddCors(options =>
      {
          options.AddPolicy("AllowWebFormsSite",
              builder => builder.WithOrigins("http://localhost:你的WebForms站点端口")
                                .AllowAnyHeader()
                                .AllowAnyMethod());
      });
      // 保留原有代码...
  }
  

• 接着在Configure方法里启用CORS中间件（必须放在UseMvc之前）：

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
  {
      // 保留原有代码...
      app.UseCors("AllowWebFormsSite");
      app.UseMvc();
  }
  

把上面的http://localhost:你的WebForms站点端口替换成你实际Web Forms项目运行的地址和端口，这样API就会接受来自Web Forms站点的请求了。

2. 方式一：原生HTML表单同步提交 #

如果不需要页面无刷新提交，直接用原生表单提交即可，注意表单字段要和API接收的模型属性匹配（ToDoApi的ToDoItem模型应该包含Name和IsComplete属性吧？）

修改Web Forms页面的表单代码：

<body>
    <form id="form1" runat="server" method="post" action="http://localhost:2399/api/todo">
        <div>
            <label for="todoName">待办事项名称：</label>
            <input type="text" id="todoName" name="Name" required />
        </div>
        <div>
            <label for="isComplete">是否完成：</label>
            <input type="checkbox" id="isComplete" name="IsComplete" />
        </div>
        <button type="submit">提交</button>
    </form>
</body>

这里要保证表单字段的name属性和API模型的属性名完全一致，这样API才能正确绑定请求参数。提交后页面会跳转到API的响应页面（通常是JSON格式的返回内容）。

3. 方式二：AJAX异步无刷新提交 #

如果想要页面不跳转，用异步方式提交表单，下面用jQuery举个例子：

首先在Web Forms页面引入jQuery（可以用CDN或者本地文件）：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后修改表单并添加提交逻辑：

<body>
    <form id="todoForm" runat="server">
        <div>
            <label for="todoName">待办事项名称：</label>
            <input type="text" id="todoName" name="Name" required />
        </div>
        <div>
            <label for="isComplete">是否完成：</label>
            <input type="checkbox" id="isComplete" name="IsComplete" />
        </div>
        <button type="button" id="submitBtn">提交</button>
        <div id="resultBox"></div> <!-- 用来显示提交结果 -->
    </form>

    <script>
        $(document).ready(function() {
            $("#submitBtn").click(function() {
                // 收集表单数据
                var todoData = {
                    Name: $("#todoName").val(),
                    IsComplete: $("#isComplete").is(":checked")
                };

                // 发送AJAX请求
                $.ajax({
                    url: "http://localhost:2399/api/todo",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(todoData),
                    success: function(response) {
                        $("#resultBox").html("<p>提交成功！返回的待办项：" + JSON.stringify(response) + "</p>");
                        // 清空表单
                        $("#todoForm")[0].reset();
                    },
                    error: function(xhr, status, error) {
                        $("#resultBox").html("<p>提交失败：" + error + "</p>");
                    }
                });
            });
        });
    </script>
</body>

这种方式不会跳转页面，提交后可以在页面内直接显示结果，用户体验更好。需要注意要设置contentType: "application/json"，并把数据转成JSON字符串，因为API默认接收JSON格式的请求体。

额外注意事项 #

• 确保两个应用都处于运行状态：先启动ToDoApi，再启动Web Forms站点。
• 如果API的路由或模型有修改，要对应调整表单字段或AJAX的数据结构。
• 生产环境中不要使用过于宽松的CORS策略（比如AllowAnyOrigin），要指定具体的域名，避免安全风险。

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