将 MVC 数据传递给 Knockout 视图模型

Question

我的 MVC 控制器返回了一个非常简单的对象

public class Company 
{
   public int CompanyID { get; set; } 
   public string CompanyName { get; set; } 
}

这些绑定到页面上的 <select> 元素，该元素由 Knockout 绑定，就像这样

HTML

<select data-bind="options: companies, optionsText: 'CompanyName', value: selectedCompany, optionsCaption: 'Select a company'" class="form-control" ></select>

视图模型

self.companies = ko.observableArray(@Html.Raw(JsonConvert.SerializeObject(Model.CompaniesAvailable)));

此绑定在“创建”页面上完美运行，但在“编辑”页面上，我很难弄清楚如何使我的 <select> 具有从 Company 对象传递到页面的选定值我的 MVC 视图模型。

如果可能的话，我正在尝试在不使用 AJAX 的情况下编辑记录。

所以我有这个

public ActionResult Edit(int id)
{
    TimeEntryViewModel vm = new TimeEntryViewModel();
    TimeEntry selected = new TimeEntry();
    selected = entry.GetEntryById(id);

    vm.EntryToAdd = selected;
    vm.EmployeeSelected = userDetails.GetUser(selected.UserId);

    vm.CompaniesAvailable = vm.EmployeeSelected.Companies;
    vm.SelectedCompany = vm.EmployeeSelected.Companies.FirstOrDefault(x => x.CompanyID == selected.CompanyId);

    return View(vm);
}

我不确定下一步是什么，以便在下拉列表中选择班级上的 CompanyID 或 CompanyName 并填充到我的 Knockout VM 中

这里是KO Viewmodel的一些相关代码

淘汰视图模型

var viewModel = function () {
    var self = this;
    self.userId = ko.observable(@Model.EntryToAdd.UserId);
    self.companies = ko.observableArray(@Html.Raw(JsonConvert.SerializeObject(Model.CompaniesAvailable)));
    self.selectedCompany = ko.observable();
    self.companyId = ko.computed(function () {
        if (self.selectedCompany()) {
            return self.selectedCompany().CompanyID;
        } else {
            return 0;
        }
    }, this);
 }

self.companyId 计算函数将数据绑定到 MVC 表单上的隐藏字段，因此它被控制器拾取

@Html.Hidden("CompanyId", "", new { data_bind = "value: companyId()" })

在我看来，将数据直接从 MVC 模型传递到 Knockout VM 似乎有点笨拙，所以如果有更好的方法，我将不胜感激！

Answer 1

我会将optionsValue 设置为data-bind 的“CompanyID”，并将可观察到的selectedCompany 更改为selectedCompanyID 并进行相应设置。通过这样做，您将比较两个数字而不是两个 不同 javascript 对象。

将绑定更新为：

<select data-bind="value: selectedCompanyID, options: companies, optionsValue: 'CompanyID', optionsText: 'CompanyName', optionsCaption: 'Select a company'" class="form-control" ></select>

删除companyID 属性并将selectedCompany 替换为JS 视图模型的selectedCompanyID：

var viewModel = function () {
    // ... snipped ...
    self.selectedCompanyID = ko.observable(@Html.Raw(JsonConvert.SerializeObject(Model.SelectedCompanyID)));
}

将CS视图模型的SelectedCompany替换为SelectedCompanyID：

vm.SelectedCompanyID = selected.CompanyId;