Question

我很抱歉我认为这是一个糟糕的问题。有没有人有一个如何在图片中创建类似东西的例子，所以在MVC中有某种类型的瓷砖？这曾经在https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/上可用，但现在已经不存在了，我需要知道如何创建类似的东西，但却找不到它。

任何帮助都会受到赞赏，即使它只是上面的正确名称！

Answer 1

您无需使用MVC来创建切片。您可以使用CSS或Javascript。有许多JS / CSS库可以让您平铺HTML。

我会在这里发布一些内容，但老实说，您应该只使用谷歌查找一些js / css磁贴布局库，以便找到最适合您需求的库。

Answer 2

如果它在ASP，Java Spring或普通的旧HTML中真的没那么重要，这与CSS和Bootstrap而不是ASP.NET MVC更相关。

这就是我要做的。

打开你的Views\Home\index.html，你可以删除所有内容并粘贴下面的内容（这是一个很好的起始模板） - 从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>

您将获得缩略图样式网格，然后您需要优化（使用CSS）以使其具有您所追求的外观（让您阅读bootstrap's documentation）。

MVC如何在视图中创建切片（？）

2 个答案: