【问题标题】：Datalist Like Structure In ASP.NET MVC 4ASP.NET MVC 4 中的数据列表类似结构
【发布时间】：2014-09-16 19:02:38
【问题描述】：

我是 ASP.NET MVC 的新手。

我在 Web 表单中创建了一个包含 DataList 控件的页面。以下是标记

<asp:DataList ID="dtlProducts" ShowFooter="true" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"
            BorderStyle="None">
            <FooterStyle ForeColor="Red" HorizontalAlign="Center" Font-Bold="True" />                
            <ItemTemplate>
                <table class="list">
                    <tbody>
                        <tr>
                            <td style="width: 25%;">
                                <a href='<%#Eval("ProductId","ProductDetails.aspx?ProductId={0}") %>'>
                                    <img width="120px" height="120px" src='<%#Eval("productImage", "admin/Uploads/Product/{0}") %>' alt='<%#Eval("ProductName") %>' />
                                </a>
                                <br />
                                <a href='<%#Eval("ProductId","ProductDetails.aspx?ProductId={0}") %>'>
                                    <%#Eval("ProductName") %>
                                </a>
                                <br />
                                <span style="color: rgb(153, 153, 153); font-size: 11px;">
                                    <%#Eval("productDescription")%>
                                </span>
                                <br />
                                <span style="color: rgb(153, 0, 0); font-weight: bold;"><span style="font-family: Rupee Foradian">`</span>
                                    <%#Eval("productPrice")%>
                                </span>
                                <br />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </ItemTemplate>
            <FooterTemplate>                    
                <asp:Label ID="lblEmpty" Text="Coming Soon" runat="server" Visible='<%#bool.Parse((dtlProducts.Items.Count==0).ToString())%>'>
                </asp:Label>
            </FooterTemplate>
        </asp:DataList>

此标记生成以下结构

现在，我正在尝试使用 ASP.NET MVC 4 来实现同样的目标

这是我在剃须刀中尝试过的：

<table style="border-style:none;border-collapse:collapse;" id="tblProducts">
<tr>
    @foreach (var item in ViewBag.Product)
    {
        <td>
            <table class="list">
                <tbody>
                    <tr>
                        <td style="width: 25%;">
                            <a href="ClientHome/Index/@item.ProductId">
                                <img width="120px" height="120px" alt="@item.ProductName" src="../Uploads/Product/@item.Image">
                            </a>
                            <br>
                            <a href="ClientHome/Index/@item.ProductId">
                                @item.ProductName
                            </a>
                            <br>
                            <span style="color: rgb(153, 153, 153); font-size: 11px;">
                                @item.Description
                            </span>
                            <br>
                            <span style="color: rgb(153, 0, 0); font-weight: bold;">
                                <span style="font-family: Rupee Foradian">`</span>
                                @item.Price
                            </span>
                            <br>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    }
</tr>
</table>

这会生成以下结构

我的剃须刀到底应该换什么？

【问题讨论】：

它必须是表格布局还是您可以使用响应式网格布局？
这是一个样式问题，而不是剃须刀。由于它不是真正的表格数据，请考虑在样式为 float:left 和 width:25% 的 div 中呈现内容
@Serv 是什么意思？
这意味着你有一个固定的布局，不能很好地适应屏幕尺寸。响应式布局适应屏幕尺寸。例如：如果宽度因为在智能手机上查看而变小，则根据可用的视图空间，列从 4 下降到 3 到 2 到单列。
+1 @StephenMuecke 这确实有点帮助。

标签： c# html asp.net-mvc-4 razor

【解决方案1】：

这是一个样式问题，而不是剃须刀。由于它不是真正的表格数据，请考虑在样式为 float:left 和 width:25% 的 div 中呈现内容

视图可能看起来像这样（注意我建议对产品属性使用视图模型而不是 ViewBag，其中视图模型包含相关属性，包括图像路径）

@model IEnumerable<YourAssembly.ProductVM>
....
<div class="container">
  @foreach (var item in Model)
  {
    <div class="image">
      <img src= "@Url.Content(item.ImagePath)" alt=@item.ProductName />
    </div>
    <div class="name">
      @Html.ActionLink(item.ProductName, "Index", "ClientHome", new { id = item.ProductId })
    </div>
    <div class="description">@item.Description</div>
    <div class="price">@item.Price</div>
  }
</div>

CSS（只是对大多数属性进行猜测，您需要对其进行修改以满足您的需要）

.container {
  margin:5px;
  padding:5px;
  border: grey 1px solid;
  float:left;
  // set other properties for font etc. if not inherited from body
}
.product {
  float:left;
  width:25%;
  box-sizing:border-box;
}
.image {
  background-color:red;
  height:100px;
  width:100px;
  margin: 10px auto;
}
.name {
  text-align:center;
}
.description {
  text-align:center;
  color: rgb(153, 153, 153);
  font-size: 11px;
}
.price {
  text-align:center;
  font-weight: bold;
  color: rgb(153, 0, 0);
  font-family: Rupee Foradian
}

Refer simple fiddle 表示这里的样式

【讨论】：

非常感谢您承受所有痛苦。我真的很感激。但我用另一种方法实现了它。一段时间后会添加解决方案
@mathewtinus，没问题，但您的解决方案是在表格中呈现表格，这是糟糕的 html（而且速度很慢）——甚至不是表格数据！
其实内表是可以避免的，可以用css调整元素..我做的很着急..:P

【解决方案2】：

在模型中：

public class ProductList
{
    public List<List<ProductMaster>> lstPrdList
    {
        get;
        set;
    }
}

在视图中：

@model ShoppingCart_MVC4.Models.ProductList
    <table>
        @foreach (var item in Model.lstPrdList)
        {
            <tr>
                @foreach (var items in item)
                {
                    <td>
                        <table class="list">
                            <tbody>
                                <tr>
                                    <td>
                                        <a href="ClientHome/Index/@items.ProductId">
                                            <img width="120" height="120" alt="@items.ProductName" src="../Uploads/Product/@items.Image">
                                        </a>
                                        <br>
                                        <a href="ClientHome/Index/@items.ProductId">
                                            @items.ProductName
                                        </a>
                                        <br>
                                        <span style="color: rgb(153, 153, 153); font-size: 11px;">
                                            @items.Description
                                        </span>
                                        <br>
                                        <span style="color: rgb(153, 0, 0); font-weight: bold;">
                                            <span style="font-family: Rupee Foradian">`</span>
                                            @items.Price
                                        </span>
                                        <br>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                }
            </tr>
        }
    </table>

在控制器中：

public class ClientHomeController : Controller
{        
    public ActionResult Index()
    {            
        ProductList objPrdList = new ProductList();
        List<List<ProductMaster>> lstPrdList = new List<List<ProductMaster>>();
        List<ProductMaster> inner = new List<ProductMaster>();
        inner = db.ProductMasters.Where(x => x.isActive == true).OrderByDescending(x => x.CreatedOn).Take(10).ToList();
        int skip = 0;
        int take = 4;
        List<ProductMaster> pm;
        for (int i = 0; i < inner.Count / take; i++)
        {
            pm = new List<ProductMaster>();
            pm = inner.Skip(skip).Take(take).ToList();
            lstPrdList.Add(pm);
            skip += take;
        }
        pm = new List<ProductMaster>();
        pm = inner.Skip(skip).Take(inner.Count-skip).ToList();
        lstPrdList.Add(pm);
        objPrdList.lstPrdList = lstPrdList;
        return View(objPrdList);
    }
}

【讨论】：

【解决方案3】：

如果你想使用 Razor 来实现，你可以试试这个

但同样可以使用 CSS 实现（推荐）

<table style="border-style:none;border-collapse:collapse;" id="tblProducts">
    @{decimal count = 0;}
    @foreach (var item in ViewBag.Product)
    {

        if(@count % 4 == 0)
        {
            @Html.Raw("<tr>")
        }
            <td>
                <table class="list">
                    <tbody>
                        <tr>
                            <td style="width: 25%;">
                                <a href="ClientHome/Index/@item.ProductId">
                                    <img width="120px" height="120px" alt="@item.ProductName" src="../Uploads/Product/@item.Image">
                                </a>
                                <br>
                                <a href="ClientHome/Index/@item.ProductId">
                                    @item.ProductName
                                </a>
                                <br>
                                <span style="color: rgb(153, 153, 153); font-size: 11px;">
                                    @item.Description
                                </span>
                                <br>
                                <span style="color: rgb(153, 0, 0); font-weight: bold;">
                                    <span style="font-family: Rupee Foradian">`</span>
                                    @item.Price
                                </span>
                                <br>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        if (@count % 4 == 0)
        {
            @Html.Raw("</tr>")
            count = 0;
        }
        count++;
    }

</table>

【讨论】：

我现在正在使用 css，但我没有得到所需的确切输出，而不是 4 列我得到 3。