为什么我的局部视图没有显示在 Kendo 选项卡条内？

Question

我有一个带有剑道标签的视图。选项卡内容是呈现的页面。该呈现的页面具有部分视图。当我单击该局部视图中的按钮时，我希望局部视图更改为不同的局部视图。到目前为止，我只能让第一个“页面”正常工作，但是当我尝试返回第二个“页面”时，它不会出现在网格内。如何在选项卡内切换局部视图？

为了说明，我有一个带有基诺标签条的视图。单击合同选项卡时，会在该选项卡上呈现视图 Contracts.cshtml。合同视图最初包含一个名为 ContactsGrid.cshtml 的局部视图。这部分工作正常：

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

当我单击 ContractsGrid.cshtml 中的按钮时，我希望局部视图从 ContractsGrid.cshtml 更改为 ContractsEdit.cshtml：

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

相反，我得到的只是带有 ContractsEdit.cshtml 的 Contracts.cshtml，而且我正在丢失标签条：

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

如何更改内部局部视图并将其保留在选项卡条内？

这是我的代码：

Admin.cshtml（为简洁起见，我省略了几个选项卡）

@{
    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

这对我有用。

    @(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>);

    }))