Dynamic Card List

[Eric]

How do I generate a dynamic list of cards in asp.net? I'll be getting JSON data as the source if that matters.

[Dimitar]

Hello Eric,

The cards are just HTML markup with classes which ensures specific layout and styles to be applied. The cards HTML can be treated as any other markup in an MVC application and dynamic cards could be generated by iterating over some set of values. For example:

1) We have the following test model:

public class EmployeeModel
{
  public string Name { get; set; }
  public string Department { get; set; }
  public string ImageURL { get; set; }
}

2) We create some test data for the view and assign it to the dynamic ViewBag:

public class HomeController : Controller
{
  public ActionResult Index()
  {
    Array array;
    List<EmployeeModel> employees = new List<EmployeeModel>();

    employees.Add(new EmployeeModel
    {
      Name = "Scott",
      Department = "IT",
      ImageURL = "https://demos.telerik.com/kendo-ui/content/chat/doctor2.jpg"
    });
               
    employees.Add(..);
               
    array = employees.ToArray();
    ViewBag.Employees = array;
			
    return View();
  }
}

3) Iterate over the data and generate the cards markup:

@foreach (EmployeeModel employee in (EmployeeModel[])ViewBag.Employees)
{
  <div class="k-card k-card-type-rich">
    <img src="@employee.ImageURL" class="k-card-image" width="230" height="150">
    <div class="k-card-body">
      <h5 class="k-card-title">@employee.Name</h5>
      <h6 class="k-card-subtitle">@employee.Department</h6>
    </div>
    <div class="k-card-actions k-card-actions-vertical">
      <span class="k-card-action">
        <span class="k-button k-flat k-primary" data-value="View details">View Details</span>
      </span>
      <span class="k-card-action">
        <span class="k-button k-flat k-primary" data-value="Contact">Contact</span>
      </span>
    </div>
  </div>
}

For additional resource on the cards markup, I would suggest referring to the Cards Demos:

• https://demos.telerik.com/aspnet-core/cards/index

Regards,
Dimitar
Progress Telerik