DevExtreme - Accordion inside form with JSON datasource and form objects

问题

I want to use Accordion to show/hide form fields. Those fields are created dynamically with a received JSON.

The problem is that the only way I founded to do this is with templates and I'm getting error:

Error RZ9999: Inline markup blocks (@<p>Content</p>) cannot be nested. Only one level of inline markup is allowed.

@(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>);
                    }
            });
    }
}));

NOTE: I've read about "Named Templates" but, for some unknown reason, I'm not able to use it since Visual Studio cannot find that namespace.

回答1:

Your problem sounds like originated from nested <text> tags, which Razor unable to handle them properly (note that Razor view engine doesn't support nesting of @<text> tag). To make your example become more readable and also solving this issue, you can create @helper directives containing DevExtreme's button and accordion like example below:

@* 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>));
}

And use your DevExtreme form by calling accordion helper:

@(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>);
                }
            });
    }
}));

Note: The @helper directive setup above only works on ASP.NET MVC 5 or before. If you're using ASP.NET Core MVC where @helper directive is not exist, you can create separate partial views for button and accordion, then use either @Html.Partial() or @Html.RenderPartial() helper as mentioned in this issue.

Related issues:

Inline markup blocks (@<p>Content</p>) cannot be nested. Only one level of inline markup is allowed

Inline markup blocks cannot be nested. Only one level of inline markup is allowed. MVC RAZOR

来源：https://stackoverflow.com/questions/52643052/devextreme-accordion-inside-form-with-json-datasource-and-form-objects