how to send multiple parameters from view to api controller in mvc4

Question

I have multiple parameters which I have to pass to api controller.

What I was doing is

In my javascript

            var routeInfo = JSON.stringify(routes);
            var colors = JSON.stringify(colorsArray);
            var times = JSON.stringify(mytimeArray);
            var distances = JSON.stringify(myDistancArray);
            var dir = $("#Direction").val();

          var fullString = routeInfo + ";" + colors + ";" + times + ";" + distances+";"+dir;

            $.post("api/HomeToSchool/?route=" + fullString,
                function (data) {
                    if (data = true) {
                        alert("Routes Saved Successfully");
                    }
                    else if (data = false) {
                        alert("Routes are not saved");
                    }
                });

& in my Controller

public bool PostHomeToSchoolRoutes([FromUri]string route)
        {
// my logic
}

Here I am just getting values of "routeInfo" & other values are not comming. e.g.

var routeInfo =  [["Børge,Brogade  38, 4100, Ringsted,09:25:00,55.43953, 11.79043","Grete,Sjællandsgade  27, 4100, Ringsted,09:25:00,55.44024, 11.78852","Else,Fynsgade  14, 4100, Ringsted,09:25:00,55.44128, 11.78595","Birthe,Eksercerpladsen  47, 4100, Ringsted,09:25:00,55.44954, 11.80309","Knud Lavard Centret, Eksercerpladsen 3,  4100,  Ringsted,370,55.45014, 11.80474"]]

                var colors = ["#886A52"]
                var times =  [7.97]
                var distances = [3.36]
                var dir = 0

What I get in my Controller is

[["Børge,Brogade  38, 4100, Ringsted,09:25:00,55.43953, 11.79043","Grete,Sjællandsgade  27, 4100, Ringsted,09:25:00,55.44024, 11.78852","Else,Fynsgade  14, 4100, Ringsted,09:25:00,55.44128, 11.78595","Birthe,Eksercerpladsen  47, 4100, Ringsted,09:25:00,55.44954, 11.80309","Knud Lavard Centret, Eksercerpladsen 3,  4100,  Ringsted,370,55.45014, 11.80474"]];["

Other values are not coming. Whats wrong I am doing here.

HomeToSchool is controller name & PostHomeToSchoolRoutes is method in that controller. — vaibhav shah
– vaibhav shah, Commented Apr 27, 2013 at 13:04
Did not notice that we should not use JSON.stringify in this case but let jquery serialize the parameters for us. There are 3 things to check: do not use JSON.stringify, add "traditional:true", and ensure that the "routes" javascript array is 1-dimensional. Check out my updated answer below (tested) — Khanh TO
– Khanh TO, Commented Apr 28, 2013 at 1:51

Khanh TO · Accepted Answer · 2013-04-28 01:34:39Z

2

I'm afraid that your url is too long (>255 characters), You can try this.

$.ajax({
     type: 'POST',
     url:"api/HomeToSchool",
     data:{routeInfo:routes,colors:colorsArray,times:mytimeArray,distances:myDistancArray,dir:dir},
     dataType: "json",
     traditional:true,
     function (data) {
                        if (data = true) {
                            alert("Routes Saved Successfully");
                        }
                        else if (data = false) {
                            alert("Routes are not saved");
                        }
                    }
});

and your controller:

public bool PostHomeToSchoolRoutes(string[] routeInfo,string[] colors,double[] times,double[] distances,int dir)
        {
// my logic
}

I see that you're using 2-dimensional array for routeInfo. But there is only 1 item, i think you should change it to 1-dimensional array to make it compatible with the controller code string[] routeInfo

edited Apr 28, 2013 at 1:34

answered Apr 27, 2013 at 12:43

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

2 Comments

Khanh TO Over a year ago

I just updated my answer regarding your 2-dimentional array routeInfo

Khanh TO Over a year ago

try updating the datatypes of times, distances, dir to your correct datatypes. See my updated answer.

James · Accepted Answer · 2013-04-30 10:22:20Z

2

Far too much information going into the URL here, not only that your not correctly appending the parameters together they need to be separated using & not ;.

On top of that, your not really taking advantage of the MVC capabilities here. At the client side you want to send up your information as a collective object rather than individual parameters e.g.

var schoolRoutes = {
    routes: routes,
    colors: colorsArray,
    times: mytimeArray,
    distances: myDistanceArray,
    direction: $("#Direction").val()
};

$.ajax({
    type: 'POST'
    url: "api/HomeToSchoolRoutes",
    data: JSON.stringify(schoolRoutes),
    dataType: "json",
    success: function (data) {
        if (data = true) {
            alert("Routes Saved Successfully");
        }
        else if (data = false) {
            alert("Routes are not saved");
        }
});

Then at the server side, introduce a class which will be able to bind to the incoming data aka a ViewModel

public class RouteInfoViewModel
{
    ...
}

public class SchoolRoutesViewModel
{
    public RouteInfoViewModel[] Routes { get; set; }
    public string[] Colours { get; set; }
    public double[] Times { get; set; }
    public double[] Distances { get; set; }
    public string Direction { get; set; }
}

Then update your action to expect this particular ViewModel and that should give you access to all the information posted.

public bool PostHomeToSchoolRoutes(SchoolRoutesViewModel schoolRoutes)
{
    ...
}

edited Apr 30, 2013 at 10:22

answered Apr 27, 2013 at 12:50

James

82.4k19 gold badges172 silver badges245 bronze badges

2 Comments

vaibhav shah Over a year ago

Then at the server side, introduce a class which will be able to bind to the incoming data aka a ViewModel , Didnt understood this line .

James Over a year ago

With MVC parameters can be automatically mapped to a class as long as it contains the relevant properties. So define a class and give it properties which you expect to receive from the client & make that the parameter of the action. I have given an example

Collectives™ on Stack Overflow

how to send multiple parameters from view to api controller in mvc4

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related