how to show the record side by side

Question

User-1355965324 posted

I am trying to list the record in the table side by side .  First record in first column , Second Record Second column and so on until 6 record . So the view must be viewed 6 column  list to show 6 record

my model

public class Order()
{
   public string itemCode {get;set;}
   public string itemName {get;set;}
}

public class OrderList()
{
   public IEnumerable<Order> OrderList {get;set;}
}

In view

@model OrderList
@for (var i = 0; i < Model.Order.Count(); i++)
{
  // how can I list the 6 records  side by side please help 
}

Answer 1

User475983607 posted

polachan, you've asked this question too many times... Please take the time to learn basic HTML/CSS and/or the Bootstrap grid system.  

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

User711641945 posted

Hi polachan,

You post the same thread like this thread.Not sure what is your whole code.Please be sure you have entirely used my code.

Anyway,here is the other way you could refer to:

Model:

public class Order
{
    [Key]
    public long id { get; set; }
    public DateTime OrderDate { get; set; }
    public string Customer { get; set; }
    public string Itemname { get; set; }
    public int QTY { get; set; }
}

public class OrderList
{
    public List<Order> OrderLists { get; set;}
}

View:

@model OrderList

<h1>Index</h1>


<div class="row">
    @for (int i = 0; i < Model.OrderLists.Count(); i++)
    {
        <div class="col">
            @Model.OrderLists[i].OrderDate <br />
            @Model.OrderLists[i].QTY <br />
            @Model.OrderLists[i].Itemname
            @*more property*@
        </div>
    }

</div>

Controller:

public async Task<IActionResult> Index()
{

    var model = new OrderList()
    {
        OrderLists = await _context.Order.ToListAsync()
    };
    return View(model);
}

Best Regards,

Rena