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

时间:2015-11-15 03:29:20

标签: c# jquery ajax asp.net-mvc asp.net-mvc-4

我正在尝试将复杂数据类型发布到MVC控制器操作,但数据为null或包含默认值。

以下是客户端(它将type参数设置为data.complexType [例如,type: data.complexType]并将其发布):

enter image description here

以下是POST操作的问题:

enter image description here

它从GET中得到的复杂类型很好,但我现在怎样才能将相同的复杂类型POST回控制器,使其不再包含null或默认值?

这是我的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; }
    }
}

这是我的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>

修改:我尝试直接设置data: data.complexType,但它无法解析嵌套类型:

enter image description here

2 个答案:

答案 0 :(得分:2)

您可以使用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;
    }
});

答案 1 :(得分:0)

这是另一种方法。大多数情况下,我们必须使用不同控件中的值来填充这些类型。这种方法可以很自由地用这些类型做你想做的事情。

<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>