Why isn't my partial view displaying inside a Kendo tab strip?

Question

I have a view with a Kendo Tab. The tab content is a rendered page. That rendered page has a partial view. When I click on a button in that partial view, I want the partial view to change to a different partial view. So far I've only been able to get the first "page" to work correctly, but when I try to return the second "page" it does not appear inside the grid. How can I switch the partial view inside a tab?

To illustrate, I have a view with a Keno tab strip. When you click the contract tab, the view Contracts.cshtml is rendered on that tab. The contracts view initially contains a partial view called ContactsGrid.cshtml. This part is working fine:

Admin.cshtml
------------------------------------------
| ---------------------------------      |
| | Kendo().TabStrip               |     |
| | -------------------------------|     |
| ||Customers||Employees||Contract||     |
| |--------------------------------|     |
| |                                |     |
| | Contracts.cshtml               |     |
| | ----------------------------   |     |
| | |                           |  |     |
| | | ContractsGrid.cshtml      |  |     |
| | | --------------------      |  |     |
| | | |                  |      |  |     |
| | | | <button>         |      |  |     |
| | | |                  |      |  |     |
| | | --------------------      |  |     |
| | |                           |  |     |
| | -----------------------------  |     |
| |                                |     |
| ----------------------------------     |
|                                        |
------------------------------------------

When I click on the button inside ContractsGrid.cshtml, I want the partial view to change from ContractsGrid.cshtml to ContractsEdit.cshtml:

Admin.cshtml
------------------------------------------
| ---------------------------------      |
| | Kendo().TabStrip               |     |
| | -------------------------------|     |
| ||Customers||Employees||Contract||     |
| |--------------------------------|     |
| |                                |     |
| | Contracts.cshtml               |     |
| | ----------------------------   |     |
| | |                           |  |     |
| | | ContractsEdit.cshtml      |  |     |
| | | --------------------      |  |     |
| | | |                  |      |  |     |
| | | |  <button>        |      |  |     |
| | | |                  |      |  |     |
| | | --------------------      |  |     |
| | |                           |  |     |
| | -----------------------------  |     |
| |                                |     |
| ----------------------------------     |
|                                        |
------------------------------------------

Instead, what I'm getting is only Contracts.cshtml with the ContractsEdit.cshtml and I'm losing the tab strip:

| | Contracts.cshtml               |     |
| | ----------------------------   |     |
| | |                           |  |     |
| | | ContractsEdit.cshtml      |  |     |
| | | --------------------      |  |     |
| | | |                  |      |  |     |
| | | |  <button>        |      |  |     |
| | | |                  |      |  |     |
| | | --------------------      |  |     |

How can I change that inner partial view and keep it inside the tab strip?

Here is my code:

Admin.cshtml (I omitted several tabs for brevity)

@{
    ViewBag.Title = "Admin";
}

@model OpenAccess.tblCompany

@using (Html.BeginForm("Admin", "Admin", new {compID = ViewBag.compId}))
{

                    @(Html.Kendo().TabStrip()
                          .Name("AdminTabStrip")
                          .Items(items =>
                          {
                              items.Add()
                                  .Text("Contracts")
                                  .HtmlAttributes(new {@class = "tab"})
                                  .Content(@<text>
                                                @RenderPage("Contracts.cshtml")
                                            </text>)
                                  .LoadContentFrom("Contracts", "Admin", new { customerID = Model.CompID })
                                  .ContentHtmlAttributes(new {@class = "tab-content"});
                          })
                          )
}

ContractsGrid.cshtml

    @model Models.CompanyContacts

    @{
        ViewBag.Title = "ContractsGrid";
    }

    <div>
        Grid
        @{Model.Page = "Grid";} 
        @Html.ActionLink("Edit", "Contracts", Model)
    </div>

ContractsEdit.cshmtl

@model Models.CompanyContacts

@{
    ViewBag.Title = "ContractsEdit";
}

<div>
    Edit
    @{Model.Page = "Grid";} 
    @Html.ActionLink("Grid", "Contracts", Model)
</div>>

AdminController.cs

public ActionResult Contracts(CompanyContacts currentModel)
    {
        if (currentModel == null)
            {
                Models.CompanyContacts companyContacts = new CompanyContacts();

                return PartialView("AdminCustomerContractsGrid", companyContacts);
            }
            else
            {
                switch (currentModel.Page)
                {
                    case "Grid":
                        return PartialView("AdminCustomerContractsGrid", currentModel);
                        break;
                    case "Edit":
                        return PartialView("AdminCustomerContractsEdit", currentModel);
                        break;
                }
            }
        return PartialView("AdminCustomerContractsGrid", currentModel);
    }

Answer 1

This worked for me.

    @(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Items(tabstrip =>
    {
        tabstrip.Add()
            .Text("First Tab")
            .Selected(true)
            .Content(@<text>@Html.Partial("PartialViews/_Main", Model)</text>);

        tabstrip.Add().Text("Second Tab")
            .Content(@<text>@Html.Partial("PartialViews/_Levels", Model)</text>);

        tabstrip.Add().Text("Third Tab")
            .Content(@<text>@Html.Partial("PartialViews/_Assigned", Model)</text>);

    }))