DevExtreme - Аккордеон внутри формы с источником данных JSON и объектами формы

Question

Я хочу использовать Аккордеон, чтобы показать / скрыть поля формы.Эти поля создаются динамически с полученным JSON.

Проблема в том, что единственный способ, которым я нашел это, - это шаблоны, и я получаю сообщение об ошибке:

Ошибка RZ9999:Встроенные блоки разметки (@<p>Content</p>) не могут быть вложенными.Разрешается только один уровень встроенной разметки.

@(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 =>
            {
                if (it.Style != null && it.Style != string.Empty)
                {
                    JObject json = JObject.Parse(it.Style);

                    socialGroup.AddSimple()
                        .ColSpan(12)
                        .Template(
                            @<text>
                                @(Html.DevExtreme().Accordion()
                                    .ID("facebook-accordion")
                                    .DataSource(json.Properties())
                                    .AnimationDuration(300)
                                    .Collapsible(true)
                                    .Multiple(false)
                                    .ItemTitleTemplate("Facebook")
                                    .ItemTemplate(
                                        @<text>
                                            @(socialGroup.AddEmpty();

                                            socialGroup.AddSimple()
                                            .ColSpan(3)
                                            .Template(
                                                @<text>
                                                    @(Html.DevExtreme().Button()
                                                        .Text(@<text><%= Name %></text>)
                                                        .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(@<text><%= Value.ToString() %></text>)
                                                    .ID(@<text><%= Name %></text>)
                                                    .Placeholder(LocalizationModelSignage.IntroduceTexto));

                                            socialGroup.AddEmpty();
                                            socialGroup.AddEmpty();)
                                        </text>));
                            </text>);
                    }
            });
    }
}));

ПРИМЕЧАНИЕ : я читал о «именованных шаблонах», но по неизвестной причине не могуиспользовать его, поскольку Visual Studio не может найти это пространство имен.

Answer 1

Ваша проблема звучит так, как будто она возникла из вложенных тегов <text>, которые Razor не может правильно обработать (обратите внимание, что механизм просмотра Razor не поддерживает вложение тега @<text>).Чтобы сделать ваш пример более читабельным, а также решить эту проблему, вы можете создать директивы @helper, содержащие кнопку и аккордеон DevExtreme, как в примере ниже:

@* DevExtreme Button *@
@helper RenderDXButton()
{
    @(Html.DevExtreme().Button()
                     .Text(@<text><%= Name %></text>)
                     .Width("100%")
                     .ElementAttr(cssButtons)
                     .FocusStateEnabled(false)
                     .ActiveStateEnabled(false)
                     .HoverStateEnabled(false));
}

@helper RenderSocialGroup()
{
    @(socialGroup.AddEmpty();

      socialGroup.AddSimple()
      .ColSpan(3)
      .Template(
      @<text>
          @RenderDXButton()
       </text>);

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

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

@* DevExtreme Accordion *@
@helper RenderDXAccordion()
{
    @(Html.DevExtreme().Accordion()
    .ID("facebook-accordion")
    .DataSource(json.Properties())
    .AnimationDuration(300)
    .Collapsible(true)
    .Multiple(false)
    .ItemTitleTemplate("Facebook")
    .ItemTemplate(
    @<text>
        @RenderSocialGroup()
     </text>));
}

И использовать свою форму DevExtreme, вызвав вспомогательный метод accordion:

@(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 =>
            {
                if (it.Style != null && it.Style != string.Empty)
                {
                    JObject json = JObject.Parse(it.Style);

                    socialGroup.AddSimple()
                        .ColSpan(12)
                        .Template(
                            @<text>
                               @RenderDXAccordion()
                            </text>);
                }
            });
    }
}));

Примечание: Указанная выше директива @helper работает только в ASP.NET MVC 5 или более ранней версии.Если вы используете ASP.NET Core MVC, где директива @helper не существует, вы можете создать отдельные частичные представления для кнопки и аккордеона, а затем использовать помощник @Html.Partial() или @Html.RenderPartial(), как упомянуто в этой проблеме .

Проблемы, связанные с данной:

Блоки встроенной разметки (@

Content

) не могут быть вложенными.Разрешается только один уровень встроенной разметки

Блоки встроенной разметки не могут быть вложенными.Разрешается только один уровень встроенной разметки.MVC RAZOR