Combining API controller calls and controller calls in same MVC 6 controller

Question

I am just starting with MVC 6 having previously created separate controllers for API calls and standard controller calls. In MVC 6 there is no more APIController class and those actions can be included in your Controller class.

So here I have a TeamsController. I have an action to return the view :

[Route("Teams")] 
public ActionResult Teams()

And then I have actions to return data :

//GET : api/Teams
[Route("api/Teams")]
[HttpGet("GetAllTeams")]
public IEnumerable<Team> GetAllTeams()

//GET : api/Teams/5
[Route("api/Teams/{teamId:int}")]
[HttpGet("{teamId:int}", Name = "GetTeamById")]
public IActionResult GetTeamById(int teamId)

//GET : api/Teams/Chicago Bears
[Route("api/Teams/{teamName}")]
[HttpGet("{teamName}", Name = "GetTeamByName")]
public IActionResult GetTeamByName(string teamName)

//POST : api/Teams
[Route("api/Teams/{team}")]
[HttpPost("{team}", Name = "AddTeam")]
public void AddTeam([FromBody]Team item)

//PUT: api/Teams
[Route("api/Teams/{team}")]
[HttpPut("{team}", Name = "EditTeam")]
public void EditTeam([FromBody]Team item)

//DELETE : api/Teams/4
[Route("api/Teams/{teamId:int}")]
[HttpDelete("{teamId:int}", Name="DeleteTeam")]
public IActionResult DeleteTeam(int id)

I am not sure if I have these correctly configured, as for example when I make a post in Javascript the GET is called instead of the POST and when I call the Delete method instead GetByTeamId gets called.

Can someone please give advice on how these routes should be best set up?

EDIT : Here is the Javascript post :

var tAdd = new team(self.Id(), self.TeamName(), self.Logo());

                    var dataObjectAdd = ko.toJSON(tAdd);

                    $.ajax({
                        url: 'http://lovelyjubblymvc6.azurewebsites.net/api/Teams',
                        type: 'post',
                        data: dataObjectAdd,
                        contentType: 'application/json',
                        success: function (data) {
                            self.teams.push(new team(data.TeamId, data.TeamName, data.Logo));
                            self.TeamName('');
                            self.Logo('');
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });

Answer 1

You are almost there.

The AddTeam() method as in your code snippet expects a GET request, so that explains probably why the POST you mentioned didn't work. But you would like to have this method to respond to a POST request and not to a GET request since it alters data. GET requests are usually done with URL query parameters and it's a little dangerous to alter data this way. The method signature should be like:

[Route("api/Teams/{team}")]
[HttpGet("{team}", Name = "AddTeam")]
public void AddTeam([FromBody]Team item)

And don't forget if you want to call the EditTeam() or DeleteTeam() you have to send a PUT or DELETE request respectively