Kendo ui 在剑道UI MVC中，如何使用javascript在窗口中放置选项卡条？

在我的查看页面中，我有一个按钮。当我点击按钮时，我想打开窗口。窗口有一些选项卡条，我想在选项卡条中显示一个网格。剑道UI允许我这么做吗

 @(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Content(@<text>  
 @(Html.Kendo().TabStrip()
      .Name("tabstrip")
      .Items(tabstrip =>
      {
          tabstrip.Add().Text("Paris")
              .Selected(true)
              .Content(@<text>
                <div class="weather">
                    <h2>17<span>&ordm;C</span></h2>
                    <p>Rainy weather in Paris.</p>
                </div>
                <span class="rainy">&nbsp;</span>
              </text>);

          tabstrip.Add().Text("New York")
              .Content(@<text>
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ContactName).Width(140);
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
         .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
         .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
   )
  </text>);
      })
     )
  </text>)
 .Draggable()
 .Resizable()
 .Width(600)
 .Actions(actions => actions.Pin().Minimize().Maximize().Close())
 .Events(ev => ev.Close("onClose"))
  )

@（Html.Kendo（）.Window（））
.名称（“窗口”）
.标题（“关于阿尔瓦·阿尔托”）
.Content（@
@（Html.Kendo（）.TabStrip（））
.名称（“tabstrip”）
.Items（tabstrip=>
{
tabstrip.Add（）.Text（“巴黎”）
.已选择（真）
.内容(@
17º；C
巴黎多雨的天气

);
tabstrip.Add（）.Text（“纽约”）
.内容(@
@（Html.Kendo（）.Grid（））
.名称（“网格”）
.列（列=>
{
columns.Bound（c=>c.ContactName）.Width（140）；
columns.Bound（c=>c.ContactTitle）.Width（190）；
columns.Bound（c=>c.CompanyName）；
columns.Bound（c=>c.Country）.Width（110）；
})
.HtmlAttributes（新的{style=“height:380px；”}）
.Scrollable（）
.Groupable（）
.Sortable（）
.Pageable（Pageable=>Pageable
.刷新（真）
.页面大小（真）
.按钮计数（5））
.DataSource（DataSource=>DataSource
.Ajax（）
.Read（Read=>Read.Action（“客户读取”、“网格”））
)
)
);
})
)
)
.Draggable（）
.可调整大小（）
.宽度（600）
.Actions（Actions=>Actions.Pin（）.Minimize（）.Maximize（）.Close（））
.Events（ev=>ev.Close（“onClose”））
)

对你来说，最好的办法是把它分成一些局部视图，这样你的生活就不那么复杂了

剑道窗口

@(Html.Kendo().Window()
    .Name("window")
    .Title("About Alvar Aalto")
    .Content(@Html.Partial("_TabStrip").ToHtmlString())
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))

)

选项卡条（局部视图）

\u天气（局部视图）

17º；C
巴黎多雨的天气

\u网格（局部视图）

@（Html.Kendo（）.Grid（））
.名称（“网格”）
.列（列=>
{
columns.Bound（c=>c.ContactName）.Width（140）；
columns.Bound（c=>c.ContactTitle）.Width（190）；
columns.Bound（c=>c.CompanyName）；
columns.Bound（c=>c.Country）.Width（110）；
})
.HtmlAttributes（新的{style=“height:380px；”}）
.Scrollable（）
.Groupable（）
.Sortable（）
.Pageable（Pageable=>Pageable
.刷新（真）
.页面大小（真）
.按钮计数（5））
.DataSource（DataSource=>DataSource
.Ajax（）
.Read（Read=>Read.Action（“客户读取”、“网格”））
)
)

---

通过使用局部视图分离内容将使您能够更灵活地使用剑道控件在彼此之间拖动内容，而不必担心获得正确的块。

网格事件和此类事件将定位到各自的局部视图，就像是完整视图一样。局部视图可以将其自己的模型与父视图分开，从而在mvc应用程序中提供更大的灵活性。

Hi，我想知道我是否使用这样的局部视图。“.Content（@Html.Partial（“\u Grid”）.ToHtmlString（）；”，我的网格事件可以工作吗？你能告诉我如何使用javascript编写代码吗？我必须将动态参数传递给tabStrip。我不能用这种格式编写它们：'.Content（@Html.Partial（“\u Weather”）.ToHtmlString（））；'。

@(Html.Kendo().TabStrip()
.Name("tabstrip")
.SelectedIndex(0)
.Items(items =>
    {
        items.Add()
            .Text("Paris")
            .Content(@Html.Partial("_Weather").ToHtmlString());
        items.Add()
            .Text("New York")
            .Content(@Html.Partial("_Grid").ToHtmlString());
    })    
)

 <div class="weather">
     <h2>17<span>&ordm;C</span></h2>
     <p>Rainy weather in Paris.</p>
  </div>
 <span class="rainy">&nbsp;</span>

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
        {
        columns.Bound(c => c.ContactName).Width(140);
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
         .Refresh(true)
         .PageSizes(true)
         .ButtonCount(5))
         .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
        )
   )