如何從 HTML 提交按鈕調用 ASP.NET CORE WEB API 3.1

Question

我有一個非常基本的問題，如何在 ASP .Net Core Web API 3.1 中的提交點​​擊操作方法上發送文本框值，

<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 調用、視圖的情況下實現它。

分享您的想法/知識

謝謝

Answer 1

將名稱設置為表單

<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
        })
    });
});

Answer 2

據我所知，formrbody 不接受 Form-data，它將接受 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>

接口：

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

結果：