在正确的位置渲染局部视图

Question

Trying to: Place a partial view within a telerik tabstrip.

Problem: The view is being displayed above the tab strip instead of within the first tab.

What I have tried: If I use RenderPage instead of RenderAction then the view correctly appears inside the tabstrip however then the controller does not get called or load the model for the gridview.

Code so far:

Partial View:

@model IEnumerable<MyModel>

@{
    ViewBag.Title = "Index";
}

@*My code to load a GridView*@

View containing tab strip:

@{
    ViewBag.Title = "MyView";
}


@(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Index")
                  .Selected(true)
                  .Content(@<text>
                    @{Html.RenderAction("Index", "MyController");}
                </text>);
              tabstrip.Add().Text("Index2")
                  .Content(@<text>
                </text>);                                 
          })
)

Answer 1

The Content configuration method of a Kendo UI TabStrip should be used for "static" content. By static I mean code that you already have/know. For loading partial views it is best to use the LoadContentFrom configuration method. This method requires a valid URL of an existing Action, which returns the targeted partial view:

@(Html.Kendo().TabStrip()
      .Name("tabstrip")
      .Items(tabstrip =>
      {
          tabstrip.Add().Text("Index")
              .Selected(true)
              .LoadContentFrom(Html.Action("Index", "MyController"));
          tabstrip.Add().Text("Index2")
              .Content(@<text>
            </text>);                                 
      })

)