为什么我的部分视图不显示在Kendo标签条内?

时间:2015-06-26 13:27:43

标签: c# asp.net asp.net-mvc partial-views kendo-tabstrip

我有一个Kendo Tab的视图。选项卡内容是呈现的页面。渲染页面具有局部视图。当我单击该局部视图中的按钮时,我希望局部视图更改为不同的局部视图。到目前为止,我只能获得第一个"页面"工作正常,但当我尝试返回第二个"页面"它不会出现在网格内。如何在选项卡内切换局部视图?

为了说明,我有一个带有基诺标签条的视图。单击“合同”选项卡时,将在该选项卡上呈现视图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>        |      |  |     |
| | | |                  |      |  |     |
| | | --------------------      |  |     |
| | |                           |  |     |
| | -----------------------------  |     |
| |                                |     |
| ----------------------------------     |
|                                        |
------------------------------------------

相反,我得到的只是Contracts.cshtml与ContractsEdit.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);
    }

1 个答案:

答案 0 :(得分:2)

这对我有用。

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

    }))