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

Question

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

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

这些绑定到由Knockout绑定的页面上的<select>元素，如此

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的一些相关代码

Knockout 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设置为＆＃39; CompanyID＆＃39;您的data-bind，并将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)));
}

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

vm.SelectedCompanyID = selected.CompanyId;