我正在尝试将淘汰赛与 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();
}
}