使用從JavaScript /淘汰列表下拉列表中選擇的值填充MVC3視圖模型？

Question

我正在尋找有關如何在檢索列表並在下拉列表中選擇項目后填充傳遞給視圖的viewmodel的建議。 請注意，我還有一個用於Ajax / 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);
    }

Answer 1

請注意，我還有一個用於Ajax / Knockout客戶端代碼的客戶端視圖模型，但這不是我要填充的視圖模型。 我可能必須從一個視圖模型映射到另一個視圖模型，但是我不確定這是否是正確的解決方案。

好的，有一些黃旗在上升。

讓我重新陳述您的問題，以驗證我的理解：您已經有了一個視圖模型，該模型具有可觀察的綁定到<select>框的視圖。 假設它是vm1.mySelection。

您具有第二視圖模型，並且想要將vm1.mySelection存儲在vm2.mySelection中。

那是對的嗎？

如果是這樣，我首先想到的是：“您可能做錯了。” 請說明為什么您認為自己需要這個，我們會告訴您是否有更好的方法。

其次，如果您確實需要這樣做，則可以在vm2中手動訂閱vm1.mySelection，然后在vm2中相應地設置值。 但是，這又再次讓人感到駭人聽聞，您可能做錯了。

Answer 2

我的設計可能不是最好的。 我有一個視圖模型，該視圖模型是按照視圖聲明（ @model Apps.Model.ViewModels.AVMApplicationInfo ）中的定義從服務器傳遞給視圖的。 我在“表單”視圖中廣泛使用此功能來捕獲信息以構建Web服務調用。

我需要添加一些級聯下拉菜單以獲取過濾信息。 為此，我添加了刪除代碼和客戶端視圖模型（varresidentncyViewModel = newresidentncy（）; ko.applyBindings（residencyViewModel）;）。 這用於通過ajax回調到控制器以獲取下拉值。 選擇下拉值后，我想將選擇內容存儲在Apps.Model.ViewModels.AVMApplicationInfo視圖模型中。 我不確定是否需要客戶端視圖模型，但不確定如何編寫此代碼。

所選值還將用於后續的級聯下拉列表（作為另一個過濾器值）。 一些下拉菜單使用從表單中較早選擇的多個下拉菜單中選擇的值； 也就是說，它們具有多個過濾器，例如：國家，州，縣，市。 這是由於表結構無法更改。 最終，盡管在完成所有選擇之后，必須使用所有選擇填充Apps.Model.ViewModels.AVMApplicationInfo視圖模型，才能將值傳遞回服務器以進行Web服務調用。

那有意義嗎？