在部分视图中具有动态内容的Kendo选项卡
我是ASP.NET MVC的新手。我正面临一个或其他问题，为下面的场景设计布局。有谁能帮我解决这个问题吗?我非常感谢你的帮助。
所需经费如下：
这是一个现有的应用程序。在加载视图时，有一个主视图，并且在已经定义的少数部分视图中。
在其中一个局部视图中，我需要根据需要多次使用相同的布局。这取决于用户需要多少。可能是1或2或更多。我们在UI和现有视图中广泛使用Telerik控件，我们用View强类型Model。
我想使用Kendo控件，并在用户需要时动态添加Tab。此外，布局是完全相同的，所以，想要设计(Html表与许多控件，如文本框，下拉等)。每个选项卡布局为部分视图，以便我可以重用设计。请让我知道这种办法是最好的，还是有更好的办法。
当用户提交主视图时，我需要获取整个数据。每个主部分视图包含，objects部分视图的父视图也包含但未为每个选项卡部分视图定义，因为我需要将数据作为父部分视图模型对象中的一个属性中的对象的集合。
请让我知道如何为每个选项卡设计模型对象(部分视图)以及父部分视图。如果您可以显示一个小的示例代码，这可能是很好的。
下面是设计过程中所面临的问题
- 无法在另一个中添加以获得以下错误
内联标记块(@
内容
)不能嵌套。只允许一个级别的内联标记。
@(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>)))回答 1
Stack Overflow用户
发布于 2017-12-06 03:27:12
由于您使用强类型视图，我建议使用一个元组作为模型。Item1将保存所需的模型详细信息，而Item2将保存所需的选项卡数(它保存选项卡的名称)。
@model Tuple<[Model],List<string>>现在使用动态项(基于模型的Item2)创建一个KendoTab剥控件
@(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++;
}
})
)一旦创建了tab的结构，就需要用相应的内容填充每个选项卡。
在View (父部分视图)本身中，为制表符创建一个就绪函数，并使用JSON序列化对象
$(("KendoTabStrip")).ready(function () {
_TBSModelName = @Html.Raw(JsonConvert.SerializeObject(this.Model.Item1))
TabStripUserControl();
});注意:这是为了防止您需要子部分视图中的Model数据。
创建一个javascript文件并将函数TabStripUserControl()放入其中。此函数将创建内容并将其放置到选项卡中。
function TabStripUserControl()
{
var _LocalTBSModel = _TBSModelName
var items = "#KendoTabStrip" + " .k-tabstrip-items";
$(items).click(function (z) {
}
);
}在函数内部(单击function)，创建一个div，并在使用Javascript/JQuery将其放置到选项卡中之前为其提供一个动态ID。
var div = $("<div/>");使用Ajax调用来调用您的控制器，然后控制器将调用您的Child分部视图(它包含HTML控件)，并在上面创建的div中呈现Ajax调用成功的部分视图。
$.ajax({
url: 'Controller/ActionMethod',
data: JSON.stringify({ Value: "SomeValue" }),
type: 'POST',
contentType: 'application/json;',
async: false,
success: function (data) {
div = data;
}
});希望这能有所帮助。
https://stackoverflow.com/questions/47626767
复制相似问题
腾讯云开发者
