2011-12-14 37 views
1

我正在寻找关于如何填充在检索列表并在下拉列表中选择项目后传递给视图的viewmodel的建议。请注意,我也有一个用于Ajax/Knockout客户端代码的客户端视图模型,但这不是我试图填充的视图模型。我可能必须从一个视图模型映射到另一个视图模型,但我不确定这是否是正确的解决方案。使用JavaScript/Knockout下拉菜单中的选定值填充MVC3视图模型?

查看 - 表格

在我的表单中我使用淘汰赛和JavaScript为我的下拉菜单。如何使用所选的县代码值填充视图模型m.VMResidencyWTCS.ScCountyCd字段?是否有可能捕捉到描述?如果是这样,那么如何做呢?

@model Apps.Model.ViewModels.AVMApplicationInfo 
... 
@using (Html.BeginForm("ApplicationDetails", "PersonalInfo")) 
{ 
    <fieldset> 
     <div class="appl-step"> 
     ... 
      <div class="editor-label"> 
       <span class="error">*</span>@Html.LabelFor(m => m.VMResidencyWTCS.ScCountyCd) 
      </div> 
      <div class="editor-field"> 
       <select id='counties' 
         data-bind=' 
          options: selectedResidencyState() ? counties : null, 
          optionsValue : "CountyCd", 
          optionsText: "CountyDescr", 
          optionsCaption: "[Please select a county]", 
          value: selectedCounty, 
          visible: (counties() && counties().length > 0)'> 
       </select> 
       <span data-bind=' 
        template: {name: "noInfoTemplate"}, 
        visible: !(counties() && counties().length > 0)'> 
       </span> 
      </div> 

视图 - JavaScript的

这是我打电话给控制器为县下拉列表中的脚本。请注意,当在另一个下拉列表中选择某个州时,会填充县下拉列表。

<script type='text/javascript'> 
    $(document).ready(function() { 
    var residency = function() { 
     this.selectedResidencyState = ko.observable(); 
     this.selectedCounty = ko.observable(); 
        ... 
     this.states = ko.observableArray(); 
     this.counties = ko.observableArray(); 
    ... 

     this.selectedResidencyState.subscribe(function (stateCd) { 
      this.selectedCounty(undefined); 
      this.counties(undefined); 

      if (stateCd != null) { 
       $.ajax({ 
        url: '@Url.Action("GetCounties", "PersonalInfo")', 
        data: { stateCd: stateCd }, 
        type: 'GET', 
        success: function (data) { 
         residencyViewModel.counties(data); 
        } 
       }); 
      } 
     } .bind(this)); 

    }; 

    var residencyViewModel = new residency(); 
    ko.applyBindings(residencyViewModel); 

    //Load the states 
    $.ajax({ 
     url: '@Url.Action("GetResidencyStates", "PersonalInfo")', 
     type: 'GET', 
     success: function (data) { 
      residencyViewModel.states(data); 
     } 
    }); 
}); 
</script> 

控制器

public class PersonalInfoController : Controller 
{ 
… 
    [HttpGet] 
    public virtual ActionResult GetCounties(string stateCd) 
    { 
     var counties = 
      (
       from county in this._countyRepository.All 
       where (county.CountryCd == "USA" && county.ResidencyStateCd == stateCd) 
       select new 
       { 
        CountyCd = county.CountyCd, 
        CountyDescr = county.CountyDescr, 
        StateCd = county.ResidencyStateCd, 
        CountryCd = county.CountryCd // Added for populating model ?Needed? 
       } 
      ).ToList(); 

     return Json(counties, JsonRequestBehavior.AllowGet); 
    } 
+0

我对你的问题有点困惑。你只是问如何让县代码成为一个淘汰赛viewmodel观察? – Tyrsius 2011-12-14 19:44:38

回答

0

请注意,我也有用于 的Ajax /淘汰赛客户端代码客户端视图模型,但是这不是我 视图模型试图填充。我可能必须从一个视图模型映射到另一个视图模型 ,但我不确定这是否是正确的解决方案。

好吧,有一些黄色标志上涨。

让我重申你的问题来验证我的理解:你有一个观察模型,可观察到绑定到<选择>框。让我们假装它是vm1.mySelection。

您有第二个视图模型,并且您想将vm1.mySelection存储在vm2.mySelection中。

这是正确的吗?

如果是这样,我的第一个想法是,“你可能做错了。”请解释为什么你认为你需要这个,我们会告诉你是否有更好的方法。其次,如果你确实需要这个,你可以在vm2中手动订阅vm1.mySelection,然后在vm2中相应地设置这个值。但是,这又会让人觉得很尴尬,而且你可能会做错事。

0

我的设计可能不是最好的。视图语句(@model Apps.Model.ViewModels.AVMApplicationInfo)中定义的视图模型将从服务器传递到视图。我在视图“表单”中广泛使用它来捕获信息以构建Web服务调用。

我需要添加一些级联下拉以获得过滤的信息。为此,我添加了淘汰赛代码和客户端视图模型(var residencyViewModel = new residency(); ko.applyBindings(residencyViewModel);)。这用于通过ajax回调控制器以获取下拉值。一旦选择了下拉值,我想将选择存储在Apps.Model.ViewModels.AVMApplicationInfo视图模型中。我不确定是否需要客户端视图模型,但我不确定该编码如何。

所选值也将用于后续级联下拉列表(作为另一个过滤器值)。一些下拉菜单使用表格中前面选择的多个下拉菜单中的选定值;即它们具有不止一个过滤器,例如:国家,州,县,市。这是由于无法更改的表结构。最终,尽管所有选择都已完成,但Apps.Model.ViewModels.AVMApplicationInfo视图模型必须填充所有选择以将值传递回服务器以进行Web服务调用。

这有道理吗?