Question

I am trying to get the knockout.js library and knockout.mapping.js library to work in my MVC4 application. I am using a controller to generate the view. The razor view is converting the model to a JSON string and then I am using the mapping plugin to get my JSON model in my MV.
That part all works fine. If I add some values to the model in the controller they are showing up in my view. The problem I am having is sending back to me WebApi controller. Once I get it there It will not convert back into my serializable model. Here is what I have:

<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>

This is my model

[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; }
}

This is my 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;
    }
}

So, from every example that I have looked at this should work. If I change the object in the api controller to FindSubscriber(JObject search) I can see that I am getting a JSON string. Fiddler show it is sending a JSON string.
From Fiddler:

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}

I just am not getting a result in my controller that I can get back into a SearchSubscriberFields object.

Any ideas are greatly appreciated.

Answer 1

I found that my problem was that my server model was had the [Serializable] attribute so that when I serialized it in my razor view it was also serializing the backing fields. That should have been obvious but I missed it. So once I posted back my model it was also posting back those binding fields and thus making it impossible to mapped to my model.
I added this to the Global.asmx

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