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

Posted 2023-03-27

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

【英文标题】：Json Data from FrontEnd not being Inserted to the database Via the backend using Knockout and MVC

【发布时间】：2020-09-15 17:11:50

【问题描述】：

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

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

项目文件.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，它们会插入到我的数据库中，但是我从前端获取的 scorecardID 和配置并没有一直解析到我的后台

【参考方案1】：

JSON 中的属性名称（我们发送到服务器）应该与 MVC 视图模型类的属性名称匹配（Save 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 方法。您可以使用以下选项。

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


PreferentialProcurementDashboardApi.Save(dashboardConfigEditViewModel);

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