带有淘汰赛 js 的 ASP.NET CORE 2.1 我没有收到模型中的数据？答案

【问题标题】：ASP.NET CORE 2.1 with knockout js I don't receive the data in the model?带有淘汰赛 js 的 ASP.NET CORE 2.1 我没有收到模型中的数据？
【发布时间】：2020-05-06 16:58:36
【问题描述】：

我是 ASP.NET CORE 的新手，我正在从淘汰赛 js 发送绑定数据，但我的控制器中没有收到它，如下图所示，

我不知道为什么我通过knockout js发送的模型没有得到，一开始我遇到了问题，因为JSON格式的数据输出是camelCase，但是我使用以下命令解决了它通过将其添加到 STARTUP，

services.AddMvc (). AddJsonOptions ( options =>
                 options.SerializerSettings.ContractResolver = new DefaultContractResolver ()
             );

执行该命令已经为我提供了 PascalCase 中的数据输出，但我有一个带有 bindadas 属性的表单，它不会将数据发送到控制器，这是我的表单代码，

<div id="divCreateGenders" data-bind="visible: IsNew">
    <form id="FormCreateGenders" method="post">
        <div class="form-horizontal" data-bind="with: GenderModel">
            <h3><strong>Crear Nuevo</strong></h3>
            <br />
            <div class="form-group">
                <label class="control-label col-md-2"><strong>Codigo:</strong></label>
                <div class="col-md-4">
                    <input id="TextboxGenderId" name="TextboxGenderId" type="text" class="form-control" data-bind="value: GenderId" maxlength="1" placeholder="Por ejemplo, I" required />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-2"><strong>Genero:</strong></label>
                <div class="col-md-4">
                    <input id="TextboxGenderName" name="TextboxGenderName" type="text" class="form-control" data-bind="value: GenderName" maxlength="15" placeholder="Introduzca un genero..." required />
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <button class="btn btn-success" data-bind="click: $parent.Create">Crear</button>
                </div>
            </div>
        </div>
    </form>
</div>

这是我的 javascript 代码，

// 模型功能性别模型（）{ var 性别模型 = 这个；

genderModel.GenderId = ko.observable();
genderModel.GenderName = ko.observable();
genderModel.CreateBy = ko.observable();
genderModel.CreationDate = ko.observable();
genderModel.ModifiedBy = ko.observable();
genderModel.ModifiedDate = ko.observable();

}

// 视图模型功能性别视图模型（）{ var genderViewModel = this;

//Variables publicas//

genderViewModel.GenderModel = ko.observable(new genderModel());
genderViewModel.Genders = ko.observableArray();
genderViewModel.IsNew = ko.observable(false);
genderViewModel.IsBackToListButton = ko.observable(false);
genderViewModel.IsEdit = ko.observable(false);
genderViewModel.IsNewButton = ko.observable(true);
genderViewModel.IsDetails = ko.observable(false);
genderViewModel.ShowResult = ko.observable(true);
//Metodos Publicos//

genderViewModel.New = function () {
    genderViewModel.IsNew(true);
    genderViewModel.IsBackToListButton(true);
    genderViewModel.IsNewButton(false);
    genderViewModel.IsEdit(false);
    genderViewModel.IsDetails(false);
    genderViewModel.ShowResult(false);
    genderViewModel.Genders.removeAll();
    genderViewModel.GenderModel().GenderId(undefined);
    genderViewModel.GenderModel().GenderName(undefined);
    genderViewModel.GenderModel().CreateBy(undefined);
    genderViewModel.GenderModel().CreationDate(undefined);
    genderViewModel.GenderModel().ModifiedBy(undefined);
    genderViewModel.GenderModel().ModifiedDate(undefined);
    $('#TextboxGenderId').focus();

};

genderViewModel.Delete = function (model) {
    swal({
        title: "Esta seguro?",
        text: "Que desea eliminar este genero?",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Si",
        cancelButtonText: "Cancelar",
        closeOnConfirm: false,
        closeOnCancel: false
    },
        function (isConfirm) {
            if (isConfirm) {
                $.ajax({
                    url: '/AdminGenders/Delete',
                    data: ko.toJSON(model),
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    success: function (data) {
                        if (data.Success) {
                            genderViewModel.LoadAll();
                            swal("Eliminado!", "Se ha elimanado el genero satisfactoriamente", "success");
                        }
                        else {
                            swal("Error eliminando el genero!", data.Data, "error")
                        }
                    }
                });

            } else {
                swal("Cancelado!", "El genero no ha sido elimanado", "error");
            }
        });
};

genderViewModel.Details = function (model) {
    genderViewModel.IsNew(false);
    genderViewModel.IsNewButton(false);
    genderViewModel.IsBackToListButton(true);
    genderViewModel.IsDetails(true);
    genderViewModel.ShowResult(false);
    genderViewModel.GenderModel().GenderId(model.GenderId);
    genderViewModel.GenderModel().GenderName(model.GenderName);
    genderViewModel.GenderModel().CreateBy(model.CreateBy);
    genderViewModel.GenderModel().CreationDate(model.CreationDate);
    genderViewModel.GenderModel().ModifiedBy(model.ModifiedBy);
    genderViewModel.GenderModel().ModifiedDate(model.ModifiedDate);

    $.ajax({
        url: '/AdminGenders/Detail',
        data: ko.toJSON(model),
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        async: true,
        success: function (data) {
            if (data.Success) {
            }
            else {
                alert(data.Data);
            }
        },
        error: function (ex) {
            swal("Error mostrando el genero!", "Ha ocurrido un error mientras se mostrando el genero!", "error")
        }
    });

};

genderViewModel.Edit = function (model) {
    genderViewModel.IsNewButton(false);
    genderViewModel.IsBackToListButton(true);
    genderViewModel.ShowResult(false);
    genderViewModel.IsDetails(false);
    genderViewModel.IsNew(false);
    genderViewModel.IsEdit(true);
    genderViewModel.GenderModel().GenderId(model.GenderId);
    genderViewModel.GenderModel().GenderName(model.GenderName);
    genderViewModel.GenderModel().CreateBy(model.CreateBy);
    genderViewModel.GenderModel().CreationDate(model.CreationDate);
    genderViewModel.GenderModel().ModifiedBy(model.ModifiedBy);
    genderViewModel.GenderModel().ModifiedDate(model.ModifiedDate);
    $('#TextboxGenderId').focus();
};

genderViewModel.Create = function () {
    if (genderViewModel.IsNew()) {
        $.ajax({
            url: '/AdminGenders/Create',
            data: ko.toJSON(genderViewModel.GenderModel()),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data) {
                if (data.Success) {
                    $('#TextboxGenderId').val('');
                    $('#TextboxGenderName').val('');
                    $('#TextboxGenderId').focus();
                    swal("Genero creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el genero!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};


genderViewModel.Update = function (model) {
    if (genderViewModel.IsEdit()) {
        $.ajax({
            url: '/AdminGenders/Update',
            data: ko.toJSON(model),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data) {
                if (data.Success) {
                    genderViewModel.BackToList();
                    swal("Genero actualizado!", "Se ha modificado correctamente!", "success")
                }
                else {
                    swal("Error actualizando el genero!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};


genderViewModel.BackToList = function () {
    genderViewModel.IsNew(false);
    genderViewModel.IsBackToListButton(false);
    genderViewModel.IsEdit(false);
    genderViewModel.IsDetails(false);
    genderViewModel.IsNewButton(true);
    genderViewModel.ShowResult(true);
    genderViewModel.LoadAll();

};

genderViewModel.LoadAll = function () {
    LoadListGenders();
};


// Metodos Privados //
var LoadListGenders = function () {
    $.ajax({
        url: '/AdminGenders/GetGender',
        data: null,
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        async: true,
        success: function (data) {
            if (data.Success) {
                genderViewModel.Genders.removeAll();
                genderViewModel.Genders(data.Data);
            }
            else {
                alert(data.Data);
            }
        },
        error: function (ex) {
            alert('Ocurrión un error, cargando los generos.');
        }
    });

};

}

jQuery(function () {
    var genderViewModel = new GenderViewModel();
    genderViewModel.LoadAll();
    ko.applyBindings(genderViewModel);
});

我不知道为什么它不起作用，因为我在 ASP.NET MVC5 中工作的代码相同，但我正在迁移到 ASP.NET CORE 并且遇到了这个问题，我将不胜感激

【问题讨论】：

能否请您显示完整的 javascript 代码？我没有看到您如何将genderModel() 与GenderViewModel() 连接起来。
另外，您的服务器控制器是否使用[ApiController] 注释？似乎您的服务器在您发送JSON 时需要application/x-www-form-urlencoded 的有效负载？
@itminus genderviewmodel 我正在对我正在使用的这个模型做同样的事情，所以就是这个，除了我手动将数据插入数据库，如果我加载数据，它不是因为我没有将模型发送到我的控制器，因为我在 asp.net mvc 5 中有相同的代码并且它运行良好我不知道为什么它不适合我
如果您不想向我们展示完整的 javascript 代码，请在浏览器中按 F12 并向我们展示发送到服务器的有效负载 :) 以及向我们展示控制器类。正如我上面所说，您的服务器似乎需要一个form-urlencoded 有效负载而不是 JSON。
@itminus 编辑我的代码，把我正在使用的所有 javascript 代码放入

标签： javascript jquery ajax asp.net-core knockout.js

【解决方案1】：

我的最佳猜测是，您的服务器需要 form 有效负载，而您的 javascript 客户端发送的有效负载为 JSON。

由于你的js发送的是JSON，如果你的控制器没有[ApiController]属性，请添加[FromBody]属性，以便modelbinder知道绑定源：

// 假设你的控制器不是 ApiController public async Task Create([FromBody]Gender 性别) { 如果（模型状态。IsValid）{ // ... 模型绑定成功 } 别的{ // ... } }

或者，如果您的控制器是 ApiController，请使用 [ApiController]：

[ApiController] [Route("/AdminGenders")] 公共类 AdminGendersController : ControllerBase { 公共异步任务创建（性别性别） { ... } }

请注意，在 ASP.NET Core 中，带有 [ApiController] 注释的控制器与普通控制器不同。如果您的控制器有一个[ApiController]，则默认情况下操作方法需要一个 JSON 正文。否则，它需要一个表单。

【讨论】：