作为 JSON 的 knockout.mapping 返回到 Api 控制器不转换回对象答案

【问题标题】：knockout.mapping as JSON back to Api controller not converting back to object作为 JSON 的 knockout.mapping 返回到 Api 控制器不转换回对象
【发布时间】：2023-03-23 04:31:02
【问题描述】：

我正在尝试让 knockout.js 库和 knockout.mapping.js 库在我的 MVC4 应用程序中工作。我正在使用控制器来生成视图。剃刀视图将模型转换为 JSON 字符串，然后我使用映射插件在我的 MV 中获取我的 JSON 模型。那部分一切正常。如果我向控制器中的模型添加一些值，它们就会显示在我的视图中。我遇到的问题是将 WebApi 控制器发回给我。一旦我得到它，它就不会转换回我的可序列化模型。这是我所拥有的：

<script type="text/javascript" src="/Scripts/knockout-2.1.0.debug.js"></script>
<script type="text/javascript" src="/Scripts/knockout.mapping-latest.debug.js"></script>
<script type="text/javascript">
function SearchModel() {
    var self = this;
    var baseUri = '/Api/searchsubscriber/FindSubscriber';

    self.search = function (formElement) {
        debugger;
        var myJSONString = JSON.stringify(ko.mapping.toJS(formElement));
        alert(myJSONString);
        $.ajax({
            type: "POST",
            url: baseUri,
            data: myJSONString
        }).done(updateSearchResults);

    };

    updateSearchResults = function (data) {
        debugger;
        var jsonString = JSON.stringify(data);
        alert(jsonString);
    };
};
$(function () {
    debugger;
//in my actualy view it looks like this
//var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model))';
    var jsonModel = '{"SubscriberNum":null,"PersonCode":null,"ClientCode":null,"LastName":"TEST","FirstName":"H","MI":null,"DOB":null,"StartDt":null,"EndDt":null,"GroupNum":null}';
    var mvcModel = ko.mapping.fromJSON(jsonModel);

    var myViewModel = new SearchModel();
    var g = ko.mapping.fromJS(myViewModel, mvcModel);

    ko.applyBindings(g);
});
</script><code>

这是我的模特

[Serializable]
public class SearchSubscriberFields //: SearchSubscriberResults
{
   //public List<SearchSubscriberResults> Results { get; set; }
   public string SubscriberNum { get; set; }
   public string PersonCode { get; set; }
   public string ClientCode { get; set; }
   public string LastName { get; set; }
   public string FirstName { get; set; }
   public string MI { get; set; }
   public string DOB { get; set; }
   public string StartDt { get; set; }
   public string EndDt { get; set; }
   public string GroupNum { get; set; }
}

这是我的 ApiController

[Authorize]
public class SearchSubscriberController : ApiController
{
    MyService _service = new MyService();

    [HttpPost]
    public SearchSubscriberFields FindSubscriber(SearchSubscriberFields search)
    {
        if (search != null)
        {
            SearchSubscribersRequest request = new SearchSubscribersRequest();

            request.Credentials = new Credentials() { Username = User.Identity.Name };

            request.SubscriberNum = Utility.FormatString(search.SubscriberNum).ToUpper();
            request.PersonCode = Utility.FormatString(search.PersonCode).ToUpper();
            request.ClientCode = Utility.FormatString(search.ClientCode).ToUpper();
            request.LastName = Utility.FormatString(search.LastName).ToUpper();
            request.FirstName = Utility.FormatString(search.FirstName).ToUpper();
            request.MI = Utility.FormatString(search.MI).ToUpper();

            SearchSubscribersResponse response = _service.SearchSubscribers(request);

            if (response.Errors.Count < 1)
            {
                return search;
            }
       }
        return search;
    }
}

因此，从我看过的每个示例中，这都应该有效。如果我将 api 控制器中的对象更改为 FindSubscriber(JObject search) 我可以看到我得到了一个 JSON 字符串。 Fiddler 显示它正在发送一个 JSON 字符串。来自提琴手：

POST http://localhost:60248/Api/searchsubscriber/FindSubscriber HTTP/1.1
Accept: */*
Content-Type: application/x-www-form-urlencoded
X-Requested-With: XMLHttpRequest
Referer: http://localhost:60248/Subscriber/Search
Accept-Language: en-US,es-DO;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)
Host: localhost:60248
Content-Length: 157
Connection: Keep-Alive
Pragma: no-cache
{"SubscriberNum":null,"PersonCode":null,"ClientCode":null,"LastName":"TEST","FirstName":"H","MI":null,"DOB":null,"StartDt":null,"EndDt":null,"GroupNum":null}

我只是没有在我的控制器中得到可以返回到 SearchSubscriberFields 对象的结果。

非常感谢任何想法。

【问题讨论】：

标签： asp.net-mvc-4 knockout.js knockout-mapping-plugin

【解决方案1】：

您应该使用 ko.mapping.toJSON 还需要正确配置 jQuery.Ajax，现在它会像 html 表单一样发布，您的 MVC 控制器不会理解。

这样的东西应该可以工作

MyApp.utils = {
    post: function (url, data, success) {
        $.ajax({
            url: url,
            type: "POST",
            dataType: "JSON",
            contentType: "application/json; charset=UTF-8",
            data: ko.mapping.toJSON(data),
            success: success
        });
    }
};

【讨论】：

我试过这个并没有解决问题。在我的控制器中，我仍然获得 SearchSubscriberFields 对象的所有空值。你确实是正确的@Anders。我需要指定 dataType 和 contentType。我曾经把它放在那里，但我一直在尝试很多事情来完成这项工作，现在我忘了把它放回去。谢谢你指出这一点。现在我有：Accept: application/json, text/javascript, */*; q=0.01

【解决方案2】：

我发现我的问题是我的服务器模型具有 [Serializable] 属性，因此当我在剃刀视图中对其进行序列化时，它也在对支持字段进行序列化。这应该很明显，但我错过了。因此，一旦我发回我的模型，它也会发回那些绑定字段，因此无法映射到我的模型。我将此添加到 Global.asmx

        //This sets the JSON serializer to ignore the backing fields
        JsonSerializerSettings jSettings = new Newtonsoft.Json.JsonSerializerSettings();
        GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings = jSettings;

【讨论】：