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

I am new to ASP.NET MVC. I am facing one or other issues to design the layout for below scenario. Could you someone help me with a solution and I will definitely appreciate your help.

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

The requirement is:

要求是:

This is an existing application. While loading view there is a Master View and inside few partial views already defined.

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

In one of the Partial view, I need to have a same layout multiple times on demand. It is depends on the user how many required. may be 1 or 2 or more. We are using Telerik Kendo controls extensively in our UI and in existing View we strongly typed Model object with View.

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

I would like to go with Kendo Tabstrips control and add Tab dynamically when required by the user. Also, the layout is exactly same, So, would like to design (Html table with many controls like textbox, dropdown etc.) each tab layout as Partial View so that I can reuse the design. Please let me know whether this approach is best or any better approach is available.

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

I need to get the entire data when the user Submit the master view . Each main partial View contains and the parent of the Tabstrips Partial view also contains a but not defined for each tabstrip partial view as I need data as collection of objects in one of the property in Parent Partial View Model Object.

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

Can you please let me know how to design model object for each tabs(Partial View) as well as Parent Partial View. it could be good, if you could show a small example code.

您能告诉我如何为每个选项卡(部分视图)以及父部分视图设计模型对象。如果你能展示一个小的示例代码,它可能会很好。

The below are the issues faced during designing this

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

1. Unable to add inside another as getting below error

无法在另一个内部添加为低于错误

Inline markup blocks (@

内联标记块(@

Content

) cannot be nested. Only one level of inline markup is allowed.

@(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.Then Changed the design as shown below. defined partial view in Parent View

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>

}

and designed Kendo panel as shown below the Parent Partial View

并设计了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>)))

1 个解决方案

#1

Since you use a strongly typed View, I would recommend using a Tuple as the model. The Item1 would hold the required model details, while Item2 would hold the required number of tabs (it holds the names of the tabs).

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

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

Now create a Kendo Tabstrip control, with dynamic items (based on model's Item2)

现在用动态项创建一个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++;
          }
      })
        )

Once you have created the structure of the Tabstrip, you need to populate each tab with its corresponding content

创建Tabstrip的结构后,需要使用相应的内容填充每个选项卡

In the View (Parent Partial View) itself, create a Ready function for the tabstrip and serialize the object using JSON

在View(父部分视图)本身中,为tabstrip创建Ready函数并使用JSON序列化对象

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

Note: This is in case you need the Model Data in your child partial view.

注意:如果您需要子部分视图中的模型数据。

Create a javascript file and place the function TabStripUserControl() in it. This function will create your content and place it into the tab.

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

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

}
);
}

Inside the function (click function), create a div and provide a dynamic ID for the same before placing it inside the tab using Javascript/JQuery.

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

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

Use Ajax call to call your controller, which in turn will call your Child Partial View (which contains HTML controls) and render the partial view inside the above created div on Ajax call's success.

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

Hope this helps.

希望这可以帮助。