locked
how i can pass complex json object view to controller in ASP.net MVC RRS feed

  • Question

  • User300230481 posted

    Consider i have following classes on my project model

    namespace ListItemChk.Models
    {
        public class Book
        {
            public int BookID { get; set; }
            public string BookName { get; set; }
            public string Publisher { get; set; }
            
        }
    }

    public class Author
        {
            public int AuthorID { get; set; }
            public string AuthorName { get; set; }
            public List<Book> Books { get; set; }// List of Books
        }

    --------------------------------------
    I have a view from where i want to pass an Author object which contains list of books object.

    In my view i have used jQuery Post to send json data. I have used following method for posting data
    <script type="text/javascript">  
        function jsonPost() {
            
            var _books = [
                   { "BookID": 1, "BookName": "Computer Science", "Publisher": "Hasibul" }
                 , { "BookID": 2, "BookName": "Math", "Publisher": "Robin" }
                 , { "BookID": 3, "BookName": "Science Science", "Publisher": "Rubel"}];
                       
    
            oAuthor = {
                "AuthorID": 1, "AuthorName": "Ruhan",
                "Books":"ss"
            };
    
            oAuthor.Books = _books;
    
            $.post("/book/Create", oAuthor, function (data) {
                alert(data.toString());
            });
         }
    </script>

    and i have following controller

    [HttpPost]
            public ActionResult Create(Author oAuthor)
            {
                // my action 
                return View("Index");
            }


    When I post data from view then i will get Author data but not Books data. oAuthor.Books shows counter 3 but when i debug it, it shows BookID = null, BookName = null.
    From controller i get only oAuthor data not List data. How i can get List of data and also oAuthor data??

    What is the standard way of posting such types of data?

    Please help me.












    Wednesday, June 29, 2011 2:39 AM

Answers

  • User-1659704165 posted

    Below i sample which I have used Once for Purpose

    Javascript


    <script src="../../Scripts/json2.js" type="text/javascript"></script>

    <button  onclick="PostData()"></button>

    <script type="text/javascript">
        var data = [{ "firstName": "Danny", "lastName": "LaRusso", "phones": [{ "type": "Mobile", "number": "(555) 121-2121" }, { "type": "Home", "number": "(555) 123-4567"}] }, { "firstName": "Sensei", "lastName": "Miyagi", "phones": [{ "type": "Mobile", "number": "(555) 121-7777" }, { "type": "Home", "number": "(555) 121-9999"}]}];


        function PostData() {

            alert(JSON.stringify(data));
           
           
           
            $.ajax({
                url: '/DefaultHome/CollectData',
                data: JSON.stringify(data),
                type: 'POST',
                contentType: 'application/json;',
                dataType: 'json',
                success: function (result) {
                    //  alert(result.ItemList[0].Str);
                }
            });
       
        }

    </script>

    and In action you have To care of

    //Controller

      public ActionResult CollectData(List<Person> person)

    Cs Class


    public class Person
        {
            public string firstName { get; set; }
            public string lastName { get; set; }
            public List<Phone> phones { get; set; }
        }

    public class Phone
        {
            public string type { get; set; }
            public string number { get; set; }
        }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2011 4:07 AM
  • User-1210061641 posted

    Hi Hasibul,

    If i use ajax post then it works if i use jQuery post then it is not working. can you say why

    You need to specify the dataType for Jquery.Post, look at here: http://api.jquery.com/jQuery.post/

    What is the proper way for manupulating list data.

    Html table is used just for display data, user cant edit/input the cell value, so I don't know why you want to post these data to server, except that you add input fields into the table cells. I suggest you can try to use some jquery grid puly in, which allow you to edit/update grid, for example: JqGrid.

    If I want to post addition parameter(which is not in my Entity) from view to controller then how i can post it?

    Look at this site: http://api.jquery.com/jQuery.ajax/ and http://api.jquery.com/jQuery.post/

    Hope this helpful,
    Forest Cheng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 1, 2011 4:51 AM

All replies

  • User-1659704165 posted

    Below i sample which I have used Once for Purpose

    Javascript


    <script src="../../Scripts/json2.js" type="text/javascript"></script>

    <button  onclick="PostData()"></button>

    <script type="text/javascript">
        var data = [{ "firstName": "Danny", "lastName": "LaRusso", "phones": [{ "type": "Mobile", "number": "(555) 121-2121" }, { "type": "Home", "number": "(555) 123-4567"}] }, { "firstName": "Sensei", "lastName": "Miyagi", "phones": [{ "type": "Mobile", "number": "(555) 121-7777" }, { "type": "Home", "number": "(555) 121-9999"}]}];


        function PostData() {

            alert(JSON.stringify(data));
           
           
           
            $.ajax({
                url: '/DefaultHome/CollectData',
                data: JSON.stringify(data),
                type: 'POST',
                contentType: 'application/json;',
                dataType: 'json',
                success: function (result) {
                    //  alert(result.ItemList[0].Str);
                }
            });
       
        }

    </script>

    and In action you have To care of

    //Controller

      public ActionResult CollectData(List<Person> person)

    Cs Class


    public class Person
        {
            public string firstName { get; set; }
            public string lastName { get; set; }
            public List<Phone> phones { get; set; }
        }

    public class Phone
        {
            public string type { get; set; }
            public string number { get; set; }
        }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 29, 2011 4:07 AM
  • User-1620313041 posted

    You have to insert the whole list of books as the value of the Books field, this means copying it as it is and placing it after Books:

    Wednesday, June 29, 2011 4:35 AM
  • User300230481 posted

    Thank you very much. It works. If i use ajax post then it works if i use jQuery post then it is not working. can you say why? here is my jquery post

     $.post("/book/Create", oAuthor, function (data) {
                alert(data.toString());
            });

    What is the proper way for manupulating list data.

    >> using html table. Then read every cell value >> then create a json then post??

    >> use html table with hidden text field & named according to model; then use label for showing data. hidden text field name for posting data.

    >> or any idea from you.

    I have another question

    If I want to post addition parameter(which is not in my Entity) from view to controller then how i can post it?

    Wednesday, June 29, 2011 6:01 AM
  • User-1210061641 posted

    Hi Hasibul,

    If i use ajax post then it works if i use jQuery post then it is not working. can you say why

    You need to specify the dataType for Jquery.Post, look at here: http://api.jquery.com/jQuery.post/

    What is the proper way for manupulating list data.

    Html table is used just for display data, user cant edit/input the cell value, so I don't know why you want to post these data to server, except that you add input fields into the table cells. I suggest you can try to use some jquery grid puly in, which allow you to edit/update grid, for example: JqGrid.

    If I want to post addition parameter(which is not in my Entity) from view to controller then how i can post it?

    Look at this site: http://api.jquery.com/jQuery.ajax/ and http://api.jquery.com/jQuery.post/

    Hope this helpful,
    Forest Cheng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 1, 2011 4:51 AM