C# 如何从HTML提交按钮调用ASP.NET核心WEB API 3.1

C# 如何从HTML提交按钮调用ASP.NET核心WEB API 3.1,c#,html,asp.net-core,C#,Html,Asp.net Core,我有一个非常基本的问题,如何在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=&quo

我有一个非常基本的问题,如何在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>
我也有我的行动方法

   [HttpPost]
    public IActionResult InsertEmployeeData ([FromBody] Employee employee)
    {
        var emplFirstName = employee.firstName;
        var empLastName = employee.lastname;
        return Ok();
    }
internet上可用的示例大多以VIEW为例,但我有一个简单的html文件“Home.html”我的项目wwwroot目录,它需要在单击submit按钮时将值发送给action方法,是否有任何方法可以实现它而无需使用AJAX调用VIEW

分享你的想法/知识

谢谢

将名称设置为表单

<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>

据我所知,fomrbody不会接受表单数据,它会接受json格式或其他格式

如果要将数据从html发布到webapi,则应改用
[FromForm]
,并确保html页面和web api位于同一项目中

然后,您应该在表单标记的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>
结果:


您知道url的样子吗?如果是,那么它是对给定url的基本ajax调用,主体中有一个解构的employee。这就是我上一个asp.net核心项目的工作原理(但那是半年前的事)。@Brezelmann那么,必须使用AJAX调用而不是其他方式吗?不,你不能使用任何其他正常方式提交信息,只要你知道要点击的端点的正确url。你提到了ajax,这是最容易回答的问题。你能以其他方式分享代码参考吗?不,不能直接分享,因为我总是可以使用ajax。然而,我记得在微软的一个页面上读到,除了ajax,还有其他选择。遗憾的是,我找不到上述文章提供了所有可用选项的概述。我唯一找到的是:
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
        })
    });
});
<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>
    [HttpPost("InsertEmployeeData")]
    public IActionResult InsertEmployeeData([FromForm] Employee employee)
    {
        var emplFirstName = employee.firstName;
        var empLastName = employee.lastname;
        return Ok();
    }