Javascrpit AJAX: Problems with Get Method (using Web-Api Core)

Question

I have problems doing a simple ajax method and I have zero idea how to do it since most of my work was done by tutorials that don't explain the backend part of their app and don't have good examples.

I want to show a message from my backEnd and also want to put some text and show also a message with that text

I'm using html/css/javascript

HTML Part (Will be my UI)

        <template id="checkHello">
            <h3 class="hello">{{ hello }}</h3>
        </template>

        <template id="checkType">
            <h2>Type Something:</h2>
            <div id="Type_1">
                <input type="text" id="edit type" placeholder="Type here something" />
                <button id="type_s">Check</button>
                <h2 class="type">{{ type }}</h2>
            </div>
        </template>

    <!-- Here I have other code that works perfect-->
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="js/site.js" asp-append-version="true"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script> 

I also try something more simple but it didn't work

<div id="users_B">
        
    </div>

    <div id="users_C">
        <input type="text" id="type" placeholder="Type here something" />
        <button id="type_s">Check</button>
    </div>

<!-- Here I have other code that works perfect-->
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="js/site.js" asp-append-version="true"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.js"></script> 

Javascript (here i have a little trouble and maybe my problem is here (where? idk))

$(function b() {

    var $users_B = $('#users_B');
    var $users_C = $('#users_C');

    var $hello = JSON.stringify($('#hello'));
    var $type = JSON.stringify($('#type'));

    var myUser = $('#checkUser').html();
    var myHello = $('#checkHello').html();
    var myType = $('#checkType').html();
    
    function checkHello(arroz_1) {
        $users_A.append(Mustache.render(myHello, arroz_1));
    }

    function checkType(arroz_2) {
        $users_A.append(Mustache.render(myType, arroz_2));
    }
    
    //-------------Hello-----------------------
    //debugger;
    //Just Here gives me error 400 idk why, not makes sense at all
    $.ajax({
        contentType: 'application/json; charset=UTF-8',
        url: uri_hello,
        type: 'GET',
        dataType: 'json',
        beforeSend: function (request) {
            request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem("key"));
        },
        //this should return a simple string from de backEnd
        success: function (data1) {
            $.each(data1, function (i, arroz_1) {
                //checkHello(arroz_1);
                $users_B.append('<h3>' + arroz_1 + '</h3>');
            });
        },
        error: function (xhr, textStatus, errorThrown) {
            //gives me error but dont shows the error, shows something like this [Object: object]
            console.log('XHR:' + JSON.stringify(xhr) + '\nTextStatus:' + JSON.stringify(textStatus) + '\nErrorThrown:' + JSON.stringify(errorThrown));
        }
    });

    //-------------Type-----------------------
    //This is Now the Problem, thu button doesn't work at all idk why
    $users_C.delegate('.type_s', 'click', function () {

        $.ajax({
            contentType: 'application/json; charset=UTF-8',
            url: uri_Type,
            type: 'GET',
            dataType: 'json',
            beforeSend: function (request) {
                request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem("key"));
            },
            success: function (data2) {
                $.each(data2, function (i, arroz_2) {
                    //checkType(arroz_2);
                    $users_C.append('<h3>' + arroz_2 +'<p>' + $type + '</p></h3>');
                });
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log('XHR:' + JSON.stringify(xhr) + '\nTextStatus:' + textStatus + '\nErrorThrown:' + errorThrown);
            }
        });
    });
}

HttpGet Methods

[HttpGet("HelloWorld"), Authorize] //helloReply is a string         //null 
        public async Task<ActionResult<HelloReply>> Hello([FromQuery] Empty_2 empty_2)
        {
            var hello = await _greetClient.SayNormalHelloAsync(empty_2);

            return Ok(hello);
        }

        [HttpGet("TypeSomething"), Authorize]                       //string
        public async Task<ActionResult<HelloReply>> Type([FromQuery] HelloRequest empty_2)
        {
            var hello = await _greetClient.SayHelloAsync(empty_2);
  
            return Ok(hello);
        }

GreeterService.cs

public override Task<HelloReply> SayNormalHello(Empty_2 request, ServerCallContext context)
        {
            return Task.FromResult(new HelloReply
            {
                Message = "Good Morning User, I hope you have a Good Day" 
            });
        }

        public override Task<HelloReply> SayHello(HelloRequest request, ServerCallContext context)
        {
            return Task.FromResult(new HelloReply
            {
                Message = "You Type this:" + request.Name
            });
        }

This is what the User Need to See

So in the Message 1 will show the Greeter.cs message "Good Morning User, I hope you have a Good Day"

In the second message if I write the word "hello" in the input, and if I click on the button afterwards, the message that has to appear is this "You Type this:Hello"

So my question is: Whats is wrong with this? Is is the javascript Ajax Method? How to do it without destroying the part I have correct in HTML? Is there other way to do this without javascript and using the html file I have?

Any help is welcome.

Edit:

Now my problem is just in message 2, the old problem I need to change de [FromBody] to [FromQuery] and the url works fine. The first Message shows correct the string from the Greeter.cs, now my problem is getting data from that input and the button don''t work idk why.

Answer 1

I think your problem is in the Ajax call, I think url: uri_hello does not exists. The url should be probably something like this:

$.ajax({
            url: '@Html.Raw(Url.Action("SayNormalHello", "YourControllerName"))',
            dataType: "json",
            data: {
                request: '@YourData',
                context: YourContext
            },
            success: function(data) {
                //Do whatever you want with the data
            }
        });

Edit: I think the problem is with the delegate . Can you try $(#users_C).delegate('.type_s', 'click', function () {...} instead of what you have?

I think the problem is the selector, that jquery does not recognize $users_C , because you have to put it inside parenthesis and use the hashtag # .