C# jQuery.serialize（）问题

当序列化表单以发回控制器方法时，我遇到了一个奇怪的问题。传递的某些字段为null（对于字符串或可为null的值）或零（对于数值）。例如，使用此简单配置：

视图模型：

public class HomeViewModel
{
    public int FakeId { get; set; }
    public string StringDataValue { get; set; }
    public int IntegerDataValue { get; set; }

    public HomeViewModel() { }

    public HomeViewModel(int fakeId)
    {
        FakeId = fakeId;
        StringDataValue = "This is some string data";
        IntegerDataValue = 42;
    }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        HomeViewModel viewModel = new HomeViewModel(15);
        return View(viewModel);
    }

    [HttpPost]
    public JsonResult PostData(HomeViewModel model)
    {
        return JsonResult
        {
            Data = new
            {
                FakeId = model.FakeId,
                StringData = model.StringDataValue,
                IntegerData = model.IntegerDataValue
            }
        };
    }
}

@model WebApplication1.Models.HomeViewModel

@{
    ViewBag.Title = "Home Page";
}

@using(Html.BeginForm())
{
    @Html.HiddenFor(m => m.FakeId)
    <div>
        Fake ID: @Html.DisplayFor(m => m.FakeId)
    </div>
    <div>
        String Data: @Html.TextBoxFor(m => m.StringDataValue)
    </div>
    <div>
        Integer Data: @Html.TextBoxFor(m => m.IntegerDataValue)
    </div>
    <button id="btnPost">Post</button>
}

@section scripts
{
    <script type="text/javascript">
        $(function () {
            $("#btnPost").on("click", function (e) {
                e.preventDefault();
                var model = $("form").serialize();
                console.log(model);
                $.post("PostData", JSON.stringify(model))
                    .success(function (d) {
                        console.log(d);
                    })
                    .error(function () {
                        console.log("error");
                    })
            })
        })
    </script>
}

控制器：

public class HomeViewModel
{
    public int FakeId { get; set; }
    public string StringDataValue { get; set; }
    public int IntegerDataValue { get; set; }

    public HomeViewModel() { }

    public HomeViewModel(int fakeId)
    {
        FakeId = fakeId;
        StringDataValue = "This is some string data";
        IntegerDataValue = 42;
    }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        HomeViewModel viewModel = new HomeViewModel(15);
        return View(viewModel);
    }

    [HttpPost]
    public JsonResult PostData(HomeViewModel model)
    {
        return JsonResult
        {
            Data = new
            {
                FakeId = model.FakeId,
                StringData = model.StringDataValue,
                IntegerData = model.IntegerDataValue
            }
        };
    }
}

@model WebApplication1.Models.HomeViewModel

@{
    ViewBag.Title = "Home Page";
}

@using(Html.BeginForm())
{
    @Html.HiddenFor(m => m.FakeId)
    <div>
        Fake ID: @Html.DisplayFor(m => m.FakeId)
    </div>
    <div>
        String Data: @Html.TextBoxFor(m => m.StringDataValue)
    </div>
    <div>
        Integer Data: @Html.TextBoxFor(m => m.IntegerDataValue)
    </div>
    <button id="btnPost">Post</button>
}

@section scripts
{
    <script type="text/javascript">
        $(function () {
            $("#btnPost").on("click", function (e) {
                e.preventDefault();
                var model = $("form").serialize();
                console.log(model);
                $.post("PostData", JSON.stringify(model))
                    .success(function (d) {
                        console.log(d);
                    })
                    .error(function () {
                        console.log("error");
                    })
            })
        })
    </script>
}

查看：

public class HomeViewModel
{
    public int FakeId { get; set; }
    public string StringDataValue { get; set; }
    public int IntegerDataValue { get; set; }

    public HomeViewModel() { }

    public HomeViewModel(int fakeId)
    {
        FakeId = fakeId;
        StringDataValue = "This is some string data";
        IntegerDataValue = 42;
    }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        HomeViewModel viewModel = new HomeViewModel(15);
        return View(viewModel);
    }

    [HttpPost]
    public JsonResult PostData(HomeViewModel model)
    {
        return JsonResult
        {
            Data = new
            {
                FakeId = model.FakeId,
                StringData = model.StringDataValue,
                IntegerData = model.IntegerDataValue
            }
        };
    }
}

@model WebApplication1.Models.HomeViewModel

@{
    ViewBag.Title = "Home Page";
}

@using(Html.BeginForm())
{
    @Html.HiddenFor(m => m.FakeId)
    <div>
        Fake ID: @Html.DisplayFor(m => m.FakeId)
    </div>
    <div>
        String Data: @Html.TextBoxFor(m => m.StringDataValue)
    </div>
    <div>
        Integer Data: @Html.TextBoxFor(m => m.IntegerDataValue)
    </div>
    <button id="btnPost">Post</button>
}

@section scripts
{
    <script type="text/javascript">
        $(function () {
            $("#btnPost").on("click", function (e) {
                e.preventDefault();
                var model = $("form").serialize();
                console.log(model);
                $.post("PostData", JSON.stringify(model))
                    .success(function (d) {
                        console.log(d);
                    })
                    .error(function () {
                        console.log("error");
                    })
            })
        })
    </script>
}

@model WebApplication1.Models.HomeViewModel
@{
ViewBag.Title=“主页”；
}
@使用（Html.BeginForm（））
{
@Html.HiddenFor（m=>m.FakeId）
假ID:@Html.DisplayFor（m=>m.FakeId）
字符串数据：@Html.TextBoxFor（m=>m.StringDataValue）
整数数据：@Html.TextBoxFor（m=>m.IntegerDataValue）
邮递
}
@节脚本
{
$（函数（）{
$（“#btnPost”）。在（“单击”，函数（e）{
e、 预防默认值（）；
var model=$（“form”）.serialize（）；
console.log（模型）；
$.post（“PostData”，JSON.stringify（model））
.成功（功能（d）{
控制台日志（d）；
})
.错误（函数（）{
控制台日志（“错误”）；
})
})
})
}

如果单击Post按钮，我将获得两行

console.log（）

的输出：

console.log（模型）：

FakeId=15&StringDataValue=This+is+some+string+data&IntegerDataValue=42

控制台日志（d）：

Object{FakeId:0，StringData:“这是一些字符串数据”，IntegerData:0}

正如您所看到的，只有StringDataValue实际到达控制器。但是，如果我在Model.FakeId的隐藏字段正上方的视图中添加

@Html.Hidden（“dummy”）

，则会得到以下输出：

console.log（型号）：

dummy=&FakeId=15&StringDataValue=This+is+some+string+data&IntegerDataValue=42

控制台日志（d）：

Object{FakeId:15，StringData:“这是一些字符串数据”，IntegerData:0}

这稍微好一点，但是IntegerDataValue仍然没有到达控制器。但是，如果我在视图中显示Model.IntegerDataValue之后添加

@Html.Hidden（“dummy2”）

，我会得到以下输出：

console.log（型号）：

dummy=&FakeId=15&StringDataValue=This+is+some+string+data&IntegerDataValue=42&dummy2=

控制台日志（d）：

Object{FakeId:15，StringData:“这是一些字符串数据”，IntegerData:42}

现在，所有视图模型值都被正确地传递给控制器。我只是不明白为什么我必须把虚拟字段放进去才能实现它。我花了很长时间才弄明白为什么控制器方法中的数据不完整，直到我意识到发生了什么

---

只是我吗？其他人可以复制这种行为吗？我遗漏了什么吗？

拿出JSON.stringify并尝试一下。大概是

 <script type="text/javascript">
        $(function () {
            $("#btnPost").click(function(e) {
                e.preventDefault();
                var model = $("form").serialize();
                console.log(model);
                $.post("Home/PostData", model)
                    .success(function(d) {
                        console.log(d);
                    })
                    .error(function() {
                        console.log("error");
                    });
            });
        });
    </script>

$（函数（）{
$（“#btnPost”）。单击（函数（e）{
e、 预防默认值（）；
var model=$（“form”）.serialize（）；
console.log（模型）；
$.post（“主页/PostData”，型号）
.成功（功能（d）{
控制台日志（d）；
})
.错误（函数（）{
控制台日志（“错误”）；
});
});
});

非常感谢您！这绝对是一个“哦！”的时刻，因为我甚至没有考虑到我不需要调用JSON.stringify（）。非常感谢！非常欢迎！谢谢你给了我第一个投票的答案。