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

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

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>

这里的敲除绑定是在存在单个实体Provider的时候。我必须拆分实体以显示DB中表之间的父子关系。这种关系是一体的。我正在考虑创建一个这样的单一视图模型。

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.
}

现在，我有了提供者详细信息的代码，就像一样

   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");
        }
    }

为什么不制作每个属性：

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>

您可以创建第一个视图模型：

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);

相关内容

最新更新

热门标签：