Question

序列化表单以回发到控制器方法时，我遇到了一个奇怪的问题。传递的一些字段为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>
}

如果我点击“发布”按钮，我会得到两条console.log()行的输出：

console.log（型号）：
FakeId=15&StringDataValue=This+is+some+string+data&IntegerDataValue=42
的的console.log（d）：
Object {FakeId: 0, StringData: "This is some string data", IntegerData: 0}

正如您所看到的，只有 StringDataValue 实际上已将其发送给控制器。但是，如果我在Model.FakeId的隐藏字段上方的视图中添加@Html.Hidden("dummy")，那么我得到以下输出：

的console.log（模型）：
dummy=&FakeId=15&StringDataValue=This+is+some+string+data&IntegerDataValue=42
的的console.log（d）：
Object {FakeId: 15, StringData: "This is some string data", IntegerData: 0}

这稍微好一些，但 IntegerDataValue 仍然没有进入控制器。但是，如果我在视图中显示Model.IntegerDataValue之后的某处添加@Html.Hidden("dummy2")，我会得到以下输出：

的console.log（模型）：
dummy=&FakeId=15&StringDataValue=This+is+some+string+data&IntegerDataValue=42&dummy2=
的的console.log（d）：
Object {FakeId: 15, StringData: "This is some string data", IntegerData: 42}

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

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

Answer 1

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

jQuery .serialize（）问题

1 个答案: