knockoutjs mapping select data-bind options

Question

I am having problems binding the selected value of a selectbox to a property within the view model. For some reason it keeps coming back unchanged when posted back to the server.

My Html is:

<form action="/Task/Create" data-bind="submit: save"> 

    <table border="1">
        <tr>
            <td>ref type</td>
            <td><select data-bind="options: ReferenceTypes, optionsText: 'Name', optionsCaption: 'Select...', value:Task.ReferenceTypeId"></select></td>
            <td>Reference</td>
            <td><input data-bind="value:Task.Reference" /></td>
        </tr>
    </table>

    <button type="submit">Save Listings</button> 
</form>

The Javascript is:

<script type="text/javascript">

    var viewModel = {};

    $.getJSON('/Task/CreateJson', function (result) {
        viewModel = ko.mapping.fromJS(result.Data);

        viewModel.save = function () {
            var data = ko.toJSON(this);
            $.ajax({
                url: '/Task/Create',
                contentType: 'application/json',
                type: "POST",
                data: data,
                dataType: 'json',
                success: function (result) {
                    ko.mapping.updateFromJS(viewModel, result);
                }
            });
        } 

        ko.applyBindings(viewModel);
    });

</script>

JSON from Fiddler that gets loaded into the page as below.

{
   "ContentEncoding":null,
   "ContentType":null,
   "Data":{
      "Task":{
         "ReferenceTypeId":0,
         "Reference":"Default Value"
      },
      "ReferenceTypes":[
         {
            "Id":2,
           "Name":"A Ref Type"
         },
         {
            "Id":3,
            "Name":"B Ref Type"
         },
         {
            "Id":1,
            "Name":"C Ref Type"
         }
      ]
   },
   "JsonRequestBehavior":1
}

This comes back into the server (ASP.NET MVC3) correctly, with the updated Reference string value, but ReferenceTypeId is not bound to the correctly selected drop down value. Do I need to perform any additional functions to bind correctly etc? Or tell the data-bind what the select value column is (Id) etc? I have checked in Fiddler on the values getting posted back from the browser, and it has the same original value (0). So it is definately not the server.

I hope someone can help, if you need any further information please ask.

Kind Regards Phil

Answer 1

The issue is that your options binding will try to assign the object that it is bound to, to the value observable specified.

For example if you select "A Ref Type" the options binding will push the json object

{ "Id":2, "Name":"A Ref Type" }

Into your Task.ReferenceTypeId observable which will then be serialized back to your server. In this case you need to add an optionsValue config options to tell the binding just to save the id.

<select data-bind="options: ReferenceTypes, optionsText: 'Name', 
optionsCaption: 'Select...', optionsValue: 'Id', value:Task.ReferenceTypeId">
</select>

Here's an example.

http://jsfiddle.net/madcapnmckay/Ba5gx/

Hope this helps.