WPENG WPENG - 2 months ago 10
ASP.NET (C#) Question

ASP.NET Knockout dependent dropdown list cannot get selected value when postback

I have a asp.net page with knockout 2.3.0. The page contains a dependent dropdown list. In the example.js it initials these 2 drop down lists. The dependent list is working.

However when I selected value in front end, I cannot get selected value when button clicked in server end. The selected value always set to default value.

Please help!

<%@ 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 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 runat="server" ID="ddl2" data-bind="options: jobFunctions, optionsCaption:'--Job Function--', optionsText: 'jobFunctionName', optionsValue: 'jobFunctionID', value: selectedJobFunction, enable: jobFunctions().length">

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

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



The dropdownlist was declared as empty in your aspx page, and will be recorded in the ViewState as such.

Any dropdownlist items generated via javascript won't be recognize as valid items and won't recorded in .SelectedValue

You can, however, access the selected value by accessing the Request.Form directly. For example: