MVC How to create tiles (?) in a view

Question

I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.

Any help would be appreciated even if it's just the correct name of the above!

You might want to check out this answer: https://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view#8470083 — SharpC, Nov 29 '17 at 10:46

score 0 · Answer 1 · answered Jan 22 '17 at 21:07

You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.

I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.

score 0 · Accepted Answer · edited May 23 '17 at 12:17

It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.

This is what I would do.

Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.

@{
    ViewBag.Title = "Home Page";
}
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
          <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
         <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
    </div>
</div>

You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).

MVC How to create tiles (?) in a view

2 Answers2