谁能帮我,这两天让我感到困惑。我是Knockoutjs / viewmodel的新手。我想了解如何将数据绑定到下拉列表。下拉值需要通过API从数据库中提取,具体取决于在另一个字段中输入的值(这基本上是API返回下拉值的输入参数)。返回数据的API如下所示
[HttpPost]
public JsonResult GetGInfo(string sNumber)
{
try
{
DSRepository dsr = new DSRepository();
List<String> gTypeList = dsr.GetDDInfo(sNumber);
if (gTypeList != null)
return Json(gTypeList);
else
return null;
}
catch (Exception e)
{
return null;
}}
以下是两个字段
// this value should be passed in to the API to retrieve the dropdown list
self.sNumber= ko.observable().extend({ required: { params: true, message: "Required!" } });
//Dropdown list field
self.gType= ko.observable().extend({ required: true });
//function for making a call to the API
self.getGTypes = function (data, event) {
$.ajax({
url: '/REQ/GetGInfo',
type: 'POST',
data: {
sNumber: self.sNumber()
},
success: function (response) {
if (response.length < 1)
console.log("Record retrieved successfully");
},
error: function (errorThrown) {
console.log("Error retrieving the record");
}
})
};
UI如下所示
<div class="form-group required">
<label for="SNumber" class="control-label">SNumber:</label>
<input type="number" id="SNumber" class="form-control" data-bind="event: {change: getGTypes}, value: sNumber">
</div>
<div class="form-group required">
<label for="GType" class="control-label">GType</label>
<select id="GType" name="GType" class="form-control" data-bind="options: getGTypes, value: gType, optionsCaption: 'Select'"></select>
</div>
</div>
因此,当在SNumber字段中输入值时,即getGenoTypes
会调用,我看到通过调试从API返回了数据,对于我输入的数字,我看到了下面的数据gTypeList
是从API返回的
但是在下拉菜单中我什么也没看到
请帮助我,我在这里完全失踪了是什么
你实际上需要在视图模型上保存从API收到的下拉值。你不能仅仅执行API调用并期望Knockout神奇地理解它需要使用(异步)响应数据来填充选择列表。
因此,基本上,你需要执行以下操作:
// this value should be passed in to the API to retrieve the dropdown list
self.sNumber = ko.observable().extend({ required: { params: true, message: "Required!" } });
//Dropdown list field
self.gType = ko.observable().extend({ required: true });
// Dropdown list values
self.gTypes = ko.observableArray();
//function for making a call to the API
self.getGTypes = function (data, event) {
$.ajax({
url: '/REQ/GetGInfo',
type: 'POST',
data: {
sNumber: self.sNumber()
},
success: function (response) {
self.gTypes(response);
},
error: function (errorThrown) {
console.log("Error retrieving the record");
}
})
};
<select id="GType" name="GType" class="form-control" data-bind="
options: gTypes,
value: gType,
optionsCaption: 'Select'"></select>
请注意,我不知道它是什么response
样子,所以这可能不是100%正确的,但我希望你对它有所了解。
多谢了,这两天我一直受不了。没意识到我想念这样的东西或想要存储响应