How to pass json from view to controller using $.Ajax method?

Question

I want to receive json object from view to controller using $.ajax method but i dont know why the receive object in controller shows null data.

here is my code.

$("#Save").click(function (e) {

       $.ajax({ url: "Home/Save",
        type: "POST",
        datatype:'json',                
        data: ({movies:movies})
      });
});

where movies is javascript array which contains

    ({
    Name:"DDLJ",Stars:"SRK",Director:"Yashraj",Year:"2012"
    }, {Name:"K3G",Stars:"SRK",Director:"Karan",Year:"2010"}
)

and my controller code is:

public string Save (List<MovieDB> movies)
        {
         return "";
        }

where MovieDB is my model class which have the properties

public class MoviesDB   
    {
        //public int MoviesID { get; set; }
        public string Name { get; set; }
        public string Stars { get; set; }
        public string Director { get; set; }
        public DateTime Year { get; set; }
    }

Please suggest me any better way to receive json data from view to controller.

Actully I try to send javascript array object from view to controller action method in which my array code is

<script type="text/javascript">
    var cnt = 1;
        var cnt2 = 1;
        var i;
        var movies = [];

    movies.push({ Name: $("#txtMovieName").val(), Stars: $("#txtStarCasts").val(), Director: $("#txtDirector").val(), Year: $("#txtYear").val(), Index: cnt++ });

                    $("#modelTable").empty();

                    $("#modelTemplate").tmpl(movies).appendTo($("#modelTable"));

                    $("#txtMovieName").val("");
                    $("#txtStarCasts").val("");
                    $("#txtDirector").val("");
                    $("#txtYear").val("");
                    $("#txtMovieName").focus();
                    e.preventDefault();
            });

  $("#Save").click(function (e) {

            //var jm = $.toJSON(movies);
            $.ajax({ url: "Home/Save",
                type: "POST",

                data: ({movies:movies})
                // contentType: 'application/json; charset=utf-8'
             });
        });

    </script>

Now I want to send that movies javascript array object to Save() Action method of controller using any way like json or other please suggest me something...

Answer 1

 List<xyztype> lstid = new JavaScriptSerializer().Deserialize<List<xyztype>>(IDlist);

is working for me

here xyztype is my collection class type and IDlist is my json objectstring from view to controller action method

by using javascriptserializer().deserializer<> we can convert json string to our custom or system datatype object

for example :

  List<string> lstid = new JavaScriptSerializer().Deserialize<List<string>>(IDlist);

Answer 2

Maybe this is a better answer, if you want to get your data into your controller after a post.

//For going to your view.
public ActionResult Create()
{
    MoviesDB model = new MoviesDB();
    return View("Create", model);
}


[HttpPost]
public ActionResult Create(MoviesDB model)
{
    if (ModelState.IsValid)
    {
        //Here you can use your model param 
        //with the filled in values of your view.

        return RedirectToAction("Index"); 
        //when everything works fine, go to this view.
    }
    else
    {
        return RedirectToAction("Index"); 
        //when there is a problem, go to this view.
    }

    return View("Index");
}

You don't need jQuery to use your data from your view.

Answer 3

This is not a correct json. You can check this on JSONLint

Here is the correct json:

[
    {
        "Name": "DDLJ",
        "Stars": "SRK",
        "Director": "Yashraj",
        "Year": "2012"
    },
    {
        "Name": "K3G",
        "Stars": "SRK",
        "Director": "Karan",
        "Year": "2010"
    }
]

If there are still errors, let me know.