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

【问题标题】：DevExtreme - Accordion inside form with JSON datasource and form objectsDevExtreme - 带有 JSON 数据源和表单对象的手风琴内部表单
【发布时间】：2018-10-04 09:09:49
【问题描述】：

我想使用 Accordion 来显示/隐藏表单域。这些字段是使用接收到的 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 找不到该命名空间。

【问题讨论】：

您使用的是标准 MVC 还是核心 MVC？我发现@helper 指令可以解决您在标准 MVC 中的问题，但不能在 Core MVC 中解决，因为该帮助器已被删除。
我正在使用 Core MVC，所以@helper 不会采用这种方法。我在 DevExtreme 论坛上问过，他们回答说“命名模板”已在 17.2 版中添加，这不是我正在使用的。
然后您可以为按钮和手风琴设置单独的局部视图，并使用@Html.Partial/@Html.RenderPartial 或使用答案部分中链接参考中提到的模板来调用它。

标签： c# razor devexpress devextreme

【解决方案1】：

您的问题听起来像是源自嵌套的 <text> 标记，Razor 无法正确处理它们（请注意，Razor 视图引擎不支持 @<text> 标记的嵌套）。为了使您的示例更具可读性并解决此问题，您可以创建包含 DevExtreme 按钮和手风琴的 @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 表单：

@(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 或更早版本。如果您使用的是不存在 @helper 指令的 ASP.NET Core MVC，您可以为按钮和手风琴创建单独的局部视图，然后使用 @Html.Partial() 或 @Html.RenderPartial() 帮助器，如 this issue 中所述。