Question

我是ASP.NET MVC的新手。我正面临一个或其他问题来设计以下场景的布局。你能帮助我一个解决方案，我一定会感激你的帮助。

要求是：

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

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

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

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

您能告诉我如何为每个标签设计模型对象（部分视图）以及父部分视图。如果你能展示一个小的示例代码，那可能会很好。

以下是设计此问题时遇到的问题

无法在另一个内部添加以获得以下错误

无法嵌套内联标记块（@

内容

@(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面板

@(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的结构后，需要使用相应的内容填充每个选项卡

在视图（父部分视图）本身中，为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) {

}
);
}

在函数内部（单击函数），在使用Javascript / JQuery将其放入选项卡之前，创建一个div并为其提供动态ID。

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;
                }
            });

希望这有帮助。

在部分视图中使用动态内容的Kendo Tabstrip

1 个答案: