Json 来自前端的数据未通过后端使用 Knockout 和 MVC 插入到数据库中

Question

我正在做一个项目，我使用 Knockout 和 MVC 将一些东西从本地存储保存到我的数据库中。我遇到的问题是我在控制器中指定的数据也需要发送到后端被插入但是我从前端提取的数据没有被插入。这是我的前端 api.js ：

 function Save(data){
        // var promise = appsecurity.postApiCall(root+'/Save', ko.toJSON(data));
        return appsecurity.putApiCall(root+'/Save', ko.toJSON(data));
    }

projectfile.js

         self.changeButtonText = function(){
         self.ProcurementbuttonText(!self.ProcurementbuttonText())
         self.ElementData = ko.observable(localStorage.getItem('ElementDataWidget'));
         self.scorecardIDLocalStorage = ko.observable(localStorage.getItem('scorecardId'));
         self.AllData = ko.observableArray([]);
         self.AllData.push(self.scorecardIDLocalStorage,self.ElementData);

         var JSONData = ko.toJSON(self.AllData);
         PreferentialProcurementDashboardApi.Save(JSONData);
         console.log((JSONData));


        }

正如您所看到的，我正在记录我的 JSONData 以确保我确实从本地存储中获取数据，以便在我的控制台中显示。这是我的后端代码

Controller.cs:

 [HttpPut]
    [Route("Save")]
    [ValidateModel]
    //[TrackActivity(section: "Dashboard", actionType: UserActivityActionType.Update, actionDescription: "Create/Update dashboard View Entry")]

    public IHttpActionResult Save(DashboardConfigEditViewModel dashboardConfigEditViewModel)
    {
        //var databaseDetails = _prefentialDashboardConfigService.GetById(dashboardConfigEditViewModel.DashboardId);
        //if (databaseDetails != null)
        //{
        //    return AccessDenied();
        //}

        //int id = SaveDashboardConfigEditViewModel(dashboardConfigEditViewModel);
        //return Ok(id);

        dashboardConfigEditViewModel.DateCreated = DateTime.Now;
        dashboardConfigEditViewModel.UserId = this.GetUserId();
        _prefentialDashboardConfigService.Create(PreferentialProcurmentConfigViewModelMapper.MapToDomain(dashboardConfigEditViewModel));
        return Ok();
    }

我的Mapper.cs:

 public static PrefentialDashboardConfig MapToDomain(DashboardConfigEditViewModel dashboardconfigeditviewmodel)
    {
        var config = new PrefentialDashboardConfig();
        config.DashboardId = dashboardconfigeditviewmodel.DashboardId;
        config.ScorecardId = dashboardconfigeditviewmodel.ScorecardId;
        config.UserId = dashboardconfigeditviewmodel.UserId;
        config.DateCreate = dashboardconfigeditviewmodel.DateCreated;
        config.DashboardConfig = dashboardconfigeditviewmodel.DashboardConfig;

        return config;
    }

我的Dto.cs:

 public class DashboardConfigEditViewModel
{

    //public DashboardConfigEditViewModel()
    //{

    //}

    public int DashboardId { get; set; }

    public Guid ScorecardId { get; set; }

    public Guid UserId { get; set; }

    public DateTime DateCreated { get; set; }

    public string DashboardConfig { get; set; }

}

这是我数据库中的字段：

Create Table [data].PrefentialDashboardConfig(
DashboardId int IDENTITY(1,1) PRIMARY KEY,
ScorecardId uniqueidentifier,
UserId uniqueidentifier,
DateCreate DateTime,
DashboardConfig varchar(255)

)

现在，如果你看一下我的控制器，我在后端设置了日期和用户 ID，它们被插入到我的数据库中，但是我从前端获得的记分卡 ID 和配置并没有得到解析到我的后端

Answer 1

属性 JSON（我们发送到服务器）中的名称应该与 MVC 视图模型的属性名称相匹配 class（参数保存 ActionResult 方法）。

选项 1： 如果您使用 ko.toJSON 方法，那么您应该像下面这样使用您的模型；


var dashboardConfigEditViewModel = {
        ScorecardId:ko.observable(localStorage.getItem('scorecardId')),
        DashboardConfig:ko.observable(localStorage.getItem('ElementDataWidget'))
};

var JSONData = ko.toJSON(dashboardConfigEditViewModel);
PreferentialProcurementDashboardApi.Save(JSONData);

选项 2： 如果你不想使用 ko.toJSON method.You 可以使用下面的选项。


var dashboardConfigEditViewModel = {
        'ScorecardId':ko.observable(localStorage.getItem('scorecardId'))(),
        'DashboardConfig':ko.observable(localStorage.getItem('ElementDataWidget'))()
};


PreferentialProcurementDashboardApi.Save(dashboardConfigEditViewModel);

注意：确保在发送到服务器之前使用 JSON.stringify() 将 JSON 转换为字符串。

Json 来自前端的数据未通过后端使用 Knockout 和 MVC 插入到数据库中

Json Data from FrontEnd not being Inserted to the database Via the backend using Knockout and MVC

c#

asp.net-mvc

knockout.js