Tukukkk

I spent already long hours on the issue and I can not understand why my jquery ajax post does not work with SurveyController.cs:

[HttpPost]

        public ActionResult AddComment(Survey survey)

        {

            if (survey == null)

            {

                return NotFound();

            }

            if (survey != null)

            {

                survey.Time = DateTime.Now;

                _context.Surveys.Add(survey);

                _context.SaveChanges();

            }

            return null;

        }

Ajax:

const queryParams = `Name=${this.state.surveyState.name}&Change=${this.state.surveyState.change}&Opinion=${this.state.surveyState.opinion}`;

                    $.ajax({

                        type: 'POST',

                        url: "/Survey/AddComment",

                        data: queryParams,

                        contentType: "application/json; charset=utf-8",

                        dataType: "html"

                    });

Routung from Startup.cs:

app.UseMvc(routes => {

                routes.MapRoute(name: "Error", template: "Error",

                defaults: new { controller = "Error", action = "Error" });

                routes.MapRoute(

                name: "default", template: "{controller}/{action}/{id?}",

                defaults: new { controller = "MyProjects", action = "Index" });

            });

It gives me no errors in the console, but does not hit any breakpoints in the controller.

It works only when I use [Route("comments/new")] in my controller and url: "/comments/new/AddComment", in my Ajax.

I need to use [HttpPost] for the controller to be able to use [ValidateAntiForgeryToken], I think so. But anyway, my Ajax and Controller are according to most of the popular examples for Ajax post that I could find here, and I have no idea why it doeas not work.

EDIT:

I tryed achieve the same with Fetch call:

const queryParams = `Name=${this.state.surveyState.name}&Change=${this.state.surveyState.change}&Opinion=${this.state.surveyState.opinion}`;

                    fetch(`/comments/new?`,

                        {

                            method: 'POST',

                            body: JSON.stringify({ queryParams }), // data can be `string` or {object}!

                            headers: { 'Content-Type': 'application/json' },

                            credentials: 'include'

                        }

                    )

                        .then(res => res.json())

                        .then(res => {

                            console.log(res);

                        })

                        .catch(error => {

                            console.error(error);

                        });

With the same result.
What I noticed, in XHR in console logs, call type is GET not POST, same for AJAX call. Why?

UPDATE:

Because of some reason, when change
fetch(/comments/new?
to
fetch(/Survey/AddComment

XHR gives me still the same call URL:
http://localhost:58256/comments/new?Name=aaa&Change=aaa&Opinion=good

Whatever I wite over there, it does not change!!!(?).

UPDATE:

After removing [Route("comments/new")] and leaving fetch("/Survey/AddComment" there is no call at all.

UPDATE

After clearing whole browser's data, and using:
controller:

[HttpPost]

        public IActionResult AddComment([FromBody]Survey survey)

        {

            if (survey == null)

            {

                return BadRequest();

            }

            survey.Time = DateTime.Now;

            _context.Surveys.Add(survey);

            _context.SaveChanges();



            return Ok();

        }

Fetch:

const data = { 

                        Name: this.state.surveyState.name,

                        Change: this.state.surveyState.change,

                        Opinion: this.state.surveyState.opinion

                    };

                    fetch("/Survey/AddComment",

                        {

                            method: 'POST',

                            body: JSON.stringify({ data}), // data can be `string` or {object}!

                            headers: { 'Content-Type': 'application/json' },

                            credentials: 'include'

                        }

                    )

                        .then(res => res.json())

                        .then(res => {

                            console.log(res);

                        })

                        .catch(error => {

                            console.error(error);

                        });

I am still getting XHR log for call URL:
http://localhost:58256/comments/new?Name=aa&Change=aaa&Opinion=good
Why?

Client side says it is sending application/json, But

const queryParams = `Name=${this.state.surveyState.name}&Change=${this.state.surveyState.change}&Opinion=${this.state.surveyState.opinion}`;

Is not JSON. Looks more like data you would send in a query string.

Construct a valid JSON payload

const data = { 

    Name: ${this.state.surveyState.name},

    Change: ${this.state.surveyState.change},

    Opinion: ${this.state.surveyState.opinion}

};

And send it in the correct format to the server

    $.ajax({

        type: 'POST',

        url: "/Survey/AddComment",

        data: JSON.stringify(data),

        contentType: "application/json; charset=utf-8",

        dataType: "json"

    });

Finally, let the Server action know to expect the data in the body of the request by using [FromBody]

[HttpPost]

public IActionResult AddComment([FromBody]Survey survey) {

    if (survey == null) {

        return BadRequest();

    }

    survey.Time = DateTime.Now;

    _context.Surveys.Add(survey);

    _context.SaveChanges();



    return Ok();

}

The line

name: "default", template: "{controller}/{action}/{id?}",

means that the path /Survey/AddComment will call the Action

SurveyController.AddComment()

The id marked with "?" is optional ({id?}).

If you want to define the route in the Controller you can do something like the following.

[Route("[controller]/[action]")]

public class SurveyController : Controller {



    [HttpPost]

    public ActionResult AddComment(Survey survey)

    {

        survey.Time = DateTime.Now;

        _context.Surveys.Add(survey);

        _context.SaveChanges();

        return Content("Added");

    }

}

In both cases you have to mark the Action with [HttpPost] if you send a POST request.