回发时，ASP.NET Knockout 依赖下拉列表无法获取选定值

Question

我有一个带有淘汰赛 2.3.0 的 asp.net 页面。该页面包含一个从属下拉列表。在 example.js 中，它以这 2 个下拉列表开头。依赖列表有效。

但是，当我在前端选择值时，在服务器端单击按钮时无法获得选择的值。所选值始终设置为默认值。

请帮忙！

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" EnableEventValidation="false" Inherits="WebApplication1.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="JS/knockout-2.3.0.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager ID="sm1" runat="server"></asp:ScriptManager>

    <asp:DropDownList runat="server" ID="ddl1" data-bind="options: jobAreas, optionsCaption:'--Job Areas--', optionsText: 'jobAreaName', optionsValue: 'jobAreaID', value: selectedJobArea">
    </asp:DropDownList>
    <asp:DropDownList runat="server" ID="ddl2" data-bind="options: jobFunctions, optionsCaption:'--Job Function--', optionsText: 'jobFunctionName', optionsValue: 'jobFunctionID', value: selectedJobFunction, enable: jobFunctions().length">
    </asp:DropDownList>

    <asp:LinkButton ID="Button1" runat="server" Text="Next" OnClick="Test" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptTags" runat="server">
    <script src="JS/example.js"></script>
</asp:Content>

在example.js中

    function ViewModel(items) {
    this.jobAreas = ko.observableArray(items);
    this.selectedJobArea = ko.observable();
    this.selectedJobFunction = ko.observable();

    function getById(items, value) {
        if(!value) {
            return [];
        }

        var result = ko.utils.arrayFirst(items, function(item) {
            return item.jobAreaID === value;
        });

        return result && result.JubfunctionItems || [];
    }

    this.jobFunctions = ko.computed(function(){
        var items = this.jobAreas();
        var id = this.selectedJobArea();
        return getById(items, id);
    }, this);

}

var items = [
    { jobAreaName: 'Ford', jobAreaID: 1, JubfunctionItems:
     [
         { jobFunctionName: 'F-150', jobFunctionID: 1},
         { jobFunctionName: 'F-250', jobFunctionID: 2}
     ]
    },
    { jobAreaName: 'Honda', jobAreaID: 2, JubfunctionItems:
     [
         { jobFunctionName: 'Civic', jobFunctionID: 5},
         { jobFunctionName: 'Accord', jobFunctionID: 6}
     ]
    }
];

var module = {};

module.viewModel = new ViewModel(items);

ko.applyBindings(module.viewModel);

Answer 1

下拉列表在您的 aspx 页面中被声明为空，并将被记录在 ViewState 中。

通过 javascript 生成的任何下拉列表项都不会被识别为有效项，也不会记录在 .SelectedValue 中

但是，您可以通过直接访问Request.Form 来访问所选值。例如：

Request.Form[ddl2.UniqueID]

Request.Form[ddl1.UniqueID]