MVC5 视图和 Kendo 拆分器 - 2 中的内容覆盖 1

Question

TLDR；为什么窗格 2 contentUrl 数据覆盖窗格 1 contentUrl 数据。详情如下。

好的，我们正在接受教育，并试图学习更多基于 Web 的开发，同时开发应用程序的速度太快。使用 MVC 5 和 Telerik (Kendo) 我正在尝试创建一个 spitter，而不是从 4 个不同的局部视图加载。目前我只使用来自 Telerik 网站的 dummy/demo 数据。

页面加载时，会短暂显示@Url.Content("~/Productivity")的内容，然后被@Url.Content("~/QualityControl"的内容替换)，但标题不变。

Productivity 和 QualityControl 都是部分视图，它们由关联的控制器返回并且是 . SpanOfControl 和 Position Control 目前只返回一个 H2 header.

public ActionResult Index() { return View("_ProductivityPartial"); }

public ActionResult Index()
    {
        return View("_QualityControlPartial");
    }

HTML/Javascript 在 index.cshtml

<div id="verticalSplit">
<div id="topHorizontal">
    <div id="top-left">Top Left</div>
    <div id="top-right">Top Right</div>
</div>
<div id="bottomHorizontal">
    <div id="bottom-left">Bottom Left</div>
    <div id="bottom-right">Bottom Right</div>
</div>

<script type="text/javascript">
 $(document).ready(function () {

    $("#verticalSplit").kendoSplitter({
        orientation: "vertical",
        panes: [
            { collapsible: true, expand: true, resize: false },
            { collapsible: true, expand: true, resize: false }
        ]
    });
   $("#topHorizontal").kendoSplitter({
        orientation: "horizontal",
        panes: [
            { contentUrl: "@Url.Content("~/Productivity")" },
            { contentUrl: "@Url.Content("~/QualityControl")" }
        ]
    });
    $("#bottomHorizontal").kendoSplitter({
        orientation: "horizontal",
        panes: [
            { contentUrl: "@Url.Content("~/SpanOfControl")" },
            { contentUrl: "@Url.Content("~/PositionControl")" }
        ]
    });

Answer 1

所以我做了很多挖掘，实际上在 2 小时前找到了答案，但在 Telerik 支持中仍然模糊地提到了它。

由于我使用的是 Telerik UI 对 ASP.NET MVC 稍作修改的演示，因此我忘记更改图表的名称。我决定 post 这个答案，因为我在写这个问题时意识到了这一点。即使它们位于不同的视图和控制器中，当尝试在同一页面上显示它们时，您也可能会遇到我遇到的问题。更令人困惑的是，图表在各自的页面上工作得很好。

因此，如果您想在不同的页面上使用 2 charts/controls，但仍想在同一页面上显示它们（通过 view/grid/pane 等），请确保更改下面的名称。

默认：

Html.Kendo().Chart()
  .Name("chart")

MVC5 视图和 Kendo 拆分器 - 2 中的内容覆盖 1

MVC5 Views and Kendo Splitter - Content in 2 overwrites 1

c#

razor

kendo-ui

asp.net-mvc-5

kendo-splitter