Tile View ▸ Basics

@model IEnumerable<DevExtreme.MVC.Demos.Models.TileViewItem>

@(Html.DevExtreme().TileView()
    .DataSource(Model)
    .ItemTemplate(@<text>
        <div class="image" style="background-image: url(<%- ImageSrc %>)"></div>
    </text>)
)

using DevExtreme.MVC.Demos.Models.SampleData;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class TileViewController : Controller
    {

        public ActionResult Basics()
        {
            return View(SampleData.TileViewItems);
        }

    }
}

using System.Text.Json.Serialization;

namespace DevExtreme.MVC.Demos.Models {
    public class TileViewItem {
        public int ID { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public int Price { get; set; }
        public string ImageSrc { get; set; }

        [JsonPropertyName("heightRatio")]
        public int? HeightRatio { get; set; }

        [JsonPropertyName("widthRatio")]
        public int? WidthRatio { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DevExtreme.MVC.Demos.Models.SampleData {
    public partial class SampleData {
        public static readonly IEnumerable<TileViewItem> TileViewItems = new[] {
            new TileViewItem {
                ID = 1,
                Address = "652 Avonwick Gate",
                City = "Toronto",
                State = "ON",
                Price = 780000,
                ImageSrc = "../../Content/Images/Gallery/1.jpg"
            },
            new TileViewItem {
                ID = 2,
                Address = "328 S Kerema Ave",
                City = "Milford",
                State = "CT",
                Price = 350000,
                ImageSrc = "../../Content/Images/Gallery/3.jpg"
            },
            new TileViewItem {
                ID = 3,
                Address = "8512 Tanglewood Cir",
                City = "Reform",
                State = "AL",
                Price = 250000,
                ImageSrc = "../../Content/Images/Gallery/6.jpg",
                WidthRatio = 2
            },
            new TileViewItem {
                ID = 4,
                Address = "6351 Forrest St",
                City = "Jersey City",
                State = "NJ",
                Price = 320000,
                ImageSrc = "../../Content/Images/Gallery/14.jpg"
            },
            new TileViewItem {
                ID = 5,
                Address = "61207 16th St N",
                City = "Moorhead",
                State = "MN",
                Price = 1700000,
                ImageSrc = "../../Content/Images/Gallery/5.jpg",
                HeightRatio = 2,
                WidthRatio = 2
            },
            new TileViewItem {
                ID = 6,
                Address = "5119 Beryl Dr",
                City = "San Antonio",
                State = "TX",
                Price = 455000,
                ImageSrc = "../../Content/Images/Gallery/4.jpg"
            },
            new TileViewItem {
                ID = 7,
                Address = "7121 Bailey St",
                City = "Worcester",
                State = "MA",
                Price = 555000,
                ImageSrc = "../../Content/Images/Gallery/7.jpg"
            },
            new TileViewItem {
                ID = 8,
                Address = "82649 Topeka St",
                City = "Riverbank",
                State = "CA",
                Price = 1750000,
                ImageSrc = "../../Content/Images/Gallery/2.jpg",
                HeightRatio = 2
            },
            new TileViewItem {
                ID = 9,
                Address = "7700 Elmwood Dr",
                City = "Cleveland",
                State = "OK",
                Price = 470000,
                ImageSrc = "../../Content/Images/Gallery/17.jpg",
                HeightRatio = 2,
                WidthRatio = 2
            },
            new TileViewItem {
                ID = 10,
                Address = "620201 Plymouth Rd",
                City = "Detroit",
                State = "MI",
                Price = 610000,
                ImageSrc = "../../Content/Images/Gallery/8.jpg"
            },
            new TileViewItem {
                ID = 11,
                Address = "1198 Theresa Cir",
                City = "Whitinsville",
                State = "MA",
                Price = 320000,
                ImageSrc = "../../Content/Images/Gallery/9.jpg"
            },
            new TileViewItem {
                ID = 12,
                Address = "4815 Warbler Ln",
                City = "Rockport",
                State = "TX",
                Price = 700000,
                ImageSrc = "../../Content/Images/Gallery/12.jpg"
            },
            new TileViewItem {
                ID = 13,
                Address = "420234 Rogge St",
                City = "Detroit",
                State = "MI",
                Price = 320000,
                ImageSrc = "../../Content/Images/Gallery/23.jpg"
            },
            new TileViewItem {
                ID = 14,
                Address = "114840 Interlake Ave N",
                City = "Seattle",
                State = "WA",
                Price = 400000,
                ImageSrc = "../../Content/Images/Gallery/22.jpg"
            },
            new TileViewItem {
                ID = 15,
                Address = "13673 Pearl Dr #7",
                City = "Monroe",
                State = "MI",
                Price = 399000,
                ImageSrc = "../../Content/Images/Gallery/20.jpg"
            },
            new TileViewItem {
                ID = 16,
                Address = "15447 Via Viento",
                City = "Atascadero",
                State = "CA",
                Price = 1100000,
                ImageSrc = "../../Content/Images/Gallery/21.jpg"
            }
        };
    }
}

.dx-tile-content .image {
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    display: block;
}