Fill tabs with Action and handle navigation

[Gaetano]

Hi Guys,
I'm building up a site using mvc (razor) and kendo (plus ef).
I Built all controllers and view and right now they are exactly how Visual studio created them.

so for the first step I tried to put every /entity/Index.cshtml in a different tab

Here my code:

@(Html.Kendo().TabStrip()
         .Name("MainAcsTab")
         .Items(tabstrip =>
         {
             tabstrip.Add().Selected(true).Text(AcsViewRes.TabUser).Content(
                 Html.Action("Index","User").ToString());
             tabstrip.Add().Text(AcsViewRes.TabGroups).Content(
                 Html.Action("Index","Group").ToString());
             tabstrip.Add().Text(AcsViewRes.TabRoles).Content(
                 Html.Action("Index","Role").ToString());
             tabstrip.Add().Text(AcsViewRes.TabFunctions).Content(
                 Html.Action("Index","Function").ToString());
         })
   )

as soon as I run the application I can see the tab, and the first tab content as expected.
However I get an error:

Uncaught TypeError: undefined is not a function - placed here:

jQuery(function(){jQuery("#MainAcsTab").kendoTabStrip({});});

as a consequence of this issue (I suppose) I'm not able to change tab.

Regarding the navigation...
My indexes contains the ul list of all object and a link to edit/detail/delete each object.
If I click on one of this link, say details, the url changes from "localhost/AccessControl/#MainAcsTab-1" to "localhost/AccessControl/User/Details/1" and I loose my tab.

Is there a way to keep every view change inside my currently selected tab?

do I have to link every view as partial?

as a note my _layout and _viewStart are as created by VS

Thank you
Fabio

[Dimiter Madjarov]

Hello Fabio,


The provided sample code seems correct for defining a TabStrip and it's contents. I assume that something else is causing the JavaScript error - probably in some of the rendered MVC actions there is an invocation of a non-existing function. Could you please check to assure if that is the case?

As for the second question, each time a navigation link is clicked in the TabStrip content, it will redirect the browser to the specified page. A possible approach to perform a navigation in the contents of the tab would be to define it in an iframe.
E.g.

tabstrip.Add().Selected(true).Text("first tab").Content(@<text>
    <iframe src="@Url.Action("Index", "Home")" style="width:100%; height: 100%"></iframe>
</text>);

I hope this information helps. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik