使用 JavaScript/Knockout 下拉列表中的选定值填充 MVC3 视图模型？答案

【问题标题】：Populating MVC3 view model with a selected value from a JavaScript/Knockout dropdown?使用 JavaScript/Knockout 下拉列表中的选定值填充 MVC3 视图模型？
【发布时间】：2011-12-14 17:41:45
【问题描述】：

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

查看 - 表单

在我的表单中，我使用 Knockout 和 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);
    }

【问题讨论】：

我对你的问题有点困惑。您只是在问如何将县代码放入可观察的淘汰视图模型中吗？

标签： javascript ajax asp.net-mvc-3 viewmodel knockout.js

【解决方案1】：

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

好的，有一些黄旗上升了。

让我重申您的问题以验证我的理解：您有一个视图模型，其可观察到绑定到

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

对吗？

如果是这样，我的第一个想法是，“你可能做错了。”请解释你为什么认为你需要这个，我们会告诉你是否有更好的方法。

其次，如果你确实需要这个，你可以在 vm2 中手动订阅 vm1.mySelection，然后在 vm2 中相应地设置该值。但是再一次，这感觉很老套，你可能做错了。

【讨论】：

【解决方案2】：

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

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

所选值也将用于后续级联下拉菜单（作为另一个过滤器值）。一些下拉菜单使用表单前面选择的多个下拉菜单中的选定值；即，它们有多个过滤器，例如：国家、州、县、市。这是由于表结构无法更改。最终，当所有选择都完成后，Apps.Model.ViewModels.AVMApplicationInfo 视图模型必须填充所有选择，以将值传递回服务器以进行 Web 服务调用。

这有意义吗？

【讨论】：