[英]MVC View, adding dynamically html code to divs
嗨,我有一个包含两列(divs)的视图,我想在图表中添加一些divs到这些列。 我不知道我将拥有多少这些图表,以及它们应该在运行之前应移至哪一列。
是否可以根据某些条件交替添加到列?
<div class="column column-small">
@foreach (String c in Model.getSettings().chartsList)
{
<div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
<div class="handle"><div class="close"></div></div>
@Html.Action(c, "Report")
</div>
}
</div>
<div class="column column-big">
</div>
目前,此代码有效,并且正在将每个图表添加到第一列(#column-small)中,如何编辑此代码以例如将第二个图表添加到第一列,并将其余图表添加到第二列?
非常感谢
只是一个例子! 这样的事情可能会起作用。
var i = 0;
@foreach (String c in Model.getSettings().chartsList)
{
<div class="column column-small">
@if(i%2 == 0){
<div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
<div class="handle"><div class="close"></div></div>
@Html.Action(c, "Report")
</div>
}
</div>
<div class="column column-big">
@if(i%2 != 0)
{
//Add the other charts here.
}
</div>
i++;
}
您需要注意语法。
您可以这样操作(我尚未测试过):
@{
var list = Model.getSettings().chartsList;
}
<div class="column column-small">
@for(int i = 0; i < list.Count; i += 2)
{
<div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
<div class="handle"><div class="close"></div></div>
@Html.Action(list[i], "Report")
</div>
}
</div>
<div class="column column-big">
@for(int i = 1; i < list.Count; i += 2)
{
<div class="drag-box white-box chart-box" onmouseup="refreshAfterDrop()">
<div class="handle"><div class="close"></div></div>
@Html.Action(list[i], "Report")
</div>
}
</div>
这是一个示例快照,我在其中向div添加了示例数据。 以下是示例Razor视图代码
@{
ViewBag.Title = "Home Page";
List<string> testList = new List<string>();
for (int i = 0; i < 10; i++)
{
testList.Add("Item" + i + "in div");
}
var cnt = 0;
}
<style>
.column
{
width: 400px;
}
.column-left
{
float: left;
}
.column-right
{
float: right;
}
</style>
@foreach (var t in testList)
{
<div class="column column-left">
@if (cnt % 2 == 0)
{
<div>
@t
</div>
}
</div>
<div class="column column-right">
@if (cnt % 2 != 0)
{
<div>
@t
</div>
}
</div>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.