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)
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>
}
}
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>
i have this html
<div class="form-wrapper">
<div class="clearfix">
<div class="row">
<div class="time-wrapper col-xs-6">
<div class="row">
<div class="text-left col-md-6 cols-sm-12">
<input type="radio" id="flight-return-1" name="flight-return" data-default-meal="X">
<div class="">
<div class="date pad-left-large-md no-padding-left-xs white-space-nowrap">Za. 06 May. 2017</div>
</div>
</div>
<div class="flight date text-right-md text-left-xs col-md-6 cols-sm-12 pad-right-large">
<span>
bet </span>
<span class="time">
12:10 </span>
</div>
</div>
</div>
<div class="time-wrapper col-xs-6">
<div class="row">
<div class="flight date text-md-left text-sm-right no-padding-left col-md-7 cols-sm-12">
<span class="time">
14:25 </span>
<span>
zeb </span>
</div>
<div class="price-wrapper col-md-5 cols-sm-12">
<div class="price text-right white-space-nowrap">
<span class="currency symbol">€</span> <span class="integer-part">69</span><span class="decimal-part">,99</span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please note that i have multiples <div class="row">inside one .
i want to get all the data there
i'm using this c# code :
var node_1 = Doc.DocumentNode.SelectNodes("//div[#class='form-wrapper']").First();
var ITEM = node_1.SelectNodes("//div[#class='clearfix']");
foreach (var Node in node_1.SelectNodes("//div[#class='clearfix']"))
{
Console.WriteLine(Node.SelectNodes("//span[#class='time']")[1].InnerText.Trim());
}
I'm only trying to get all the times (there is like 4 class(clearfix) )
so i'm expecting dates like :
14:25
18:25
17:50
13:20
but for some reasons i only get :
14:25
14:25
14:25
14:25
it keeps repeating this i m stuck at this
thanks in advance
The double forward slash in the XPATH of your Console.WriteLine statement ("//span[....") is running out of your current node context and returning the first instance in the whole document that matches your XPATH.
Try to make your second XPATH relative (best way is to debug the code and examine what was returned into the Node variable in the loop)
You could also just iterate the spans directly:
foreach (var spanNode in node_1.SelectNodes("//span[#class='time']"))
{
Console.WriteLine(spanNode.InnerText.Trim());
}
you are passing index statically this will be the issue
Node.SelectNodes("//span[#class='time']")[1].InnerText.Trim()//Here [1] you are passing statically
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>
}