DevExtreme - Аккордеон с JSON в качестве источника данных - PullRequest
Новая
       33

DevExtreme - Аккордеон с JSON в качестве источника данных

0 голосов
/ 04 октября 2018

Я пришел из этого поста , пытаясь добиться использования объекта DevExtreme Accordion в Razor.Как объяснено в ответе, я должен сделать частичные представления для вложения шаблонов.

Но я сталкиваюсь с проблемой при обновлении полей в шаблоне Accordion, поскольку его источниками данных является JSON, а он находится в другом файле.

Я получаю сообщение об ошибке:

{"State": - 1, "Msg": "Token PropertyName в состоянии ArrayStart приведет к неверному объекту JSON. Путь" данные ". "," Data ": null}

Мой код:

ConfigureTemplate.cshtml 

@(Html.DevExtreme().Form()
    .ID("form")
    .ColCount(4)
    .ShowValidationSummary(true)
    .Items(items =>
    {
        if (Model.Where(w => w.TagHtml.Equals("div")).Count() > 0)
        {
            items.AddGroup()
                .Caption("Social networks")
                .ColSpan(4)
                .ColCount(12)
                .Items(socialGroup =>
                {
                    foreach (var it in Model.Where(w => w.TagHtml.Equals("div")))
                    {
                        if (it.Style != null && it.Style != string.Empty)
                        {
                            socialGroup.AddSimple()
                                .ColSpan(12)
                                .Template(@<text>@Html.Partial("_TemplateRRSS", socialGroup, new ViewDataDictionary(ViewData) {{"jsonData", it.Style}})</text>);
                        }
                    }
                }
        }
    }

_TemplateRRSS.cshtml 

@model DevExtreme.AspNet.Mvc.Factories.FormItemsFactory

@using Newtonsoft.Json.Linq;

@{
    JObject json = JObject.Parse(ViewData["jsonData"].ToString());
}

@(Html.DevExtreme().Accordion()
    .ID("facebook-accordion")
    .DataSource(json.Properties())
    .AnimationDuration(300)
    .Collapsible(true)
    .Multiple(false)
    .ItemTitleTemplate("Facebook")
    .ItemTemplate(@<text>@Html.Partial("_TemplateRRSSAccordion", Model)</text>)
);

_TemplateRRSSAccordion 

@model DevExtreme.AspNet.Mvc.Factories.FormItemsFactory

@{
    Dictionary<string, object> cssButtons = new Dictionary<string, object> { { "style", "color: white; background-color: #606060; border-radius: 5px; cursor: default; padding: none;" } };
}

<text>
    @(
        Model.AddEmpty();

        Model.AddSimple()
            .ColSpan(3)
            .Template(
                @<text>
                    @(Html.DevExtreme().Button()
                        .Text(@<text><%= Name %></text>)
                        .Width("100%")
                        .ElementAttr(cssButtons)
                        .FocusStateEnabled(false)
                        .ActiveStateEnabled(false)
                        .HoverStateEnabled(false));
                </text>);

        Model.AddSimple()
            .ColSpan(6)
            .Label(l => l.Visible(false))
            .Editor(ed => ed.TextBox()
                            .Value(@<text><%= Value.ToString() %></text>)
                            .ID(@<text><%= Name %></text>)
                            .Placeholder(LocalizationModelSignage.IntroduceTexto));

        Model.AddEmpty();
        Model.AddEmpty();
    )
</text>

Я точно знаю, что данные в порядке, так как этот код работает: 

JObject json = JObject.Parse(it.Style);

foreach (JProperty property in json.Properties())
{
    socialGroup.AddEmpty();

    socialGroup.AddSimple()
        .ColSpan(3)
        .Template(
            @<text>
                @(Html.DevExtreme().Button()
                    .Text(property.Name)
                    .Width("100%")
                    .ElementAttr(cssButtons)
                    .FocusStateEnabled(false)
                    .ActiveStateEnabled(false)
                    .HoverStateEnabled(false))
            </text>);

    socialGroup.AddSimple()
        .ColSpan(6)
        .Label(l => l.Visible(false))
        .Editor(ed => ed.TextBox()
                        .Value(property.Value.ToString())
                        .ID(property.Name)
                        .Placeholder(LocalizationModelSignage.IntroduceTexto));

    socialGroup.AddEmpty();
    socialGroup.AddEmpty();
}
...