Pass array of information from angular to asp net controller that takes in model object

Question

I'm getting an array returned from an API call. The array looks something like this https://i.sstatic.net/l7SYW.png.

I get the array, then call my controller method using this

this.http.post<Maps[]>(this.baseUrl + "api/Map/InsertMap/", beatmaps[0]).subscribe();

Maps being an interface

interface Maps {
Id: number;
Name: string;
Artist: string;
Creator: string;
}

Now I just have a basic insert controller method

        [Route("api/[controller]/InsertMap/")]
    [HttpPost("[action]")]
    public async Task<IActionResult> AsyncCreateMap(MapModel model)
    {
        await _mapService.AsyncInsert(model);

        return Ok();
    }

It takes in the Model as a parameter and then inserts it using Entity Framework. It doesn't work. I have no idea how to actually transfer the array I get to an object I can use in my controller.

Here is my whole controller class

    [Route("api/[controller]")]
public class MapController : Controller
{
    private readonly MapService _mapService;

    public MapController(MapService mapService)
    {
        _mapService = mapService;
    }

    [Route("api/[controller]/Maps")]
    [HttpGet("[action]")]
    public async Task<IActionResult> AsyncMaps()
    {
        var data = await _mapService.AsyncGetMaps(0, 10);

        return Ok(data);
    }


    [HttpPost]
    public async Task<IActionResult> AsyncCreateMap([FromBody]MapModel model)
    {
        await _mapService.AsyncInsert(model);

        return Ok();
    }
}

What doesn't work? Exception? model is null? Controller is not hit? Something else? — Crowcoder
– Crowcoder, Commented Dec 26, 2018 at 21:18
I get this error: POST https://localhost:44311/api/Map/InsertMap/ 404 But it can't be 404 as I have defined it. @Crowcoder — TimmyNeutron
– TimmyNeutron, Commented Dec 26, 2018 at 21:32
Sorry to break it to you, but it can be because it is. I suggest for testing you remove the Route attribute and see if you can hit it with the default route. — Crowcoder
– Crowcoder, Commented Dec 26, 2018 at 21:35
Could be related to mixing routes, why do you have [action] on HttpPost? and also Route? — Crowcoder
– Crowcoder, Commented Dec 26, 2018 at 21:39
I've done as you said, changed it around and the same problem still occurs. POST https://localhost:44311/api/Map/AsyncCreateMap/ 404. I've updated the OP with my controller class. — TimmyNeutron
– TimmyNeutron, Commented Dec 26, 2018 at 21:43

Rolando · Accepted Answer · 2018-12-26 20:57:41Z

1

you should try use [FromBody].

Example:

public class ModelDTO
{
    public string Id{get; set;}
    public List<string> Childs {get; set;}
}


[HttpPost]
[Route("api/nice/Save")]
public bool Save([FromBody] ModelDTO model)
{ ...

in the angular side, you should use httpClient.post..

save(data: IData): Observable<ISaveCompleted> {
    const options = this.createPostOptions();
    const saveCompleted = this.http
    .post(options.url, data, options)
    .map((res: Response) => <ISaveCompleted>res.json());
    return saveCompleted;
 }

answered Dec 26, 2018 at 20:57

Rolando

7621 gold badge15 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass array of information from angular to asp net controller that takes in model object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related