时间戳

首页 > 解决方案 > ASP.NET CORE 2.1 with knockout js 我没有收到模型中的数据？

javascript - ASP.NET CORE 2.1 with knockout js 我没有收到模型中的数据？

问题描述

我是 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代码，

// 模型函数 genderModel() { var genderModel = this;

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

}

// ViewModel 函数 GenderViewModel() { 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 并且我遇到了这个问题，我将不胜感激

标签： javascriptjqueryajaxasp.net-coreknockout.js

解决方案

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

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

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

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

[API控制器]
[Route("/AdminGenders")]
公共类 AdminGendersController : ControllerBase
{
    公共异步任务<JsonResult> 创建（性别性别）
    {
        ...
    }
}

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

推荐阅读