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

本文关键字：Knockout 视图 模型 MVC 数据 | 更新日期: 2023-09-27 18:14:29

我有一个从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>

Viewmodel

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

这种绑定在Create页面上非常有效，但在Edit页面上，我很难弄清楚如何使我的<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似乎有点麻烦，所以如果有更好的方法，我会感谢您的额外努力！

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

我会将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>

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

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

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

vm.SelectedCompanyID = selected.CompanyId;
相关文章：