How do I post array to MVC controller action by JQuery in JSON format

Question

0.00/5 (No votes)

See more:

Hi Everyone,

I have some variables in a javascript program. The variables are as follow :

C#

var name = "Kishan";
var marks = 76;
var subjects = new Array();
subjects[0] = new Array("S1","S2", "S3");
subjects[1] = new Array("S4","S5", "S6");

I have a model class in C#

C#

public class Student
{
   public string Name {get; set;}
   public double Marks {get; set;}
   public List<string[]> Subjects {get; set;}
}

I have an action method in MVC 4 controller class

C#

[HttpPost]
public ActionResult(Student model)
{
  return View();
}

I have written the code in jquery to post the data from view to action

C#

var source = {
                'Name': name,
                'Marks': marks,
                'Subjects': subjects
            }

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/Admin/Create",
                data: source,
                success: function (data) {
                    alert("Record added successfully.");
                },
                error: function (error) {
                    jsonValue = jQuery.parseJSON(error.responseText);
                    alert("Error : " + jsonValue);
                }
            });

Now the problem is that I can see data in name and marks variables but the array (subjects) in showing null.

I have to pass this array to controller.

Please help.

Thanks in advanced :)

Posted 4-Jun-14 23:57pm

Kishan Gupta

Updated 14-Sep-19 17:10pm

Sampath Lokuge

v2

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Murali Vijay · Answer 1 · 2014-06-05T20:52:00

C#

var name = "Kishan";
var marks = 76;
var employees = [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" }



  var data1= [{ "fname": "Danny", "lname": "LaRusso", "phones":employees}];
            $.ajax({
        url:'@Url.Action("test", "controller")',
            data: JSON.stringify(data1),
            type: 'POST',
            contentType: 'application/json;',
            dataType: 'json',
            success: function (result) {
                //  alert(result.ItemList[0].Str);
            }
        });



In model 
public class Person
    {
        public string fname{ get; set; }
        public string lname{ get; set; }
        public List<phone> phones { get; set; }
    }

    public class Phone
    {
        public string firstName { get; set; }
        public string lastName { get; set; }
    }

and then controller

 public ActionResult test(List<person> person)
        {
           
            //return Json(data,JsonRequestBehavior.AllowGet);
            return View(person);
        }

it should work fine.
tell if it is not work</person></phone>

Murali Vijay · Answer 2 · 2014-06-05T01:27:00

Solution 1

You need to set traditional:true in ajax settings

like this
$.ajax({
//Stuff...
traditional:true
});

Posted 5-Jun-14 1:27am

Murali Vijay

Comments

Kishan Gupta 5-Jun-14 7:43am

Thanks for reply. but it's not working, it's making all data null.

Murali Vijay 5-Jun-14 7:58am

$.ajax({
//Stuff...
traditional:true,
data: JSON.stringify({ data: values }

});

In controller

public ActionResult test(List<string> data)
{

//return Json(data,JsonRequestBehavior.AllowGet);
return View(data);
}

try this

Murali Vijay 5-Jun-14 8:12am

Also, don't forget to stringify your json before sending it.

mostafaToloo · Answer 3 · 2019-09-14T17:11:00

var name = "Kishan";
var marks = 76;
var subjects = [{"13456"} , {"789465"}}

  var data= { "Name": name , "Marks": marks , "Subjects":subjects};
  $.ajax({
        url: "/Student/SaveStudent",
        data: JSON.stringify(data),
        type: 'POST',
        contentType: 'application/json;',
        dataType: 'json',
        success: function (result) {
           console.log(result);
         }
        });
// ViewModel
public class Student
{
   public string Name {get; set;}
   public double Marks {get; set;}
   public List<string[]> Subjects {get; set;}
}
// Student Controler
[HttpPost]
 public ActionResult SaveStudent(Student student)
{           
   return Json(student),JsonRequestBehavior.AllowGet);
}

How do I post array to MVC controller action by JQuery in JSON format

3 solutions

Solution 2

Solution 1

Solution 6

Add your solution here

Preview 0