Telerik MVC : Nested Container Controls and Razor @helper

This website is no longer actively supported

Written by John DeVight on 11 May 2011 11:57
Last Updated by John DeVight on 13 Jun 2011 13:37

The Problem

The Telerik MVC "container" controls such as the Splitter, Tab and Window controls have a "Content" property that is used to populate the contents of the container. However, if a "container" control contains content that has another "container" control in it such as the following example:

@{Html.Telerik().Splitter().Name("MainSplitter")
    .Orientation(SplitterOrientation.Vertical)
    .Panes(vPanes =>
    {
        vPanes.Add()
            .Size("50px")
            .Content(
                @<text>
                    Epx Studio
                </text>
            )
        vPanes.Add()
            .Content(
                @<text>
                    @{
                        @Html.Telerik().TabStrip()
                            .Items(tabstrip =>
                            {
                                tabstrip.Add()
                                    .Text("Tab 1")
                                    .Content(
                                        @<text>
                                            @RenderSection("tabOneContents", false);
                                        </text>
                                    );
                            }
                    }
                </text>
            );
    })
    .Render();
}

will give you the following error:

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

The error occurs because the TabStrip is nested in the @<text> tags of the Content property of the Splitter control and the tab within the TabStrip contains a Content property with @<text> tags. The Razor ViewEngine does not support nesting of @<p>, <text> or <div> tags.

The Solution

In situations like the example above where there is a need to have a nested "container" control, the MVC Razor helper function can be used. The helper function is used to define a reusable C# function within a view. Since the helper function is defined in the view, the helper function can be used to output HTML. To use the helper function to resolve the nested container issue, move the HTML for the "child" container control into a helper function and then call the helper function from within the .Contents() property of the "parent" container control.

Taking the example from above, here is how to implement it with a helper function:

@{Html.Telerik().Splitter().Name("MainSplitter")
    .Orientation(SplitterOrientation.Vertical)
    .Panes(vPanes =>
    {
        vPanes.Add()
            .Size("50px")
            .Content(
                @<text>
                    Epx Studio
                </text>
            )
        vPanes.Add()
            .Content(
                @<text>
                    @RenderTabStrip()
                </text>
            );
    })
    .Render();
}

@helper RenderTabStrip()
{
    @{Html.Telerik().TabStrip()
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("Tab 1")
                .Content(
                    @<text>
                        @RenderSection("tabOneContents", false);
                    </text>
                );
        }
    }
}

So that's it! You can now define nested "container" controls as deep as you need to go using the helper function.

References

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License