I have x amount of data I want to display in 2 columns. Assuming I am looping through the data, how can I display it in 2 columns using a bootstrap grid?
(Using Razor in an MVC partial view)
<div class="row">
<div class="col-md-6">
item 1
</div>
<div class="col-md-6">
item 2
</div>
</div>
...
<div class="row">
<div class="col-md-6">
item x - 1
</div>
<div class="col-md-6">
item x
</div>
</div>
Without knowing what type of project (MVC, forms, etc?) you're using it's hard to say because you need some logic in the UI to iterate through your data set. For example,
with C# MVC & Razor, you might do this:
#foreach(record in x)
{
<div class="row">
<div class="col-md-6">
#record.someValue
</div>
<div class="col-md-6">
#record.someOtherValue
</div>
</div>
}
Related
I want to use 2 variables and iterate over different objects with a single line foreach,
If I wanted to do it with python I could use as follows.
<div>
#(for firstSong, secondSong Model.Web.OrderBy(p=>p.ListOrder()) )
{
<div class="item">
<div class="row">
firstSong.Name
</div>
<div class="row2">
secondSong.Name
</div>
</div>
}
</div>
<div>
but I want to do the same thing with c#, how can I do it?
#foreach(var song in Model.Web.OrderBy(p=>p.ListOrder())
{
<div class="item">
<div class="row">
song.Name
</div>
<div class="row2">
song.Name
</div>
</div>
}
</div>
In older C# you'd possibly do this with a plain for that jumps 2:
var arr = Model.Web.OrderBy(p=>p.ListOrder()).ToArray();
#for(int x = 0; x < arr.Length; x+=2)
{
<div class="item">
<div class="row">
#arr[x].Name
</div>
#if(x+1 < arr.Length){
<div class="row2">
#arr[x+1].Name
</div>
}
</div>
}
</div>
You could use some LINQ to juggle your collection into tuples of song pairs, if your C# is modern enough to have Chunk (.net6+)
#foreach(var array in Model.Web.OrderBy(p=>p.ListOrder()).Chunk(2))
{
<div class="item">
<div class="row">
#array[0].Name
</div>
#if(arr.Length > 1){
<div class="row2">
#array[1].Name
</div>
}
</div>
}
</div>
There are other ways of doing it in older LINQ, such as projecting to include the index of each item, using a Where to take only the evens and Zipping them together with only the odds, or grouping them by the divide-by-2 of the index, but it gets a bit ugly:
#foreach(var array in Model.Web.OrderBy(p=>p.ListOrder()).Select((o,i)=>new{o,i}).GroupBy(at => at.i/2, at=> at.o), (k,g)=>g.ToArray())
...
<div class="item">
<div class="row">
#array[0].Name
</div>
#if(array.Length > 1){
<div class="row2">
#array[1].Name
</div>
}
</div>
It'd perhaps be better to write your own Chunk/lift it from the .net source
If you're not using .NET 6 and can't take advantage of .Chunk (as in the other answer), you could perhaps get an IEnumerator<Song> and iterate through that manually:
#{
IEnumerator<Song> songEnumerator = Model.Web.OrderBy(p => p.ListOrder()).GetEnumerator();
while (songEnumerator.MoveNext())
{
<div class="item">
<!-- handle the first song -->
<div class="row">
#songEnumerator.Current.Name
</div>
<!-- try and get the second item -->
#if (#songEnumerator.MoveNext())
{
<div class="row2">
#songEnumerator.Current.Name
</div>
}
</div>
}
}
I am using the code below to display cards with checkboxes.
I want to be able to display 2 columns of cards on my page and the checkboxes
section on the cards should have two columns as well.
At the moment I am just getting one column and the checkboxes are also displayed in one column as well.
How can I change this?
#foreach (var header in NewProjectData.GroupBy(g => g.SectionHeaderName).ToList())
{
<div class="col">
<div class="card d-flex align-items-center dynamic-card mb-3">
<div class="card-body">
<div class="card-title">#header.Key</div>
#foreach (var item in header)
{
<div class="row">
<div class="col">
<label class="form-check-label" for="flexCheckChecked"> #item.SectionChildText</label><br>
<input class="form-check-input" type="checkbox" value="#item.SectionChildText " id="flexCheckChecked">
</div>
</div>
}
</div>
</div>
</div>
}
First make sure you have atleast div.row wrapped over your first foreach
<div class="container">
<div class="row">
#foreach (var header in NewProjectData.GroupBy(g => g.SectionHeaderName).ToList())
{
...
...
}
</div>
</div>
Second, by the nature of css, if there is only one div.col inside div.row, then obviously you will have only one column. So make sure you have 2 items in NewProjectData.GroupBy(g => g.SectionHeaderName).ToList(). Since you are looping over it, the number of items equals number of columns.
You're repeating an entire row with a single column. Instead, repeat col-6, 2 columns every iteration...
<div class="card-body">
<div class="card-title">#header.Key</div>
<div class="row">
#foreach (var item in header)
{
<div class="col-6">
<label class="form-check-label" for="flexCheckChecked"> #item.SectionChildText</label><br>
<input class="form-check-input" type="checkbox" value="#item.SectionChildText " id="flexCheckChecked">
</div>
}
</div>
</div>
Demo (using React)
For example in the Model.Examples = List(1,2,3,4,5,6).
I get the data and show it to the user but I have a little problem. I want to show data like under below
<div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
</div>
<div class="X">
<div class="y">4</div>
<div class="y">5</div>
<div class="y">6</div>
</div>
I try to this but my method is not correct.
<div class="x">
#foreach(var item in Model.Examples)
{
<div class="y">#item.Number</div>
}
When I execute the code, my result is
</div class="x">
<div class="y">1</div>
<div class="y">2</div>
<div class="y">3</div>
<div class="y">4</div>
<div class="y">5</div>
<div class="y">6</div>
</div>
How can I do it in .NET Core?
You can use LINQ's Take and Skip:
<div class="x">
#foreach(var item in Model.Examples.Take(Model.Examples.Count/2))
{
<div class="y">#item.Number</div>
}
</div>
<div class="X">
#foreach(var item in Model.Examples.Skip(Model.Examples.Count/2))
{
<div class="y">#item.Number</div>
}
</div>
I have a list as
#model IEnumerable<VideoViewModel>
I am trying to make two items in a row with a foreach loop in Razor.
Here is an example of what I am trying to do:
<div class="row">
<div class="statistics col-lg-3 col-12">
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-red"><i class="fa fa-clock-o"></i></div>
<div class="text"><strong>Video 1 </strong><br></div>
</div>
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-blue"><i class="fa fa-calendar-o"></i></div>
<div class="text"><strong>Video 2</strong><br></div>
</div>
</div>
<!-- Second Column -->
<div class="statistics col-lg-3 col-12">
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-red"><i class="fa fa-clock-o"></i></div>
<div class="text"><strong>Video 3 </strong><br></div>
</div>
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-blue"><i class="fa fa-calendar-o"></i></div>
<div class="text"><strong>Video 4</strong><br></div>
</div>
</div>
</div>
What I want to achieve with the for loop, is to to add a column of four columns two rows. Based on the number of items that I have in my list, add a maximum of four columns. If there are more than four column in a row, then add another row. Can someone please help with that logic?
If you mean to display video content in a row with a maximum of 4 columns then you can divide the screen in 4 with help of the bootstrap col-md class.
Send list from the controller to view, Here I am using viewbag without Model.
In Controller
var videoList = _entityOBJ.tblVideo.Tolist(); //Getting list to var object
ViewBag.videoList =videoList ; //adding list to viewbag
In View
<div class="row">
#foreach (var item in #ViewBag.videoList)
{
<div class="card col-md-3"> // divide screen in 25% (total ratio is 12, so 12/4=3)
<div class="card-body">
#item.ColumnOfVideoTableToBeDisplay //specify the column name same as you database table
</div>
</div>
}
</div>
Im using an api to obtain some financial information for clients in out system.
The information returned from the API is passed to a model(ReportResponse) and displayed in a view (Report)
within the view i look through the items in the Model using a foreach and display as follows
#foreach (var r in Model.JsonReport.ReportDetail.FirstAddress.DataSections.AccountData.AccountDataDetail.AccountDataItem.Select((value, i) => new { i, value }))
{
if (Decimal.Parse(r.value.Balances.Current.ToString().Replace("£", "")) > 0)
{
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="col-md-10">
#r.value.AccountOverview.CompanyName
</div>
<div class="col-md-2">
<button class="btn btn-primary" id="#r.i" onclick="SubmitDebt(#r.i)">Save</button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
Current Balance
</div>
<div class="col-md-6">
#r.value.Balances.Current
</div>
</div>
<div class="row">
<div class="col-md-6">
Default Delinquent
</div>
<div class="col-md-6">
#r.value.Balances.DefaultDelinquent
</div>
</div>
<div class="row">
<div class="col-md-6">
Start
</div>
<div class="col-md-6">
#r.value.Balances.Start
</div>
</div>
<div class="row">
<div class="col-md-6">
Account Number
</div>
<div class="col-md-6">
#r.value.AccountOverview.AccountNumber
</div>
</div>
<div class="row">
<div class="col-md-6">
Account Type
</div>
<div class="col-md-6">
#r.value.AccountOverview.AccountType
</div>
</div>
<div class="row">
<div class="col-md-6">
Company Type
</div>
<div class="col-md-6">
#r.value.AccountOverview.CompanyType
</div>
</div>
<div class="row">
<div class="col-md-6">
Credit Limit
</div>
<div class="col-md-6">
#r.value.AccountOverview.CreditLimit
</div>
</div>
<div class="row">
<div class="col-md-6">
Credit Limit
</div>
<div class="col-md-6">
#r.value.AccountOverview.JointAccount
</div>
</div>
</div>
</div>
</div>
}
}
the information is then reviewed with the client who will be on the phone, and if applicable i then want this information adding to our Debts model.
My question is how do i map objects from the Report view to a debt model?
As you can see i do not have a strongly typed view, and the amount information returned from the API is variable and therefore needs to be dynamic
I would ideally like to be able to add a button to each section of the report that allows the user to press save, at which point i want just that one section on the report to be placed in my debt model and stored in the database
This is not going to work. The view is not submitted when you click a button. A form POST only returns fields, like input, select which are in the submitted form. I do not see a form, nor fields in your view. So you can return an id only.