We followed this tutorial https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-2.1 Create a Web API with ASP.NET Core and Visual Studio for Windows and created a ToDoApi project. I can post & get through the project and through PostMan to URL: http://localhost:2399/api/todo
Then, I created new project using ASP.NET Web Forms Site. I added new Web Form with this html:
<body>
<form id="form1" runat="server" method="post" action="http://localhost:2399/api/Create">
<div>
<asp:Label Text="Name:" runat="server" />
<asp:TextBox runat="server" name="name"/>
<br />
<asp:Button Text="Submit" runat="server" />
</div>
</form>
</body>
I tried to post to previous project but wasn't successful. I can hit the first breakpoint but not the second. We want the .NET Core to be the back end API and the HTML form as a front end. What do you recommend?
public class TodoController : Controller
{
private readonly TodoContext _context;
public TodoController(TodoContext context)
{
_context = context;
if (_context.TodoItems.Count() == 0)
{
_context.TodoItems.Add(new TodoItem { Name = "Item1" });
_context.SaveChanges();
}
}
[Route("~/api/Create")]
[HttpPost]
public IActionResult Create([FromBody] TodoItem item)
{
if (item == null)
{
return BadRequest();
}
_context.TodoItems.Add(item);
_context.SaveChanges();
return CreatedAtRoute("GetTodo", new { id = item.Id }, item);
}
Simple form call the api (this is not working):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MY API</title>
</head>
<body>
<h1>ADD NEW LEAD</h1>
<input type="text" id="add-name" placeholder="Full Name">
<input type="text" id="add-company" placeholder="Company">
<input type="text" id="add-phone" placeholder="Phone">
<input type="text" id="add-email" placeholder="Email">
<input type="text" id="add-address" placeholder="Address">
<input type="text" id="add-city" placeholder="City">
<input type="text" id="add-state" placeholder="State">
<input type="text" id="add-zip" placeholder="Zip Code">
<input type="text" id="add-description" placeholder="Description">
<button type="submit" onclick="javascript:send()">Submit</button>
<div id='div'>
</div>
<script type="text/javascript" language="javascript">
function send() {
//var ItemJSON = {
// "FullName": $('#add-name').val(),
// "Company": $('#add-company').val(),
// "Phone": $('#add-phone').val(),
// "Email": $('#add-email').val(),
// "Address": $('#add-address').val(),
// "City": $('#add-city').val(),
// "State": $('#add-state').val(),
// "Zip": $('#add-zip').val(),
// "Description": $('#add-description').val()
//};
var ItemJSON = '{ "FullName": "NA", "Phone": "31439289452", "Ext": "5000", "Email": "m.alkurwi@Yahoo.com","Company": "PlazSoft", "Address": "357 Hinder dr", "Description": "tsetteststeste", "City": "STL", "State": "MO", "Zipcode": "63125" }';
alert('1')
URL = "http://localhost:59930/api/values"; //Your URL
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
alert('2')
xmlhttp.open("POST", URL, true);//tried both false and true
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify(ItemJSON));
document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>";
}
</script>
</body>
</html>
Post man can POST to it, but the web form can't
