Kendo Tabstrip 在局部视图中具有动态内容

Question

我是 ASP.NET MVC 的新手。我在为以下场景设计布局时面临一个或其他问题。你能帮我解决一下吗，我一定会感谢你的帮助。

要求是：

这是一个现有的应用程序。在加载视图时，有一个主视图，并且内部已经定义了几个部分视图。

在其中一个部分视图中，我需要根据需要多次使用相同的布局。这取决于用户需要多少。可以是1个或2个或更多。我们在 UI 中广泛使用 Telerik Kendo 控件，在现有视图中，我们使用视图强类型化模型对象。

我想使用 Kendo Tabstrips 控件并在用户需要时动态添加 Tab。此外，布局完全相同，因此，想设计（具有许多控件的 Html 表格，如文本框、下拉列表等）每个选项卡布局为部分视图，以便我可以重用设计。请让我知道这种方法是最好的还是有更好的方法可用。

当用户提交主视图时，我需要获取整个数据。每个主要的局部视图都包含，并且 Tabstrips 局部视图的父级还包含一个但未为每个选项卡条局部视图定义的，因为我需要数据作为父级局部视图模型对象中的一个属性中的对象集合。

您能否告诉我如何为每个选项卡（部分视图）以及父部分视图设计模型对象。如果你能展示一个小示例代码，那就太好了。

以下是在设计过程中遇到的问题

1. 无法在另一个内部添加，因为低于错误

内联标记块（@

内容

) 不能嵌套。只允许一级内联标记。

@(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb =>    pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(@<text>
<form id="frm_@(panelName)" onsubmit="DisableEvent(event)">
<div style="width:100%; height:auto;">
    <button class="k-button">Add new PCG</button>
    @(Html.Kendo().TabStrip()
    .Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
   .Items(items =>
   {
       items.Add()
           .Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
           .Encoded(false)
           .Selected(true)
           .HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
           //.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
           .Content(@<text>@(Html.Partial("_PCGTab"))</text>);
   })
    )
</div>
</form>
</text>)))

2.然后改变设计如下图。在父视图中定义局部视图

@helper RenderPCGTab()
{

<div style="width:100%; height:auto;">
    <button class="k-button">Add new PCG</button>
    @(Html.Kendo().TabStrip()
    .Name("TabPCG").HtmlAttributes(new { style = "width:100%;" })
   .Items(items =>
   {
       items.Add()
           .Text("PCG 1 <button data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
           .Encoded(false)
           .Selected(true)
           .HtmlAttributes(new { style = "width:12%", id = "tabPCG1" })
           //.LoadContentFrom("_PCGTab", "Home", new { tabId ="tab1"});
           .Content(@<text>@(Html.Partial("_PCGTab"))</text>);
   })
    )
</div>

}

并设计了 Kendo 面板，如下所示 Parent Partial View

@(Html.Kendo().PanelBar().Name("panelBar_" + panelName).Items(pb => pb.Add().Text("PCG").Expanded(Expanded).Selected(true)
.Content(@<text>
 <form id="frm_@(panelName)" onsubmit="DisableEvent(event)">
 @RenderPCGTab()
</form>
</text>)))

Answer 1

由于您使用强类型视图，我建议使用元组作为模型。 Item1 将保存所需的模型详细信息，而 Item2 将保存所需数量的选项卡（它保存选项卡的名称）。

@model Tuple<[Model],List<string>>

现在创建一个带有动态项目的 Kendo Tabstrip 控件（基于模型的 Item2）

 @(Html.Kendo().TabStrip()
      .Name("KendoTabStrip")                //You need to dynamically change the name by appending a unique parameter in case you need multiple Tabstrips
      .Animation(animation =>
          animation.Open(effect =>
              effect.Fade(FadeDirection.In)))
      .Items(tabstrip =>
      {
          var TabItemIndex = 0;
          foreach (var TabItem in Model.Item2)
          {
              tabstrip.Add().Text(TabItem)
             .Selected(false)
             .HtmlAttributes(new { id = "TabStripButton" + TabItem + "_" + TabItemIndex, title = TabItem})    //Generate a dynamic ID for each Tab
             .Content(" ");
              TabItemIndex++;
          }
      })
        )

一旦你创建了 Tabstrip 的结构，你需要用它对应的内容填充每个选项卡

在View（Parent Partial View）本身中，为tabstrip创建Ready函数，并使用JSON序列化对象

$(("KendoTabStrip")).ready(function () {
    _TBSModelName = @Html.Raw(JsonConvert.SerializeObject(this.Model.Item1))
    TabStripUserControl();
});

注意：这是在您的子部分视图中需要模型数据的情况下。

创建一个 javascript 文件并将函数 TabStripUserControl() 放入其中。此功能将创建您的内容并将其放入选项卡中。

function TabStripUserControl()
{
var _LocalTBSModel = _TBSModelName
var items = "#KendoTabStrip" + " .k-tabstrip-items";
$(items).click(function (z) {

}
);
}

在函数（点击函数）内部，创建一个 div 并为其提供一个动态 ID，然后使用 Javascript/JQuery 将其放置在选项卡中。

var div = $("<div/>");

使用 Ajax 调用来调用您的控制器，然后控制器将调用您的子部分视图（其中包含 HTML 控件）并在 Ajax 调用成功时在上面创建的 div 中呈现部分视图。

            $.ajax({
                url: 'Controller/ActionMethod',
                data: JSON.stringify({ Value: "SomeValue" }),
                type: 'POST',
                contentType: 'application/json;',
                async: false,
                success: function (data) {
                    div = data;
                }
            });

希望这会有所帮助。