带字典的DevExtreme选择选项

时间:2018-10-23 08:08:46

标签: c# asp.net-mvc razor devexpress devextreme

我正在尝试使用Dictionary<string><string>填充 DevExtreme SelectBox()(或 Lookup()),但是我遇到错误:

  

未捕获的错误:E4006-ArrayStore的“数据”选项必须为数组。

模型

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..."));
        }))

SelectBox()

2 个答案:

答案 0 :(得分:1)

ArrayStore的“数据”选项必须为数组表示您没有将适当的对象(即数组对象)传递给SelectBox的数据源(请注意{{1} }不能直接转换为Dictionary<string, string>对象所需的一维数组。

如果这是ASP.NET MVC中的DevExtreme,则可以尝试为以下语言列表创建基本模型类:

dataSource

请注意,必须在目标视图模型中拥有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...")); })) ,请确保将其转换为符合JSON键值对格式的字符串

Dictionary

参考文献:

DataSource API Reference

SelectBox API Reference

SelectBox Example

答案 1 :(得分:0)

好吧,我已经能够使用 Linq 解决此问题,并即时创建 array

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..."));