How to iterate tile and its template for a group tile in MVC?
You can render group tile with template values from model by iterating the items. Refer to the following steps.
Initially, create a model file with necessary values used for rendering the tile with template feature. Following code example demonstrates the same.
template.cs
public class Template
{
public int primarykey { get; set; }
public string name { get; set; }
public string className { get; set; }
public string designation { get; set; }
public string about { get; set; }
}
public static class TemplateModal
{
public static List<Template> TempSource = new List<Template>();
public static List<Template> setTempSource()
{
TempSource.Add(new Template { primarykey = 1, name = "Brook", className = "image-brook", designation = "HR Assistant", about = "Brooke provides administrative support to the HR office." });
TempSource.Add(new Template { primarykey = 2, name = "Andy", className = "image-andy", designation = "HR Manager", about = "Andy is responsible for strategic HR planning and budget." });
TempSource.Add(new Template { primarykey = 3, name = "Lisa", className = "image-lisa", designation = "Training Specialist", about = "Lisa notifies attendees and manages follow up." });
TempSource.Add(new Template { primarykey = 4, name = "Melina", className = "image-melina", designation = "Development Manager", about = "Melina maintains training plans to achive workforce skill." });
TempSource.Add(new Template { primarykey = 5, name = "John", className = "image-john", designation = "Recruitment Manager", about = "John manages recruitment and prepares key staffing metrics." });
TempSource.Add(new Template { primarykey = 6, name = "Sam", className = "image-sam", designation = "HR Assistant", about = "Sam provides administrative support to the HR office." });
TempSource.Add(new Template { primarykey = 7, name = "Rahul", className = "image-rahul", designation = "HR Manager", about = "Rahul is responsible for strategic HR planning and budget." });
TempSource.Add(new Template { primarykey = 8, name = "Antony", className = "image-antony", designation = "Training Specialist", about = "Antony notifies attendees and manages follow up." });
TempSource.Add(new Template { primarykey = 9, name = "Claire", className = "image-claire", designation = "Development Manager", about = "Claire maintains training plans to achive workforce skill." });
return TempSource;
}
public static void clearSource()
{
TempSource.Clear();
}
}
Then, pass the model from controller to view in a corresponding view action.
TileViewController.cs
public ActionResult Index()
{
//returns View();
TemplateModal.clearSource();
return View(TemplateModal.setTempSource());
}
Iterate templates from the model by using the following code example.
index.cshtml
@{
foreach (var item in Model)
{
var id = "template" + @item.primarykey;
<div id= @id class="cont-bg">
<div class=@item.className>
</div>
<div class="listrightdiv">
<span class="templatetext">@item.name</span> <span class="designationstyle">@item.designation</span>
<div class="aboutstyle">
@item.about
</div>
</div>
</div>
}
}
Once the template element is rendered, you can create a group tile by iterating the items in Model. Then, create parent element with class group to make a group tile. After then, inside a loop, wrap your tile with div that contains class column for every third iteration. In this scenario, 3*3 group tile is used.
index.cshtml
<div class="group">
@{
foreach (var item in Model)
{
if (Model.IndexOf(item) %3 == 0)
{
@:<div class="column">
}
@Html.EJ().Tile("tile" + item.primarykey).ShowText(false).ImageTemplateId("template" + item.primarykey).TileSize(TileSize.Wide)
if (Model.IndexOf(item) % 3 == 2)
{
@:</div>
}
}
}
</div>
Output
