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

Question

I have a very basic question , How to send the text box values on Submit Click to Action method in 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>

I have created my Employee Model

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

I have my Action Method too

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

The available samples in internet are mostly with VIEW as example, but i have a plain html file "Home.html" my wwwroot directory of project, Which need to send value to action method on a click of submit button, is there any way of achieving it without using AJAX Call, View.

Do Share your Ideas/Knowledge

Thank you

Answer 1

Set name to form

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

and add script

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

As far as I know, the fomrbody will not accept Form-data, it will accept json format or else.

If you want to post the data from html to webapi, you should use [FromForm] instead and make sure the html page and the web api is inside the same project.

Then you should add the right controller/action path in the action attribute in the form tag.

More details, you could refer to below codes:

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

Result: