Question

我正在尝试学习MVC，我甚至不确定如何开始接近这个，并且似乎无法谷歌任何相关的东西。

我基本上有一个我希望在网格中显示的对象列表。网格的每个单元格包含整个对象的数据。（对象是用户的朋友，只有图像和对象中的用户名）

我可以使用foreach循环将它们显示在一个列中。但这显然并不理想，因为它会制作一个很长的用户名和图像列表。

有人可以指点我做一个类似的指南，或者甚至只是让我对搜索的内容有所了解，但是在尝试搜索解决方案时，我会遗漏一些术语。

由于

Answer 1

在您的操作中，您将返回一个包含表格数据表示的模型。

首先创建模型User和Friend对象：

public class User
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Friend> Friends { get; set; }
}

public class Friend
{
    public int Id { get; set; }
    public string UserName { get; set; }
    public string ImageUrl { get; set; }
}

然后创建你的动作，我将在这里使用一个索引来进行演示。这将在List中构建您的User对象并将它们返回到视图：

public ActionResult Index()
{
        var model = new List<User> { new User { Id = 1, Name = "name", 
        Friends = new List<Friend> { new Friend { Id = 1, UserName = "name", ImageUrl = "a.jpg" } }, 

        new User { Id = 2 Name = "name2",  
        Friends = new List<Friend> { new Friend { Id = 1, UserName = "name", ImageUrl = "b.jpg" } }
            };
            return View(model);
    }

然后在您的视图中执行以下操作：

@model List<User>

 <table>
 <tr>
   <th>Id</th>
   <th>Name</th>
   <th>Friends</th>
 </tr>
 @foreach(var user in Model)
 {
   <tr>
      <td>@product.Id.ToString()</td>
      <td>@product.Name</td>
      <td>@foreach(var friend in user.Friends)
         {
             @friend.UserName <br/>
             <img src="@friend.ImageUrl" /> <br/>
         }
      </td>
   </tr>
 }
 </table>

上面简单地说模型是List个User个对象，然后是foreach循环来写出来。由于Friend对象是嵌套的，因此您可以在用户循环中执行for循环。

可以将friends循环的html配置为任何所需的输出。你可以实现一个悬停div来压缩它。

     <td>
            <a>Show friends!</a>
         @foreach(var friend in user.Friends)
         {
             <div>
             @friend.UserName <br/>
             <img src="@friend.ImageUrl" /> <br/>
             </div>
         }
      </td>

然后按如下方式添加css：

div {
    display: none;
}

a:hover + div {
    display: block;
}

请原谅任何错别字，我不在电脑上。

在网格MVC中显示对象

1 个答案: