How To

Customize the card image title position

Card Image titles are placed as always Bottom-Left Corner only, You can manually customize to placing titles anywhere over the image by adding styles.

razor
controller.cs
/*Razor CodeBlock*/

<script>

function changed(e) {
    let cardEle = document.querySelector('.e-card');
    let titleEle = cardEle.querySelector('.e-card-image .e-card-title');
    titleEle.className = ''
    titleEle.classList.add('e-card-title');
    titleEle.classList.add(e.value.toLowerCase());
}

</script>


@section ControlsSection {     
            
<div class="e-card">
	<div class="e-card-image">
		<div class="e-card-title">Node.js</div>
	</div>
	<div class="e-card-content">
                    Node.js is a wildly popular platform for writing web applications that has revolutionized web development in many ways, enjoying
                    support across the open source community as well as industry.
    </div>
</div>
<div id="default" style='padding-top:75px;'>

   @Html.EJS().DropDownList("games").Placeholder("Select Position").DataSource((IEnumerable <object>)ViewBag.dataSource).change("changed").Render()

</div>

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class DropDownListController : Controller
    {
        public IActionResult simpledata()
        {
            ViewBag.dataSource = new string[] { "BottomLeft", "TopLeft", "TopRight", "BottomRight"};
            return View();
        }
    }
}

Integrate other component inside the card

You can integrate any component inside the card element. Here ListView component is placed inside the card for showcasing the To-Do list.

razor
controller.cs
/*Razor CodeBlock*/

@section ControlsSection {     

            <div tabindex="0" class="e-card" id="basic">
                <div class="e-card-title">To-Do List</div>
                <div class="e-card-separator"></div>
                <div class="e-card-content">
                    @Html.EJS().ListView("element").DataSource((IEnumerable<object>)ViewBag.dataSource).Fields(new ListViewFieldSettings { Text = "todoList"}).ShowCheckBox(true).Render()
                </div>
            </div>

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class ListViewController : Controller
    {
        public IActionResult arraydata()
        {
            List<object> listdata = new List<object>();
            listdata.Add(new { todoList = "Pay Bills" });
            listdata.Add(new { todoList = "Call Chris" });
            listdata.Add(new { todoList = "Meet Andrew" });
            listdata.Add(new { todoList = "Visit Manager" });
            listdata.Add(new { todoList = "Customer Meeting" });
            ViewBag.dataSource = listdata;
            return View();
        }
    }
}

Output be like the below.

Card Control with other component