Question

我正在尝试使用带有MVC强类型视图的knockout。由于我的模型将具有超过20个属性，我更喜欢使用强类型视图模型来使用ko.mapping.toJS和ko.Util.postJson来回发数据。符合条件的字段已正确传回，但以下代码不会从下拉列表中回发所选选项，当我在控制器上查看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();
        }
    }

Answer 1

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

Answer 2

实际上它有效。以某种方式它以前没有工作，但在我清除了缓存，cookie等之后，它才起作用。谢谢大家！

使用MVC4使用Knockout强类型视图

2 个答案: