how to display records as popular products in MVC5

Hello,

when i search in google  to display records as popular products in grid like (shopping website displays products in grid ), web grid uses to show records<– in web form we will use gridview. whcih is okay.

I want to display few information about products in front-end like follow

for example.

column1                                        column2                          column3

price of product                          price of product                  price of product

descript of product                     descript of product             descript of product  

image of descript                        image of descript                 image of descript

and etc                                        and etc                                  and etc 

if it is asp.net web form. i will use either datalist or list view for that.

So, how to achieve in  MVC5. what control i should use. i am new for mvc5. can you help how to solve this problem?

Thanks

I recommend looking at the WebGrid, which renders a table similar to the GridView in Web Forms:

Or you could just use HTML to render a list, or divs or similar:

@foreach(var item in Model){
    <div style="box">
    <h3>@item.Name</h3>
    @item.Price<br />
    @item.Description<br />
    <img src="@item.Image" />
</div>
}

Style for the div:

.box{
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

Thank you for reply. the one you explained i understood. But, it will display one column. 

as you know if you use datalist , according to repeat column it will display. like follow.

<div id="divProducts">
<asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
RepeatDirection="Horizontal" RepeatLayout="Table">
<ItemTemplate>
<div class="item">
<span><strong><%# Eval("Name") %></span></strong><br />
<span><%# Eval("Description") %></span><br />
<span>$<%# Eval("Price")%></span>
</div>
</ItemTemplate>
</asp:DataList>

same concept if we use list view. how can i achieve this?

Leave a Reply