Ajax Post: ASP.NET MVC action is receiving empty object

问题

I have this form:

@model CupCakeUI.Models.CupCakeEditViewModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "createFrm" }))
{
    <div class="form-group">
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            <input  type="text" id="Name" name="Name" value="@Model.Name" />
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model)
        </div>
        <div class="editor-field">
            <input type="text" id="Price" name="Price" value="@Model.Price" />
        </div>
        <div class="col-md-offset-2 col-md-10">
            <input type="button" id="btnCreate" value="Create" class="btn btn-default" />
        </div>
    </div>
}

I am trying to use ajax post to send data to the Action Method, however its always receiving empty object. I have done that several times in the past, and now i tried different ways which not working, The code:

$(document).ready(function () {
    $("#btnCreate").click(function () {
        var name = $("#Name").val();
        var price = $("#Price").val();
        var cupCakeEditModel = { "CupCakeId": 0, "Name": name, "Price": price };
        var json = JSON.stringify(cupCakeEditModel);
        $.ajax({
            type: 'POST',
            url: "/CupCake/Create",
            data: JSON.stringify(cupCakeEditModel),
            contentType: 'application/json',
            success: function () {
                alert("succes");
            },
            error: function () {
                alert("error");
            }
        });
    })
})

Its showing this in the console when logging:

This is the Action Method and Class used:

[HttpPost]
public JsonResult Create (CupCakeUI.Models.CupCakeEditViewModel cupCakeEditModel)
{
    var cupCake =  
    CupCakeData.Save(cupCakeEditModel);
    return Json("cupCake", 
    JsonRequestBehavior.AllowGet);
 }

This the class:

public class CupCakeEditViewModel
{
    public int CupCakeId;
    [Display(Name = "CupCake Name")]
    public string Name;
    public string Price;
}

I have also used this, but not working:

$("#btnCreate").click(function () {
    var cupCakeEditModel = 
    $("#createFrm").serialize();
    $.ajax({
        url: "/CupCake/Create",
        type: "POST",
        data: cupCakeEditModel,
        success: function (response) {
            alert("Success");
        },
        error: function (response) {
        }
    });
})

And several answers i found on the forum, but it seems something weird!

回答1:

You model contains only fields, and the DefaultModelBinder does not bind fields, only properties. Change the model to

public class CupCakeEditViewModel
{
    public int CupCakeId { get; set; }
    [Display(Name = "CupCake Name")]
    public string Name { get; set; }
    public string Price { get; set; }
}

来源：https://stackoverflow.com/questions/38811237/ajax-post-asp-net-mvc-action-is-receiving-empty-object