如何从 HTML 提交按钮调用 ASP.NET CORE WEB API 3.1答案

【问题标题】：How to call a ASP.NET CORE WEB API 3.1 from HTML Submit button如何从 HTML 提交按钮调用 ASP.NET CORE WEB API 3.1
【发布时间】：2021-01-02 22:15:21
【问题描述】：

我有一个非常基本的问题，如何在 ASP .Net Core Web API 3.1 中的 Submit Click to Action 方法上发送文本框值，

<form method="post" >
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="firstName"><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lastname"><br><br>
        <label for="email">Email ID:</label>
        <input type="text" id="email" name="email"><br><br>
        <input type="submit" value="Submit">
    </form>

我已经创建了我的员工模型

public string firstName { get; set; }
public string lastname { get; set; }
public string emailid { get; set; }

我也有我的行动方法

   [HttpPost]
    public IActionResult InsertEmployeeData ([FromBody] Employee employee)
    {
        var emplFirstName = employee.firstName;
        var empLastName = employee.lastname;
        return Ok();
    }

互联网上可用的示例大多以 VIEW 为例，但我有一个纯 html 文件“Home.html”我的项目的 wwwroot 目录，需要通过单击提交按钮将值发送到操作方法，是否存在在不使用 AJAX 调用、视图的情况下实现它的任何方式。

分享你的想法/知识

谢谢

【问题讨论】：

你知道网址长什么样吗？如果是，那么它是对给定 url 的基本 ajax 调用，正文中有一个解构的员工。这就是我上一个 asp.net 核心项目的工作方式（但那是半年前的事了）。
@Brezelmann 那么，必须使用 AJAX 调用而不是其他方式吗？
不，您不能使用任何其他常规方式提交信息，只要您知道要访问的端点的正确 url。你提到了 ajax，这是最容易回答的。
你能以其他方式分享代码参考吗？
不直接，因为我总是可以使用 ajax。但是我记得在 microsoft 页面上阅读到除了 ajax 之外还有其他选项。不幸的是，我找不到提供所有可用选项概述的文章。我找到的唯一一个是：docs.microsoft.com/en-us/aspnet/core/tutorials/…

标签： c# html asp.net-core

【解决方案1】：

据我所知，formrbody 不会接受 Form-data，它会接受 json 格式，否则。

如果你想将数据从 html 发布到 webapi，你应该使用[FromForm] 代替，并确保 html 页面和 web api 在同一个项目中。

那么你应该在form标签的action属性中添加正确的控制器/动作路径。

更多细节，您可以参考以下代码：

<form method="post" action="WeatherForecast/InsertEmployeeData">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="firstName"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lastname"><br><br>
    <label for="email">Email ID:</label>
    <input type="text" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
</form>

API：

    [HttpPost("InsertEmployeeData")]
    public IActionResult InsertEmployeeData([FromForm] Employee employee)
    {
        var emplFirstName = employee.firstName;
        var empLastName = employee.lastname;
        return Ok();
    }

结果：

【讨论】：

【解决方案2】：

设置名称为表单

<form method="post" name="FormEmployee" >
   <label for="fname">First name:</label>
   <input type="text" id="fname" name="firstName"><br><br>
   <label for="lname">Last name:</label>
   <input type="text" id="lname" name="lastname"><br><br>
   <label for="email">Email ID:</label>
   <input type="text" id="email" name="email"><br><br>
   <input type="submit" value="Submit">
</form>

并添加脚本

document.forms["FormEmployee"].addEventListener("submit", e => {
    e.preventDefault();
    const form = document.forms["FormEmployee"];
    const response = await fetch("api/{controller name}", {
        method: "POST",
        headers: { "Accept": "application/json", "Content-Type": "application/json" },
        body: JSON.stringify({
            firstName: form.elements["firstName"].value,
            lastname: form.elements["lastname"].value,
            email: form.elements["email"].value
        })
    });
});

【讨论】：