我怎样才能将这种复杂类型的AJAX POST到我的MVC动作中？

Question

I am trying to POST a complex data type up to an MVC controller action, but the data is null or it contains default values.

Here is the client side (it sets the type parameter to data.complexType [for example, type: data.complexType ] and posts it up):

Here is the problem, on the POST action:

It gets the complex type just fine from the GET, but how can I now make it POST the same complex type back to the controller such that it no longer contains null or default values?

Here is my HomeController.cs :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApplication0.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult PostComplexType(ComplexType type)
        {
            return Json(new { complexType = type });
        }

        public ActionResult GetComplexType()
        {
            var result = new ComplexType
            {
                TypeOne = 1,
                TypeTwo = "2",
                TypeThree = new ComplexNestedType
                {
                    TypeOne = 1,
                    TypeTwo = "2"
                }
            };
            return Json(new { complexType = result }, JsonRequestBehavior.AllowGet);
        }
    }

    public class ComplexType
    {
        public Int32 TypeOne { get; set; }
        public String TypeTwo { get; set; }
        public ComplexNestedType TypeThree { get; set; }
    }

    public class ComplexNestedType
    {
        public Int32 TypeOne { get; set; }
        public String TypeTwo { get; set; }
    }
}

This is my Index.cshtml :

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts {
    <script>
        $("#exampleButton").click(function () {
            $.ajax({
                url: "@Url.Action("GetComplexType", "Home")",
                type: "get",
                error: function () {
                    alert("There was an error calling GetComplexType().")
                },
                success: function (data) {
                    debugger;
                    $.ajax({
                        url: "@Url.Action("PostComplexType", "Home")",
                        type: "post",
                        data: {
                            type: data.complexType
                        },
                        error: function () {
                            alert("There was an error calling PostComplexType().")
                        },
                        success: function (data) {
                            debugger;
                        }
                    });
                }
            });
        });
    </script>
}
<button id="exampleButton" type="button">Example</button>

Edit : I tried setting data: data.complexType directly, but it won't resolve the nested type:

Answer 1

you can use JSON.stringify

$.ajax({
    url: "@Url.Action("PostComplexType", "Home")",
    type: "post",
    data: JSON.stringify(data.complexType),
    contentType: "application/json; charset=UTF-8",
    error: function () {
         alert("There was an error calling PostComplexType().")
    },
    success: function (data) {
       debugger;
    }
});

Answer 2

Here is another method. Most of the times we have to populate these types using values in different controls. This method gives a lot of freedom to do what you want to do with these types.

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var complexNestedType = {TypeOne:1, TypeTwo:'2'}
        var complexType = { TypeOne: 3, TypeTwo: '4', TypeThree: complexNestedType };
        var data = { type: complexType };
        var posting = $.post("/Home/PostComplexType", data, function () {
        });
        posting.done(function (response) {
            console.log(response);
            if (response != null) {
                alert('success');
            } else{
                alert('failed');
            }
        });
    });
</script>