asp.net-mvc-4 - Knockout で MVC4 の厳密に型指定されたビューを使用する

Question

MVC の強く型付けされたビューでノックアウトを使用しようとしています。私のモデルには 20 を超えるプロパティがあるため、ko.mapping.toJS と ko.Util.postJson を使用して、厳密に型指定されたビュー モデルを使用してデータをポストバックすることを好みます。Eligible フィールドは正しく返されましたが、次のコードはドロップダウン リストから選択したオプションをポストバックしません。コントローラーで selectOptionModel を調べたときに、値が 0 として表示されました。誰かが私が間違っていたことを指摘できますか?

サーバー側からのビューモデルは次のとおりです。

  public class SelectOptionModel
{
    public bool Eligible { get; set; }
    public int selectedOption { get; set; }
    public IEnumerable<SelectListItem> AvailableOptions
    {
        get
        {
            return Enum.GetValues(typeof(OptionEnum)).Cast<OptionEnum>()
            .Select(x => new SelectListItem
            {
                Text = x.ToString(),
                Value = x.ToString()
            });
        }
    }
}
public enum OptionEnum
{
    [Description("First")]
    FirstOption = 1,
    [Description("Second")]
    SecondOption = 2,
    [Description("Third")]
    ThirdOption = 3
}

かみそりビューは次のようになります。

@model TestKo.Models.SelectOptionModel
...
subViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
...
}
@using (Html.BeginForm()){
 <button type="submit" class="button" id="SaveBtn">Save</button>           
 <div data-bind="with:vm">
<div>
        @Html.LabelFor(model => model.Eligible)
        @Html.CheckBoxFor(model => model.Eligible, new { data_bind = "checked: selectOptionVM.Eligible" })
    </div>
    <div>
            @Html.LabelFor(model => model.selectedOption)
            @Html.DropDownListFor(model => model.selectedOption, Model.AvailableOptions,
         new
        { data_bind = "options: selectOptionVM.AvailableOptions, optionsText: 'Text', optionsValue: 'Value', value: selectOptionVM.selectedOption"
      })
        </div>
</div>
}

ノックアウト ビュー モデルの JavaScript は次のとおりです。

sectionVM = function (data) {

    var self = this;
    var selectOptionVM = data;
    return {
    selectOptionVM: selectOptionVM
    }
}

$(document).ready(function () {

var viewModel = {
    vm: new sectionVM(subViewModel)
};

ko.applyBindings(viewModel);

$("#SaveBtn").click(function () {
    var optionModel = ko.toJS(viewModel.vm.selectOptionVM);
    ko.utils.postJson($("form")[0], optionModel)

});
}); 

コントローラー部分:

[HttpPost]
    public ActionResult Create(SelectOptionModel selectOptionModel)
    {
        try
        {
            // TODO: Add insert logic here
            var modelSaved = selectOptionModel;
            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }