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」部分。