Question

以下是我正在尝试更新的UI部分：

<label>Country</label>
<select name="country" data-bind="options: $parent.CountryList, optionsCaption: '- Select -'"></select>

正如您所看到的，我尝试了$parent.CountryList，因为我希望这会引用后面代码中的CountryList。以下是Page_Load函数的片段，我将数据库中的数据存储到国家/地区列表中：

using (CCGEntities db = new CCGEntities())
{
   List<Country> CountryList = db.Countries.ToList();
}

目标是获取国家/地区列表并让他们将select元素填充为下拉菜单。我尝试模仿asp:DropDownList的绑定，但后面的代码没有选择select元素的ID属性。我会更好地使用asp:DropDownList吗？

Answer 1

这不是你必须在ASP.NET中做的。您必须创建ViewModel并使用ko.applybindings(viewModel, YOUR_HTML_ELEMENT_ROOT)绑定它们。为此，模型应该：

a）由服务器在运行时序列化并转储到javascript变量

或b）使用javascript动态获取，然后应用绑定

如何使用Entity Framework，ASP.NET和Knockout实现此目标的完整示例是available here。

Answer 2

使用knockout.js的下拉列表人群起初看起来有点棘手。我已经实现了一个淘汰赛活页夹，以使这更容易：

ko.extenders.autoOptions = function (target, type) {
    target["Options"] = [];
    console.log("getting options for type: " + type);
    target.Options = ApplicationGateway.getOptions([ApplicationName.Api.Options]+type);
    return target;
};

此粘合剂可以在您的javascript模型中以下列方式使用：

self.Gender = ko.observable().extend({ autoOptions: 'GENDER', required: { message: 'Gender is required' } });

导致以下模板使用：

<select data-bind="options: Gender.Options,
     value: Gender,optionsText: 'Text',optionsValue: 'Value'">
</select>

我的Asp.Net Web API选项控制器如下所示：

public class OptionsController : ApiController
{
    private ResourceManager _resourceManager;
    private CultureInfo _cultureInfo;

    [HttpGet]
    [Route("api/Options/{type}")]
    public List<ListItem> List(string type)
    {
        _resourceManager = new ResourceManager("Application.Resources.RESOURCE", typeof(APPLICATION).Assembly);
        _cultureInfo = new CultureInfo(Application.CurrentSession.User.LanguageSelected);

        switch (type.ToUpper())
        {
            case "GENDER": return Gender();
            ...
        }
        return new List<ListItem>();
    }

    private List<ListItem> Gender()
    {

        var items = new List<ListItem>
        {
            new ListItem(_resourceManager.GetString("Label_Gender_Male", _cultureInfo),Domain.Enums.Gender.Male.ToString()),
            new ListItem(_resourceManager.GetString("Label_Gender_Female", _cultureInfo), Domain.Enums.Gender.Female.ToString()),
        };

        return items;

    }
}

如何使用knockout.js将我的C＃代码中的数据绑定到前端的select元素？

2 个答案: