使用带有 Knockout 的 MVC4 强类型视图答案

【问题标题】：using MVC4 Strongly typed view with Knockout使用带有 Knockout 的 MVC4 强类型视图
【发布时间】：2014-10-04 16:43:55
【问题描述】：

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

【问题讨论】：

我也尝试c-sharpcorner.com/uploadfile/5ff76e/…添加FromJsonAttribute，但是在模型绑定过程中，字符串化的值为null，因此传递给控制器的模型为null。我不知道出了什么问题。
我自己对淘汰赛还很陌生，但我没有看到的一件事是您将淘汰赛属性设置为 observables。
@mmeasor，这是在 ko.mapping.fromJS() 完成的。
@AlliceSmash，您是否看到任何控制台错误？
@haim770: 没有控制台错误 :( 我也在 .postJson 之前检查了 optionModel，selectedOption 是正确的。所以值从 postJson 丢失到控制器。我不太确定如何调试它跨度>

标签： asp.net-mvc-4 knockout.js html.dropdownlistfor strong-typing html.beginform

【解决方案1】：

我在这里冒险猜测一下，但这可能是问题所在：您选择的选项的 id 位将始终是 string（因为它将进入 <option value="" 属性）。您的端点需要int。据我所知，您不会在将 selectedOption 发送到服务器之前对其进行转换。在将其发送到服务器之前尝试parseInt(selectedOption, 10)。此外，使用浏览器中的网络工具来调试发送到控制器的信息。这可能会帮助您解决问题。

【讨论】：

【解决方案2】：

实际上它有效。不知何故，它以前不起作用，但是在我清除缓存、cookie 等之后，它就起作用了。谢谢大家！

【讨论】：