我正在使用jQuery Ajax从服务器加载数据，然后使用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>
...
}
查看：_Liquidation.cshtml
...
<div class="tab-content">
...
<div class="tab-pane" id="pnlStage2Steps28_29">
@{ Html.RenderPartial("~/Views/Liquidation/_Stage2Steps28_29.cshtml", Model); }
</div>
...
</div>
查看：_Stage2Steps28_29.cshtml
...
<div class="panel panel-primary">
<div class="panel-body" id="pnlAccountStatement">
@{ Html.RenderPartial("~/Views/AccountStatement/_AccountStatement.cshtml"); }
</div>
</div>
...
查看：_AccountStatement.cshtml
<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>
Javascript：account-statement.js
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);
});
});
当我看到控制台时：
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
public JsonResult GetTypes()
{
List<SelectListItem> types = new List<SelectListItem>
{
new SelectListItem
{
Text = "Receipts",
Value = "Receipts"
},
new SelectListItem
{
Text = "Payment",
Value = "Payment"
}
};
}
我可以使用SelectListItem而不是创建视图模型吗？我尝试创建AccountStatementTypeViewModel.cs并替换SelectListItem。
AccountStatementTypeViewModel.cs
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);
}
更新 _AccountStatement.cshtml
中的选择标记<select class="form-control"
data-bind="options: Types, optionsValue: 'Type', optionsText: 'Description', value: Type"></select>
但结果相同，它无法绑定到DropDownList值。
我已按照此site中的代码下载源代码，并查看代码如何填写“电话类型”下拉列表。本教程使用ASP.NET MVC 4，jQuery 1.8.3和Knockout 2.2.0，但我使用的是ASP.NET MVC 5，jQuery 2.1.4和Knockout 3.3.0。版本差异有问题吗？