Question

我的jQuery / HTML：

@using(Html.BeginForm("Create", "Home", FormMethod.Post)) {

    <input name="ImageName" id="ImageName" type="hidden" />
    <input name="XPos" id="XPos" type="hidden" />
    <input name="YPos" id="YPos" type="hidden" />
    <input name="Height" id="Height" type="hidden" />
    <input name="Width" id="Width" type="hidden" /> 

    <button id="submit" value="submit">Create it!</button>
}


$('form').submit(function () {

    var parameters = [];
    parameters.push({
        ImageName: $('#imagename').val(),
        XPos: $('#xpos').val(),
        YPos: $('#ypos').val(),
        Height: $('#height').val(),
        Width: $('#width').val()
    });

    console.log(JSON.stringify(parameters));

    $.ajax({
        url: '@Url.Action("Create", "Home")',
        type: 'Post',
        data: JSON.stringify(parameters),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (result) {
            //yadda
        },
        error: function (xhr, status, error) {
          //yadda
        }
    });

这是我的ViewModel：

public class Image{

    public string ImageName { get; set; }
    public double Xpos { get; set; }
    public double Ypos { get; set; }
    public double Height{ get; set; }
    public double Width { get; set; }
}

这是我的控制器。

这就是JSON.stringify（参数）的样子：

[{"ImageName":"https://domain.com/test.jpg","XPos":"347.98614501953125","YPos":"435.45140838623047","Height":"20","Width":"80.39999999999999"}] 


    [HttpPost]
    public JsonResult Create(Image i) {
         //p always has null values
    }

为什么我的ViewModel总是包含空值？

Answer 1

我认为您的错误是您正在使用数组。试试这样。

var parameters = {
    ImageName: $('#imagename').val(),
    XPos: $('#xpos').val(),
    YPos: $('#ypos').val(),
    Height: $('#height').val(),
    Width: $('#width').val()
};

或者将输入参数更改为

public JsonResult Create(IEnumerable<Image> i)

Answer 2

这是一个对象的Javascript数组。这与您方法的签名不符。

[
  {
    "ImageName":"https://domain.com/test.jpg",
    "XPos":"347.98614501953125",
    "YPos":"435.45140838623047",
    "Height":"20",
    "Width":"80.39999999999999"
  }
]

我会开始使用你正在使用的框架的一些内置功能来完成繁重的工作。

在您的观点中：

@Html.HiddenFor(m => m.ImageName);

在Jquery中：

$('form').submit(function () {

    var serializedForm = $(this).serialize();

    console.log(serializedForm );

    $.ajax({
        url: '@Url.Action("Create", "Home")',
        type: 'Post',
        data: serializedForm ,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (result) {
            //yadda
        },
        error: function (xhr, status, error) {
          //yadda
        }
    });

使用.ajax发布到MVC 4控制器时，ViewModel始终为null

2 个答案: