类似于ASP.NET MVC 4中的数据列表结构

Question

我是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>

这将产生以下结构

我的剃须刀究竟应该更换什么？

Answer 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
}

在这里引用简单的小提琴以指示样式

Answer 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);
    }
}

Answer 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>