C# 使用Knockout从数据库中填充DropDownList值

我正在使用

jqueryajax

从服务器加载数据，然后使用

Knockout JS

绑定数据，但是这些值不会显示在

DropDownList

中

代码如下：

查看：Edit.cshtml

...
<div class="tab-content">
    ...
    <div class="tab-pane" id="pnlLiquidation">
        @{ Html.RenderPartial("~/Views/Liquidation/_Liquidation.cshtml", Model.LiquidationVM); }
    </div>
</div>
...
@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/knockout")
    <script>
        ...
        var companyID = @Html.Raw(ViewBag.CompanyID);
        ...
    </script>
    ...
    <script src="~/Scripts/LiquidationSystem/account-statement.js"></script>
    ...
}

...
<div class="tab-content">
    ...
    <div class="tab-pane" id="pnlStage2Steps28_29">
        @{ Html.RenderPartial("~/Views/Liquidation/_Stage2Steps28_29.cshtml", Model); }
    </div>
    ...
</div>

...
<div class="panel panel-primary">
    <div class="panel-body" id="pnlAccountStatement">
        @{ Html.RenderPartial("~/Views/AccountStatement/_AccountStatement.cshtml"); }
    </div>
</div>
...

<div class="row">
    <div class="col-md-12">
        <a href="#" id="lnkAddAccountStatement">Add New Statement of Accounts</a>
        <div class="form-horizontal" id="pnlAddEditAccountStatement">
            <div data-bind="if: AccountStatement">
                <h4>Update Statement of Account</h4>
                ...
            </div>

            <div data-bind="ifnot: AccountStatement()">
                <h4>Add New Statement of Account</h4>
                <div class="form-group">
                    <label class="control-label col-md-2">Type:</label>
                    <div class="col-md-10">
                        <select class="form-control"
                                data-bind="options: Types, optionsValue: 'Value', optionsText: 'Text', optionsCaption: '-- Please Select --', value: Type"></select>
                    </div>
                </div>

                <div class="form-group">
                    <input type="hidden" data-bind="value: $root.CompanyID" />
                    <label class="control-label col-md-2">Description:</label>
                    <div class="col-md-10">
                        <input type="text" placeholder="Enter Description" class="form-control"
                               data-bind="value: $root.Description" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2">Amount:</label>
                    <div class="col-md-4">
                        <input type="text" placeholder="Enter Amount" class="form-control"
                               data-bind="value: $root.Amount" />
                    </div>

                    <label class="control-label col-md-2">Receipt Date:</label>
                    <div class="col-md-4">
                        <input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly"
                               data-bind="value: $root.ReceiptDate" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <a href="#" class="btn btn-success radius" data-bind="click: $root.create">Save</a>
                        <a href="#" class="btn btn-warning" data-bind="click: $root.reset">Reset</a>
                        <a href="#" class="btn btn-danger" data-bind="click: $root.cancel">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <h4>
            <i>
                <u>List of Statement of Accounts</u>
            </i>
        </h4>

        ...
    </div>
</div>

<select class="form-control"
        data-bind="options: Types, optionsValue: 'Type', optionsText: 'Description', value: Type"></select>

当我看到控制台时：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
data = [object Object],[object Object]
account-statement.js:151 Types[0].Text = Receipts
account-statement.js:152 Types[0].Value = Receipts
account-statement.js:153 Types[1].Text = Payment
account-statement.js:154 Types[1].Value = Payment

控制器：AccountStatementController.cs

function AccountStatementViewModel(companyID) {
    var self = this;

    self.AccountStatementID = ko.observable();
    self.CompanyID = ko.observable(companyID);
    self.Description = ko.observable();
    self.Amount = ko.observable();
    self.ReceiptDate = ko.observable();
    self.Type = ko.observable();

    var AccountStatement = {
        AccountStatementID: self.AccountStatementID,
        CompanyID: self.CompanyID,
        Description: self.Description,
        Amount: self.Amount,
        ReceiptDate: self.ReceiptDate,
        Type: self.Type
    }

    self.AccountStatement = ko.observable();
    self.AccountStatements = ko.observableArray();

    $.ajax({
        url: webroot + 'AccountStatement/GetAccountStatements',
        contentType: 'application/json; charset=utf-8',
        data: { id: self.CompanyID },
        cache: false
    }).done(function (data) {
        self.AccountStatements(data);
    });

    var clearInput = function () { ... }
    self.create = function () { ... }
    self.reset = function () { ... }
    self.edit = function (accountStatement) { ... }
    self.update = function () { ... }
    self.cancel = function () { ... }
    self.delete = function (accountStatement) { ... }
}

var accountStatementVM = new AccountStatementViewModel(companyID);
ko.applyBindings(accountStatementVM, document.getElementById('pnlAccountStatement'));

var Types;

$(function () {
    $('#pnlAddEditAccountStatement').hide();

    $('#lnkAddAccountStatement').click(function (e) {
        e.preventDefault();
        $('#pnlAddEditAccountStatement').show('blind', 1000);
        $(this).hide('blind', 1000);
    });

    $.ajax({
        url: webroot + 'AccountStatement/GetTypes',
        contentType: 'application/json; charset=utf-8',
        async: false,
        cache: false,
        dataType: 'json'
    }).done(function (data) {
        console.log('data = ' + data);
        Types = data;
        console.log('Types[0].Text = ' + Types[0].Type);
        console.log('Types[0].Value = ' + Types[0].Description);
        console.log('Types[1].Text = ' + Types[1].Type);
        console.log('Types[1].Value = ' + Types[1].Description);
    });
});

public JsonResult GetTypes()
{
    List<SelectListItem> types = new List<SelectListItem>
    { 
        new SelectListItem
        {
            Text = "Receipts",
            Value = "Receipts"
        },
        new SelectListItem
        {
            Text = "Payment",
            Value = "Payment"
        }
    };
}

public class AccountStatementTypeViewModel
{
    public string Type { get; set; }
    public string Description { get; set; }
}

更新

GetTypes（）

方法

public JsonResult GetTypes()
{
    List<AccountStatementTypeViewModel> types = new List<AccountStatementTypeViewModel>
    {
        new AccountStatementTypeViewModel
        {
            Type = "Receipts",
            Description = "Receipts"
        },
        new AccountStatementTypeViewModel
        {
            Type = "Payment",
            Description = "Payment"
        }
    };
    return Json(types, JsonRequestBehavior.AllowGet);
}

publicjsonresult GetTypes（）
{
列出并下载源代码，看看它们是如何填写电话类型下拉列表的。本教程使用ASP.NET MVC 4、jQuery 1.8.3和Knockout 2.2.0，但我使用的是ASP.NET MVC 5、jQuery 2.1.4和Knockout 3.3.0。版本差异有问题吗？
因为
类型
不是ko函数（Observerray）因为类型是一个普通的js变量，所以在呈现视图时它不会更新视图&如果以后通过ajax分配数据的话。将其设置为一个可观察的方式，它将为您执行此操作并使用
（）
convention.@supercool好的，我会尝试一下，但是你能解释一下为什么在上面的链接中，如果你下载了源代码，它就可以加载，而不必使用make-it-as-ko函数（observableArray）这是一个简单的js变量？@Sirwanaffi，它不起作用。你应该显示理解问题所需的最少代码，而不是直接复制与问题有关的所有代码。包括我在内的大多数人都会跳过你的问题。@Willy在链接
phoneTypeData
中用数据（数组）初始化在您的例子中，您只是在视图渲染完成后（您没有现成的可用数据，只有在成功的ajax调用后才可用。此时视图部分以types=null呈现）才分配数据，而不是在.js异步之前。