Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

Question

Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

I am facing a challenge in sending a complex object from Angular to my web API. Here is how the object looks:

{
    Name: "test",
    Tax: 23,
    Addresses: [ {
        country: "ro",
        city: "bucharest"
    },
    {
        country: "fr",
        city "paris"
    }]}

On the server side, I have a model that looks like this:

public class Model {
    public Model (){
        Addresses = new List<Address>();
    }

    public string Name {get; set;}
    public int Tax {get; set;}
    public List<Address> Addresses {get; set;}
}

The Address class has 2 string properties.

In my previous application using MVC5 and AngularJS $http service, the object mapping worked perfectly. However, after transitioning to MVC6 (ASP.NET 5), I am facing an issue where the object on the server side is NULL when I include the array in my JavaScript object. If I remove the array, it works fine. How can I send an array as an object property from AngularJS using $resource service to an MVC6 controller?

javascript c#asp.net angularjs asp.net-mvc

Answer 1

Answer №1

Success! After some trial and error, I finally got my code to work. Here's an example of what I did:

test1.html

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script type="text/javascript" src="test1.js"></script>
    <div ng-controller="TestController">
        <div>Test</div>
    </div>
</body>
</html>

test1.js

var myApp = angular.module('myApp', []);

myApp.controller('TestController', ['$scope', '$http', function ($scope, $http) {
    var dataObj = {
        Name: "test",
        Tax: 23,
        Addresses: [{
            country: "ro",
            city: "bucharest"
        },
        {
            country: "fr",
            city: "paris"
        }]
    }
    $http({
        url: 'http://localhost:1522/api/values',
        method: 'POST',
        data: JSON.stringify(dataObj),
        dataType: 'json'
    }).success(function (data) {
        debugger;
        alert("OK");
        //TODO.....
    }).error(function (data) {
        //TODO....
    });
}]);

Check out the screenshot below to see my folder structure and a breakpoint after the POST request:

https://i.sstatic.net/cb93q.png

Don't forget to replace the URLs with your domain and navigate to in your browser to run your Angular app.

P.S.: This example only works when your Angular app and web API are on the same domain. If you need to separate them (e.g., move the Angular app to a different domain or project), you'll need to configure CORS - check out this helpful guide on enabling cross-origin requests (CORS) in ASP.NET 5 & MVC 6.

Answer 2

Success! After some trial and error, I finally got my code to work. Here's an example of what I did:

test1.html

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
    <script type="text/javascript" src="test1.js"></script>
    <div ng-controller="TestController">
        <div>Test</div>
    </div>
</body>
</html>

test1.js

var myApp = angular.module('myApp', []);

myApp.controller('TestController', ['$scope', '$http', function ($scope, $http) {
    var dataObj = {
        Name: "test",
        Tax: 23,
        Addresses: [{
            country: "ro",
            city: "bucharest"
        },
        {
            country: "fr",
            city: "paris"
        }]
    }
    $http({
        url: 'http://localhost:1522/api/values',
        method: 'POST',
        data: JSON.stringify(dataObj),
        dataType: 'json'
    }).success(function (data) {
        debugger;
        alert("OK");
        //TODO.....
    }).error(function (data) {
        //TODO....
    });
}]);

Check out the screenshot below to see my folder structure and a breakpoint after the POST request:

https://i.sstatic.net/cb93q.png

Don't forget to replace the URLs with your domain and navigate to in your browser to run your Angular app.

P.S.: This example only works when your Angular app and web API are on the same domain. If you need to separate them (e.g., move the Angular app to a different domain or project), you'll need to configure CORS - check out this helpful guide on enabling cross-origin requests (CORS) in ASP.NET 5 & MVC 6.

Using ASP.NET MVC 6 Web API along with Angular, a resource can be posted as an object property in the

Answer №1

Similar questions

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Having issues installing Parcel through npm - Encountered an error while parsing package.json information

The function GetURLParameter(sParam) is displaying %20 as blank space in the webpage

Alternatives to AMP in AngularJS

Steps for displaying a loading image during the rendering of a drop-down list (but not during data loading):

Flask causing AJAX Request to encounter a CORS Policy issue

Add characters to div using JavaScript

Is there a way to prevent a user who is already logged in from accessing their account on a different browser or tab

Using VueJs to invoke a plugin from a .js file

Recoil: Executing a function when an atom is modified

Ways to update on the status of uploading a video on YouTube

Challenge with URL routing in ASP.NET MVC and Angular template design

Encountering an ASP.NET Boilerplate Angular Project Issue during npm start

Is User.Identity.Name an anonymous user with Windows authentication enabled?

SmartCollection in Meteor generating unpredictable outcomes

The code stored in Github differs from the code deployed on the production server

Managing various swipe interactions using HTML and JavaScript/jQuery

What is the best way to create a nullable object field in typescript?

Vue 3 - Compelled to utilize any data type with computedRef

Learn the steps for inserting or updating data in a local JSON file solely through JavaScript