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表单：

@(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()助手，如this issue。

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

1 个答案: