Getting error on RenderSection inside Kendo Tabstrip content

[Intelligent]

Hi, Recently I started migrating a .Net MVC project with Kendo to .Net Core MVC. Most of the things went smooth but I'm badly stuck on one thing.

Below is my code where I have a Kendo tabstrip that has three tabs. The last two has Html.Partial in their Content which is working fine. The First one has @RenderSection("HomeTab", false) which I can't get to work. Doesn't RenderSection work with .Net Core MVC?

I have tried removing all of my code and tried just adding a test div inside this section but nothing works. If I move the content of my HomeTab section to another view and try Html.Partial it works but RenderSection doesn't. The tabstrip is inside a Layout page and the content of the HomeTab section is in a different view that also have other sections that are rendering completely fine. I'm badly stuck in this and need help please.

section id="main" class="PageSection">
            @(Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Events(events => events
            .Select("onTabSelected")
            .Activate("onTabActivated")
            .ContentLoad("onTabContentLoaded")
            .Error("onTabError")
        )
        .Animation(animation =>
        {animation.Enable(false);})
        .Items(tabstrip =>
        {
            if (!ViewBag.isOffline)
            {
                tabstrip.Add().Text("Home")
                .HtmlAttributes(new { id = "hometabid" })
                .Selected(true)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
                .Content(@<text>
                            @RenderSection("HomeTab", false)
                        </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
            tabstrip.Add().Text("Lead Search")
                .HtmlAttributes(new { id = "LeadSearchtabid" })
                .Selected((bool)ViewBag.isOffline).ContentHtmlAttributes(new { @style = "overflow: auto;" })
                .ImageUrl(Url.Content("~/Content/Images/search-lead-icon.png")).ImageHtmlAttributes(new { id = "leadsearchtabimgid" })
                .Content(@<text>
                    @Html.Partial("LeadSearching")
                </text>);
           if (ViewBag.isOffline)
            {
                tabstrip.Add().Text("VoiceMail")
                .HtmlAttributes(new { id = "vmtabid" })
                .Selected(false)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
               .Content(@<text>
                            @Html.Partial("VoiceMail")
                </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
        }))
            @RenderBody()
            <div id="dvNotification"></div>
        </section>

[Aleksandar]

Hi,

A possible approach would be to use the .Render() method to wrap the component declaration in a non-rendering code block with @{} instead of @(). Here is an example:

@{
      Html.Kendo().TabStrip()
        .Name("tabstrip")
        .Events(events => events
            .Select("onTabSelected")
            .Activate("onTabActivated")
            .ContentLoad("onTabContentLoaded")
            .Error("onTabError")
        )
        .Animation(animation =>
        {animation.Enable(false);})
        .Items(tabstrip =>
        {
            if (!ViewBag.isOffline)
            {
                tabstrip.Add().Text("Home")
                .HtmlAttributes(new { id = "hometabid" })
                .Selected(true)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
                .Content(@<text>
                            @RenderSection("HomeTab", false)
                        </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
            tabstrip.Add().Text("Lead Search")
                .HtmlAttributes(new { id = "LeadSearchtabid" })
                .Selected((bool)ViewBag.isOffline).ContentHtmlAttributes(new { @style = "overflow: auto;" })
                .ImageUrl(Url.Content("~/Content/Images/search-lead-icon.png")).ImageHtmlAttributes(new { id = "leadsearchtabimgid" })
                .Content(@<text>
                    @Html.Partial("LeadSearching")
                </text>);
           if (ViewBag.isOffline)
            {
                tabstrip.Add().Text("VoiceMail")
                .HtmlAttributes(new { id = "vmtabid" })
                .Selected(false)
                .ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
               .Content(@<text>
                            @Html.Partial("VoiceMail")
                </text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
            }
        }).Render();
}

Here is a screencast demonstrating this.

I hope this helps.

Regards,
Aleksandar
Progress Telerik