C# DevExtreme-带有JSON数据源和表单对象的表单内部手风琴

我想使用Accordion显示/隐藏表单字段。这些字段是使用接收到的JSON动态创建的

问题是，我找到的唯一方法是使用模板，我得到了一个错误：

错误RZ9999:无法嵌套内联标记块（

@Content

）。 只允许一级内联标记

@（Html.DevExtreme（）.Form（））
.ID（“表格”）
.ColCount（4）
.ShowValidationSummary（true）
.项目（项目=>
{
if（Model.Where（w=>w.TagHtml.Equals（“div”））.Count（）>0）
{
items.AddGroup（）
.标题（“社交网络”）
.ColSpan（4）
.ColCount（12）
.项目（社会团体=>
{
if（it.Style！=null&&it.Style！=string.Empty）
{
JObject json=JObject.Parse（it.Style）；
socialGroup.AddSimple（）
.ColSpan（12）
.模板(
@
@（Html.DevExtreme（）.Accordion（））
.ID（“facebook手风琴”）
.DataSource（json.Properties（））
.动画持续时间（300）
.可折叠（真）
.Multiple（假）
.ItemTitleTemplate（“Facebook”）
.ItemTemplate(
@
@（socialGroup.AddEmpty（）；
socialGroup.AddSimple（）
.ColSpan（3）
.模板(
@
@（Html.DevExtreme（）.Button（））
.Text（@）
.宽度（“100%”）
.ElementAttr（cssButtons）
.FocusStateEnabled（错误）
.ActiveStateEnabled（错误）
.hoverstatenabled（false））；
);
socialGroup.AddSimple（）
.ColSpan（6）
.标签（l=>l.可见（假））
.Editor（ed=>ed.TextBox（）
.Value（@）
.ID（@）
.占位符（LocalizationModelSignage.IntroductExto））；
socialGroup.AddEmpty（）；
socialGroup.AddEmpty（）；）
));
);
}
});
}
}));

---

注意：我读过关于“命名模板”的内容，但由于未知原因，我无法使用它，因为Visual Studio找不到该名称空间。

您的问题听起来像是源于嵌套的

标记，Razor无法正确处理它们（请注意，Razor视图引擎不支持嵌套

@

标记）。为了使示例更具可读性并解决此问题，您可以创建包含DevExtreme按钮和accordion的

@helper

指令，如下例所示：

@* 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按钮*@
@助手RenderDXButton（）
{
@（Html.DevExtreme（）.Button（））
.Text（@）
.宽度（“100%”）
.ElementAttr（cssButtons）
.FocusStateEnabled（错误）
.ActiveStateEnabled（错误）
.hoverstatenabled（false））；
}
@帮助器RenderSocialGroup（）
{
@（socialGroup.AddEmpty（）；
socialGroup.AddSimple（）
.ColSpan（3）
.模板(
@
@RenderDXButton（）
);
socialGroup.AddSimple（）
.ColSpan（6）
.标签（l=>l.可见（假））
.Editor（ed=>ed.TextBox（）
.Value（@）
.ID（@）
.占位符（LocalizationModelSignage.IntroductExto））；
socialGroup.AddEmpty（）；
socialGroup.AddEmpty（）；）
}
@*德维斯特雷手风琴*@
@辅助对象RenderDXAccordion（）
{
@（Html.DevExtreme（）.Accordion（））
.ID（“facebook手风琴”）
.DataSource（json.Properties（））
.动画持续时间（300）
.可折叠（真）
.Multiple（假）
.ItemTitleTemplate（“Facebook”）
.ItemTemplate(
@
@RenderSocialGroup（）
));
}

并通过调用手风琴助手使用DevExtreme表单：

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

@（Html.DevExtreme（）.Form（））
.ID（“表格”）
.ColCount（4）
.ShowValidationSummary（true）
.项目（项目=>
{
if（Model.Where（w=>w.TagHtml.Equals（“div”））.Count（）>0）
{
items.AddGroup（）
.标题（“社交网络”）
.ColSpan（4）
.ColCount（12）
.项目（社会团体=>
{
if（it.Style！=null&&it.Style！=string.Empty）
{
JObject json=JObject.Parse（it.Style）；
socialGroup.AddSimple（）
.ColSpan（12）
.模板(
@
@RenderDXAccordion（）
);
}
});
}
}));

注意：上面的

@helper

指令设置仅适用于ASP.NET MVC 5或更早版本。如果您使用的ASP.NET核心MVC中不存在

@helper

指令，则可以创建单独的部分vie

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