在淘汰赛中为单独的实体创建单个视图模型答案

【问题标题】：Creating a single viewmodel for separate entities in knockout在淘汰赛中为单独的实体创建单个视图模型
【发布时间】：2015-04-23 21:32:12
【问题描述】：

所以，我的应用程序中有 2 个 C# 实体。我计划使用相同的淘汰视图模型将这 2 个实体绑定到视图。模型如下

public class Provider
{
    public int ProviderID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public ProviderDetails ProviderDetails { get; set; }
}

public class ProviderDetails
{
    public int ProviderDetailsId { get; set; }
    public string Certification { get; set; }
    public string Specialization { get; set; }
    public string TaxonomyCode { get; set; }
    public int ProviderId { get; set; }
}

我有以下 HTML

 <body>
  <div class="container">
       <h1 class="col-sm-offset-3">Enter Provider Details:</h1>
    <form class="form-horizontal" role="form" id="providerDetailsForm" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">First Name:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the First Name" id="firstName" data-bind="value: firstName, @*hasFocus: setTheFocusaAfterReset*@ event: { keypress: allowOnlyAlphabets }" name="firstName" maxlength="20">
                <span class="col-sm-4 error"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Last Name:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the Last Name" id="lastName" name="lastName" data-bind="value: lastName, event: { keypress: allowOnlyAlphabets }" maxlength="20">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Certification:</label>
            <div class="col-sm-6">
                <select class="form-control" id="certification" name="certification" data-bind="value: certification, options: certificationArray, optionsCaption: 'Select a Certification'">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Specialization:</label>
            <div class="col-sm-6">
                <select class="form-control" id="specialization" name="specialization" data-bind="value: specialization, options: specializationArray, optionsCaption: 'Select a Specialization'">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">Taxonomy Code:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Taxonomy code" id="taxonomyCode" name="taxonomyCode" data-bind="textInput: taxonomyCode" readonly>
            </div>
        </div>
    </form>
</div>
</body>

这里的淘汰绑定是当有单个实体提供者时。我必须拆分实体以显示数据库中表之间的父子关系。关系是一对一的。我正在考虑像这样创建一个单一的视图模型。

var ProviderViewModel
{
      var self = this;
      self.providerID = ko.observable("");
      self.firstName = ko.observable("");
      self.lastName = ko.observable("");
     //This is where I am facing difficulty.How do I include the  Providerdetails within this viewmodel.
}

现在，我有 Providerdetails 的代码，像这样

   self.specializationArray = ko.observableArray([]);
    self.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
    self.certification = ko.observable("");
    self.specialization = ko.observable("");

但是我如何将它包含在同一个视图模型中。我有点困惑。请指导我正确的方向。

用于创建的 MVC 控制器代码。

    [HttpPost]
    public ActionResult CreateProvider(Provider provider)
    {
        try
        {
            int providerCreationSuccessful = _repository.CreateProvider(provider);
            if (providerCreationSuccessful == 1)
                TempData["userIntimation"] = "Provider Registered Successfully";

            return RedirectToAction("ShowTheListOfProviders");
        }
        catch (Exception Ex)
        {
            _logger.Error(Ex.Message);
            return View("Error");
        }

    }

【问题讨论】：

标签： c# asp.net-mvc-4 mvvm knockout.js

【解决方案1】：

为什么不为每个属性创建一个属性：

var ProviderViewModel = function(){
    //these 2 can be observable if needed
    this.provider = new Provider();
    this.details = new ProviderDetails();
};     
var Provider = function(){
    var self = this;
    self.providerID = ko.observable("");
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
};
var ProviderDetails = function(){
    self.specializationArray = ko.observableArray([]);
    self.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
    self.certification = ko.observable("");
    self.specialization = ko.observable("");
};

然后在你的 HTML 中你可以用这种方式绑定Provider:

<input type="text" class="form-control" placeholder="Enter the Last Name" id="lastName" name="lastName" data-bind="value: provider.lastName, event: { keypress: allowOnlyAlphabets }" maxlength="20">

并使用ProviderDetails 的详细信息成员：

<select class="form-control" id="certification" name="certification" data-bind="value: details.certification, options: details.certificationArray, optionsCaption: 'Select a Certification'">
 </select>

【讨论】：

我必须在我的应用程序中使用相同的视图。它是一个演示项目。要求具有相同的视图来列出、创建和编辑提供程序
我的视图绑定是否仍然保持不变？此外，将提供程序保存到数据库的控制器操作方法将提供程序对象作为参数。如果我有单独的视图模型，相同的方法是否有效2 个实体。这就是为什么我想在 Provider 中包含提供者详细信息。不知道，该怎么做？
@MichealS .. 感谢您抽出宝贵时间回答我的问题。我的将 Provider 对象作为参数的控制器方法现在会改变吗？
@AbhishekKS 我相信它不应该改变，只是注意你现在应该通过 vm.provider。
我认为如果我将 vm.provider 传递给控制器，它不会有 providerdetails，我将数据保存到数据库中的两个表中。所以，我不需要 provider 和 providerdetails .我认为的原因之一是，我需要为 provider 和 providerdetails 提供相同的视图模型

【解决方案2】：

您可以像以前一样创建您的第一个视图模型：

var ProviderViewModel = function()
{
    var self = this;
    self.providerID = ko.observable("");
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
}

然后你初始化这个视图模型：

var vm = new ProviderViewModel();

然后你使用vm 变量而不是self 来应用你的其余属性：

vm.specializationArray = ko.observableArray([]);
vm.certificationArray = ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]);
vm.certification = ko.observable("");
vm.specialization = ko.observable("");

然后你绑定你的模型：

ko.applyBindings(vm);

【讨论】：

视图中的数据绑定也会随之改变吗？
如果我没记错的话，你的观点不需要改变
将数据保存到数据库的控制器动作方法目前正在以Provider对象为参数。不知道会不会改变。
取决于它的实际实现方式，只需进行检查，您就会自己看到
会的。非常感谢。