-1
I created an aspnetcore example project with ajax-POST, but Something is going Wrong. Where am I going Wrong? What is Missing?
Index.cshtml (JS)
$(document).ready(function () {
$('#buttonDemo1').click(function () {
$.ajax({
type: 'GET',
url: '/product/demo1',
success: function (result) {
$('#result1').html(result);
}
});
});
$('#buttonDemo2').click(function () {
var fullName = $('#fullName').val();
$.ajax({
type: 'GET',
url: '/product/demo2/' + fullName,
success: function (result) {
$('#result2').html(result);
}
});
});
$('#buttonDemo3').click(function () {
$.ajax({
type: 'GET',
url: '/product/demo3',
success: function (result) {
var s = 'Id: ' + result.id;
s += '<br>Name: ' + result.name;
s += '<br>Price: ' + result.price;
$('#result3').html(s);
}
});
});
$('#buttonDemo4').click(function () {
$.ajax({
type: 'GET',
url: '/product/demo4',
success: function (result) {
var s = '';
for (var i = 0; i < result.length; i++) {
s += '<br>Id: ' + result[i].id;
s += '<br>Name: ' + result[i].name;
s += '<br>Price: ' + result[i].price;
s += '<br>------------------';
}
$('#result4').html(s);
}
});
});
$('#buttonDemo5').click(function () {
var nome = $('#nome').val();
$.ajax({
type: 'POST',
url: '/product/demo5' + nome,
success: function (result) {
$('#result5').html(result);
},
error(result) {
alert(result);
}
});
});
});
My HTML<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<fieldset>
<legend>Demo 1</legend>
<input type="button" value="Demo 1" id="buttonDemo1" />
<br />
<span id="result1"></span>
</fieldset>
<fieldset>
<legend>Demo 2</legend>
Full Name <input type="text" id="fullName" />
<input type="button" value="Demo 2" id="buttonDemo2" />
<br />
<span id="result2"></span>
</fieldset>
<fieldset>
<legend>Demo 3</legend>
<input type="button" value="Demo 3" id="buttonDemo3" />
<br />
<span id="result3"></span>
</fieldset>
<fieldset>
<legend>Demo 4</legend>
<input type="button" value="Demo 4" id="buttonDemo4" />
<br />
<span id="result4"></span>
</fieldset>
<fieldset>
<legend>Demo 5</legend>
<form method="post" asp-controller="Product" asp-action="Demo5">
Nome <input type="text" id="nome" />
<input type="button" value="Demo 5" id="buttonDemo5" />
<br />
<span id="result5"></span>
</form>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</body>
</html>My Controller
[Route("product")]
public class ProductController : Controller
{
[Route("")]
[Route("index")]
[Route("~/")]
public IActionResult Index()
{
return View();
}
[Route("demo1")]
public IActionResult Demo1()
{
return new JsonResult("Hello");
}
[Route("demo2/{fullName}")]
public IActionResult Demo2(string fullName)
{
return new JsonResult("Hello " + fullName);
}
[Route("demo3")]
public IActionResult Demo3()
{
var product = new Product
{
Id = "p01",
Name = "name 1",
Price = 123
};
return new JsonResult(product);
}
[Route("demo4")]
public IActionResult Demo4()
{
var products = new List<Product>()
{
new Product() {
Id = "p01",
Name = "name 1",
Price = 123
},
new Product() {
Id = "p02",
Name = "name 2",
Price = 456
},
new Product() {
Id = "p03",
Name = "name 3",
Price = 789
}
};
return new JsonResult(products);
}
[Route("demo5")]
public IActionResult Demo5(string nome)
{
string name = nome;
return new JsonResult(name);
}
}
this is the site of stackoverlow in Portuguese language, translate your question
– Ricardo Pontual