MVC脚手架：将表格更改为其他视图

Question

我正在创建一个MVC应用程序。当您使用脚手架模板与您的控制器使用一个表，它创建了一个行和相应的单元格集合中模型的每个实例的foreach构建索引页你提供像这样：

@model IEnumerable<PoliticiOnline.DTO.Question> 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.GeneralQuestion) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Explanation) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.IsTemplate) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.DateSubmitted) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.JudgementDate) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.FbShares) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.FbLikes) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.TwitterShares) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.SiteVotes) 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.GeneralQuestion) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Explanation) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.IsTemplate) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.DateSubmitted) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.JudgementDate) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.FbShares) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.FbLikes) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.TwitterShares) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.SiteVotes) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id=item.QuestionId }) | 
      @Html.ActionLink("Details", "Details", new { id=item.QuestionId }) | 
      @Html.ActionLink("Delete", "Delete", new { id=item.QuestionId }) 
     </td> 

    </tr> 
} 

</table> 

我会喜欢将此视图更改为像列表视图，其中包含每个实例的快速查看卡片。我将如何去创建这个使用HTML和CSS？基本上我想创建我自己的结构，并向用户提供一个列表，其中包含每个模型实例的简要视图（当然，他们可以查看详细信息页面上的详细信息）。

我希望我的解释清楚，我很难解释我的意思。您可以将其与定义自定义控件进行比较，例如为listview中的每个项目创建替代设计。希望可以有人帮帮我！

编辑

其实我的意思是这样的＃1的网页。我想要达到同样的结构。我想要列出每个问题的简短信息。我看了一下Stackoverflow和CSS的源码，但无法真正找到如何去做。你怎么能够定义左侧的选票数量，中间的标题和右下角的作者信息？

Answer 1

我认为这是一个相当广泛的HTML问题，你可能需要看看一些HTML和CSS教程真的让你去。你的代码可以这样简单

@model IEnumerable<PoliticiOnline.DTO.Question> 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

@foreach (var item in Model) { 

    <div style="border: 1px solid black;"> 
     @Html.DisplayFor(modelItem => item.GeneralQuestion) <br /> 
     @Html.DisplayFor(modelItem => item.Explanation) 
    </div> 
} 

这将产生一堆丑陋的框，其中包含一些文本。你真的需要了解css才能使它看起来比这更好。我建议阅读http://www.w3schools.com/的“Learn Html”和“Learn CSS”部分。