带有字典的 DevExtreme 选择选项

Question

我正在尝试使用 Dictionary<string><string> 填充 DevExtreme SelectBox()（或 Lookup()），但我'我得到错误：

未捕获的错误：E4006 - ArrayStore 'data' 选项必须是一个数组。

型号

public string Lang { get; set; }
public Dictionary<string, string> Languages { get; }

...

this.Lang = "es";

this.Languages = new Dictionary<string, string>() { {"en", "English"},  {"ar", "Arabic"},     {"bn", "Bengali"},   {"cs", "Czech"},      {"da", "Danish"},    {"de", "German"},
                                                    {"el", "Greek"},    {"es", "Spanish"},    {"fa", "Persian"},   {"fi", "Finnish"},    {"fil", "Filipino"}, {"fr", "French"},
                                                    {"he", "Hebrew"},   {"hi", "Hindi"},      {"hu", "Hungarian"}, {"id", "Indonesian"}, {"it", "Italian"},   {"ja", "Japanese"},
                                                    {"ko", "Korean"},   {"msa", "Malay"},     {"nl", "Dutch"},     {"no", "Norwegian"},  {"pl", "Polish"},    {"pt", "Portuguese"},
                                                    {"ro", "Romanian"}, {"ru", "Russian"},    {"sv", "Swedish"},   {"th", "Thai"},       {"tr", "Turkish"},   {"uk", "Ukrainian"},
                                                    {"ur", "Urdu"},     {"vi", "Vietnamese"}, {"zh-cn", "Chinese (Simplified)"},         {"zh-tw", "Chinese (Traditional)"} };

查看

@(Html.DevExtreme().Form()
        .ID("form")
        .FormData(Model)
        .ColCount(12)
        .ShowValidationSummary(true)
        .Items(i =>
        {
            i.AddSimple()
            .ColSpan(6)
            .Label(l => l.Visible(false))
            .DataField(Model.Lang.ToString())
            .Editor(ed => ed.SelectBox()
                            .DataSource(Model.Languages)
                            .Placeholder("Language..."));
        }))

我尝试过创建List，它不会返回错误但不会显示任何内容。

型号

public string Lang { get; set; }
public Dictionary<string, string> Languages { get; }
public List<Dictionary<string, string>> List { get; }

...

this.Lang = "es";

this.Languages = new Dictionary<string, string>() { {"en", "English"},  {"ar", "Arabic"},     {"bn", "Bengali"},   {"cs", "Czech"},      {"da", "Danish"},    {"de", "German"},
                                                    {"el", "Greek"},    {"es", "Spanish"},    {"fa", "Persian"},   {"fi", "Finnish"},    {"fil", "Filipino"}, {"fr", "French"},
                                                    {"he", "Hebrew"},   {"hi", "Hindi"},      {"hu", "Hungarian"}, {"id", "Indonesian"}, {"it", "Italian"},   {"ja", "Japanese"},
                                                    {"ko", "Korean"},   {"msa", "Malay"},     {"nl", "Dutch"},     {"no", "Norwegian"},  {"pl", "Polish"},    {"pt", "Portuguese"},
                                                    {"ro", "Romanian"}, {"ru", "Russian"},    {"sv", "Swedish"},   {"th", "Thai"},       {"tr", "Turkish"},   {"uk", "Ukrainian"},
                                                    {"ur", "Urdu"},     {"vi", "Vietnamese"}, {"zh-cn", "Chinese (Simplified)"},         {"zh-tw", "Chinese (Traditional)"} };

this.List = new List<Dictionary<string, string>>() { this.Languages };

查看

@(Html.DevExtreme().Form()
        .ID("form")
        .FormData(Model)
        .ColCount(12)
        .ShowValidationSummary(true)
        .Items(i =>
        {
            i.AddSimple()
            .ColSpan(6)
            .Label(l => l.Visible(false))
            .DataField(Model.Lang.ToString())
            .Editor(ed => ed.SelectBox()
                            .DataSource(Model.List)
                            .Placeholder("Language..."));
        }))

Answer 1

ArrayStore 'data' 选项必须是数组 表示您没有将正确的对象（即数组对象）传递给SelectBox 的数据源（注意Dictionary<string, string> 不能直接转换为dataSource 对象所需的一维数组）。

如果这是 ASP.NET MVC 中的 DevExtreme，您可以尝试为语言列表创建基本模型类，如下所示：

public class Language
{
    public string LangID { get; set; }

    public string LangName { get; set; }
}

请注意，目标视图模型中必须有 List<Language> 属性，例如List<Language> Languages { get; set; }。然后构建语言列表，如下例所示：

控制器动作

this.Lang = "es";

this.Languages = new List<Language>() {
                     new Language { LangID = "en", LangName = "English" },
                     new Language { LangID = "el", LangName = "Greek" },
                     // other language definitions
                 };

// convert to JSON format and return this into view
this.LangArray = JsonConvert.SerializeObject(this.Languages);

查看

@(Html.DevExtreme().Form()
        .ID("form")
        .FormData(Model)
        .ColCount(12)
        .ShowValidationSummary(true)
        .Items(i =>
        {
            i.AddSimple()
            .ColSpan(6)
            .Label(l => l.Visible(false))
            .DataField(Model.Lang.ToString())
            .Editor(ed => ed.SelectBox()
                            .DataSource(Model.LangArray)
                            .DisplayExpr("LangName") // displayed text
                            .ValueExpr("LangID") // selected value for submit
                            .Placeholder("Language..."));
        }))

补充说明：

如果您仍想使用Dictionary，请确保将其转换为符合 JSON 键值对格式的字符串：

public static string ToJsonArray(this Dictionary<string, string> dict)
{
    var kvp = dict.Select(x => string.Format(@"""{0}"":""{1}""", x.Key, string.Concat(",", x.Value)));
    return string.Concat("{", string.Join(",", kvp), "}");
}

// Usage
this.LangArray = this.Languages.ToJsonArray();

参考资料：

DataSource API Reference

SelectBox API Reference

SelectBox Example

Answer 2

好吧，我已经能够使用 Linq 解决这个问题，即时创建 数组：

i.AddSimple()
    .ColSpan(6)
    .Label(l => l.Visible(false))
    .DataField(Model.Lang)
    .Editor(ed => ed.SelectBox()
                    .DataSource(ds => ds.Array().Key("value").Data(Model.Languages.Select(s => new { value = s.Key, text = s.Value })))
                    .Value(Model.Lang)
                    .ValueExpr("value")
                    .DisplayExpr("text")
                    .Placeholder("Language..."));