CODEWITHSUNDEEP
javascriptc#razor
Quang Tran
Quang Tran

Reputation: 93

Passing Object from JavaScript to C#

Good Evening, Right now I have a project with back-end written in C#. I am trying to connect it to front-end JavaScript code. the method inside my js file:

var people = [{name: "Sam", age: 40}, {name: "Vivian", age: 20}]    
foo = function () {
            var url = "/api/folder/foo";
            $http({
                method: 'GET', url: url, params: {
                    version: "7.1",
                    ppl: people  <---- the passing that causes error
                }
            }).success(function (data, status, header, config) {
                console.log("success!");
            }).error(function (data, status, header, config) {
                alert("server error");
            });
        };

That is calling C# code:

    [HttpPost]
    [ActionName("foo")]
    public List<LoopItem> foo(String version, List<Person> ppl){
        System.Diagnostics.Debug.WriteLine("Success!");
        return repository.foo( version, ppl);
    }

As you can see, my C# code takes as a parameter a string and List of Person, which is a simple object:

public class Person
{
    public String name { get; set; }
    public Int32 age { get; set; }
}

Although in my js code I tried to mimic the C# class Person, and created a list of objects with the same keys, the C# function does not seem to recognize the passed list of objects as list of Person from some reason. As the result, none of the debug "success" gets printed. Does anyone know how to solve this problem?

Upvotes: 2

Views: 14234

Answers (2)

Muhammad Faizan
Muhammad Faizan

Reputation: 913

Use JSON encoding/decoding. 

var people = [{name: "Sam", age: 40}, {name: "Vivian", age: 20}]    
foo = function () {
            var myJsonPeople = JSON.stringify(people);
            var url = "/api/folder/foo";
            $http({
                method: 'POST', url: url, params: {
                    version: "7.1",
                    ppl: myJsonPeople <---- the passing that causes error
                }
            }).success(function (data, status, header, config) {
                console.log("success!");
            }).error(function (data, status, header, config) {
                alert("server error");
            });
        };

On server side you will need to receive this data as json and then convert it to objects list.

[HttpPost]
public string foo(string jsonList)
{
     //Convert string to JSON object
     //Foreach loop for conversion to objects
}

Upvotes: 4

ryanyuyu
ryanyuyu

Reputation: 6486

It looks like your C# controller is expecting a POST request (from the [HttpPost] attribute) instead of a GET request. You'll need to change your javascript request accordingly.

That looks like angular's $http service. So this should work:

var url = "/api/folder/foo";
var params = {
                   version: "7.1",
                   ppl: people  
             };
$http.post(url, params)
    .success( //etc

This uses $http.post, which is a shortcut to making a POST request.

Upvotes: 0

Related Questions