javascript - 使用 JavaScript/Knockout 下拉列表中选定的值填充 MVC3 View 模型？

Question

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

查看 - 表单

在我的表单中，我使用 Knockout 和 JavaScript 作为下拉菜单。如何使用所选的县代码值填充 View 模型 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

这是我的脚本，用于回调县下拉列表的 Controller 。请注意，当在另一个下拉列表中选择一个州时，就会填充县下拉列表。

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

Controller

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

Answer 1

Note that I also have a client side viewmodel that is used for the Ajax/Knockout client code but this is not the view model that I am trying to populate. I may have to map from one view model to the other but I'm not sure if that is the correct solution.

好的，有一些黄旗升起。

让我重申一下你的问题来验证我的理解:你有一个 View 模型，它的可观察对象绑定(bind)到 框。让我们假设它是 vm1.mySelection。您有第二个 View 模型，并且希望将 vm1.mySelection 存储在 vm2.mySelection 内。正确吗？如果是这样，我的第一个想法是，“你可能做错了。”请解释为什么您认为您需要这个，我们会告诉您是否有更好的方法。其次，如果您确实需要此功能，您可以手动订阅 vm2 内的 vm1.mySelection，然后在 vm2 中设置相应的值。但同样，这感觉很黑客，而且你可能做错了。 关于javascript - 使用 JavaScript/Knockout 下拉列表中选定的值填充 MVC3 View 模型？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8509119/ 上一篇：google-maps - 如何根据谷歌地图中标记的相对位置制作多边形？ 下一篇：javascript - 重新加载后，iframe 中的 OnLoad 事件不会在 IE8 中触发 相关文章： javascript - 将父作用域添加到匿名函数 - JavaScript 到 Angular 2 javascript - 在所有元素上应用 jquery 代码 javascript - jQuery 文件上传 - 进行逐一上传 javascript - 具有 Access-Control-Allow-Origin : * 的服务器 javascript - 循环遍历结果并根据距离改变值 javascript - 创建 React 应用程序 : how to get final port dev-server running on javascript - 页面计数功能 asp.net-mvc-3 - 我应该使用HTTP引荐来源网址验证或 token 验证来防止CSRF攻击吗？ jquery - 如何在 Jquery-UI 自动完成中显示图像 html - 如何在 ASP.NET MVC View 中使用@page CSS ©2023 IT工具网  联系我们