ASP.NET MVC Controller метод получения пустого объекта из jQuery

Question

У меня есть скрипт jQuery, который записывает форму в объект и должен отправить этот объект в метод контроллера. Вот сценарий:

var modalConfirm = function (callback) {
$("#modal-btn-si").on("click", function () {
    callback(true);
    $("#modal-confirm").modal('hide');
});
$("#modal-btn-no").on("click", function () {
    callback(false);
    $("#modal-confirm").modal('hide');
});};

function confirmar(form, text) {
$("#modal-confirm").modal('show');
modalConfirm(function (confirm) {
    if (confirm) {
        enviar(form);
    }
}); };

function enviar(form) {
debugger;
var datos = $('#' + form).serializeArray(),
    dataObj = {};
$(datos).each(function (i, field) {
    dataObj[field.name] = field.value;
});
if (typeof dataObj["precio"] === "undefined") { dataObj["precio"] = 0; }
$.post("NuevaOpcion", {
    contentType: "application/JSON",
    data: JSON.stringify(dataObj),
}); }

Примечание: изначально скрипт был намного проще, но попытка исправить проблему, которую я описал, вынудила меня разделить код на функции, которые вы видите.

Я создал модель для получения данных формы:

public class NuevaOpcionFormModel {

    public NuevaOpcionFormModel() { }

    public int Id { get; set; }
    public string nombre { get; set; }
    public int cantidad { get; set; }
    public int precio { get; set; }
    public int idrespuesta { get; set; }
    public int OptionSelectedItem { get; set; }
}

И подпись метода контроллера:

[HttpPost]
    public ActionResult NuevaOpcion (Dayvo.Presupuestador.Web.Models.Form.NuevaOpcionFormModel nuevaOpcion) { ... }

Что я пробовал

По сценарию:

• .serialize() вместо .serializeArray().
• Не сериализовать вообще.
• Передача всей «формы» в объект, а затем в контроллер.
• JSON.stringify (фактическое состояние) и не используется.
• Стабилизация каждого поля в data вручную.
• Стабилизация каждого поля в data вручную и применение JSON.stringify.

На контроллере:

• [FromForm] & [FromBody]
• [Bind]
• Одна переменная для каждого поля, совпадающая с именами и типами.

Все, что я пробовал, заканчивается тем, что метод контроллера ничего не получает. Я отслеживал сценарий (вот почему вы видите в нем точку останова debugger;), он правильно помещает объект в массив, каждое поле имеет правильное значение:

Но все равно попадает в контроллер с пустым объектом:

Любая подсказка о том, что я делаю неправильно, более чем приветствуется. Заранее спасибо.

EDIT

По запросу, вот часть представления, которую я записываю в форму:

<div class="panel-footer">
            @using (Html.BeginForm("NuevaOpcion", "Home", FormMethod.Post, new { @id = "frm_nueva_opcion" })) {
                @Html.HiddenFor(m => m.Id)
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group" style="margin-bottom: .7em;margin-top: .7em;">
                            <button class="btn btn-success btn-xs" type="button" onclick=" $('#row-nueva-opcion').toggle()" id="add-opcion">
                                <span class="glyphicon glyphicon-plus-sign"></span> A&ntilde;adir nueva opci&oacute;n
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row" id="row-nueva-opcion" style="display:none">
                    <div class="col-md-10">

                        <label>
                            <input type="checkbox" id="opcion-extra" onclick=" $('#nuevo-precio').attr('disabled', !this.checked);" />
                            Es opci&oacute;n extra
                        </label>
                        <div class="input-group" style="margin-bottom:1.7em;">
                            <input type="text" placeholder="Opción" class="form-control" name="nombre" style="max-width:70%;">
                            <input type="number" placeholder="Cantidad" min="1" value="1" class="form-control" name="cantidad" style="max-width:15%;">
                            <input type="number" placeholder="Precio" class="form-control" id="nuevo-precio" name="precio" style="max-width:15%;" disabled>
                            <input type="hidden" name="idrespuesta"  id="idrespuesta" value="@listItems.Select(x=>x.Value).FirstOrDefault()" />
                            <div class="input-group-addon">&euro;</div>
                            <span class="input-group-btn">
                                <a class="btn btn-primary" data-title="Confirmación de acción" data-toggle="modal" data-target="#modal_confirm" onclick="confirmar('frm_nueva_opcion')">
                                    <span class="glyphicon glyphicon-floppy-disk"></span> Guardar
                                </a>
                            </span>
                        </div>

                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            <label>
                                ¿Para que pregunta es la opción?
                                @Html.DropDownList("OptionSelectedItem", listItems, new { @class = "form-control" })
                            </label>
                        </div>
                    </div>
                </div>
            }
        </div>

Answer 1

Метод jquery $.post() отправляет данные, используя значение по умолчанию contentType='application/x-www-form-urlencoded; charset=UTF-8', где данные должны быть PlainObject .

Чтобы DefaultModelBinder связывался с вашей моделью, пары имя / значение объекта должны соответствовать свойствам модели, поэтому формат должен быть

var data = { Id: someValue, nombre: anotherValue, .... };

Чтобы сгенерировать этот объект, либо сгенерируйте его вручную, либо лучше, используйте метод .serialize() (не .serializeArray()) для правильной сериализации всех элементов управления формы. Измените сценарий на

function enviar(form) {
    var data = $('#' + form).serialize();
    $.post("NuevaOpcion", data, function(response) {
        ... // code to execute when the response is returned
    });

Обратите внимание, что неясно, что вы ожидаете от кода if (typeof dataObj["precio"] === "undefined") { dataObj["precio"] = 0; }, но это не нужно и может быть опущено - ваше свойство precio равно int, и оно будет иметь значение 0, если оно не включены в запрос.

Я также настоятельно рекомендую использовать методы HtmlHelper для строгой привязки к вашей модели и обеспечить добавление правильных атрибутов name, value и data-val-* для двусторонней привязки модели и проверки на стороне клиента. .