Aspnetcore with Ajax method POST

Asked

Viewed 14 times

-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

1 answer

0

So, you guys, The question in English: "I created an aspnetcore example project with ajax-POST, but something is wrong. Where am I missing? What’s missing?"

Code was missing in js-Ajax. It will work as follows:

$('#buttonDemo5').click(function () {
    var nome = $('#nome').val();
    $.ajax({
        method: 'POST',
        url: '/product/demo5',
        data: { nome: nome},
        type: 'json',
        success: function (result) {
            $('#result5').html(result);
        },
        error(result) {
            alert(result);
        }

    });
});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.