How do you get done so, then it is only a radio as display the text when you have that value. That is to say that there will always be only one being shown. and it must not be shown to the other.
The where I add the red box to the text which is displayed only be used the place. while elsewhere shows not disclosed.
<span ng-show="PakkeValue.UserCount >= 1">Du får ekstra profil - {{PakkeValue.UserCount}} stk.</span>
EIDT update:
<div class="form-group">
#foreach (var item in Model.listpric)
{
<div class="col-md-4">
<input name="Pakke1"
type="radio"
ng-model="PakkeValue"
ng-value="{
IdPakke: '#item.id',
Months: '#item.mdr',
Price: '#item.pristal',
UserCount: '#item.UserCount'}" />
#item.mdr måned(er) (#item.pristal,- kr./md) <span ng-show="PakkeValue.UserCount >= 1">Du får ekstra profil - {{PakkeValue.UserCount}} stk.</span>
</div>
}
</div>
I see your problem, you are using PakkeValue to show or hide the span, that is equal for all of the radio's. You have to use something which is unique to an individual radio or move your span outside of the loop:
Below is the version which checks both the user count and price to show it only in one of them. You can use any other unique value.
<div class="form-group">
#foreach (var item in Model.listpric)
{
<div class="col-md-4">
<input name="Pakke1"
type="radio"
ng-model="PakkeValue"
ng-value="{
IdPakke: '#item.id',
Months: '#item.mdr',
Price: '#item.pristal',
UserCount: '#item.UserCount'}" />
#item.mdr måned(er) (#item.pristal,- kr./md)
<span ng-show="PakkeValue.UserCount >= 1 && PakkeValue.Price == #item.pristal">Du får ekstra profil - {{PakkeValue.UserCount}} stk.</span>
</div>
}
</div>
Related
I'm trying to get some code to work to make rows from a List of Items. I had done it before but for some reason it's not properly adding the closing tags.
<code>
#if (Model != null)
{
var start = 0;
foreach (var item in Model)
{
if (start == 0)
{
#:<div class="row"><div class="col-lg-4">
start++;
}
else if (Model.Count == start)
{
#:</div>
}
else if (start % 3 == 1 && start > 1)
{
#:</div>
start++;
}
else
{
var price = string.Format("{0:0.00}", item.MenuItemPrice);
<div class="card">
<img class="card-img-top" src="~/SiteImages/MenuHome.png" style="width:128px" />
<div class="card-body">
<div class="card-title">
#item.MenuItemName
<hr />
</div>
<p class="card-text>">
#item.MenuItemDesc - #price
</p>
<button class="btn btn-primary" id="fpPlatter">View</button>
</div>
</div>
#:</div>
start++;
}
}
}
</code>
It does write the row but it won't close the col-lg-4. It should write a row, a col-lg-4, then add 3 items based on the modulus and close them at the end. I'm probably overlooking some thing as the List is added. Any input appreciated. I can add a screenshot.
Try this...
<code>
#if (Model != null)
{
var currentCard = 0;
foreach (var item in Model.Products)
{
currentCard++;
if (currentCard % 3 == 1)
{
#:<div class="row">
}
<div class="col-lg-4">
<div class="card">
#*
<div class="card-header">
<img class="card-img-top" src="~/SiteImages/MenuHome.png" style="width:128px" />
</div>
*#
<div class="card-body">
<div class="card-title">
#item.MenuItemName
<hr />
</div>
<p class="card-text>">
#item.MenuItemDesc - #string.Format("{0:0.00}", item.MenuItemPrice)
</p>
<button class="btn btn-primary" id="fpPlatter">View</button>
</div>
</div>
</div>
if (currentCard % 3 == 0 || currentCard == Model.Products.Count)
{
#:</div>
}
}
}
</code>
You will need to change Model.Products to your required Model... it was just me playing around.
You are not handling all the items with the current logic. For example on the first iteration the opening div is created, but the item is not written. The html you have in the else probably needs to be done unconditionally and the rest of the optional html needs to be handled the body of the foreach loop in relation to the item html so that it lands in the proper place.
There is an issue with your conditional logic. However, rather than correct it, you could just abandon it and use Bootstrap's grid system to layout your rows for you.
outside of your foreach loop, open a row div
inside your loop, output a card contained inside a div sized using the grid system
<div class="col-md-4"> <div class="card"> ... </div> </div>
after exiting your loop, close the row div
This is the method recommended in Bootstrap's own documentation. It is simpler to implement and also requires less work server-side to generate your HTML.
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)
A text file has a line item such as;
oranges, 0
'userData' is an array responsible for reading the lines from this text file, which are then split using 'delimiterChar' to separate 'oranges' and '0'. 0 is considered as the primary key of oranges, and therefor acts as the line items unique identifier.
'Oranges' is then displayed as the heading of a bootstrap collapsible. Now obviously, the user can add as many line items to the text file as required, therefore resulting in many collapsible's, all of which should be able to open independently of the others. However, as it stands, if i am to open only one collapsible, all of the collapsible's will open as well.
As displayed in the image as follows;
Upon clicking 'Oranges' (Or any other heading for that matter), all three collapsible's would open simultaneously.
Below is the code for the collapsible's:
#Model.result
#if (Model.result == "")
{
foreach (String dataLine in Model.userData)
{
<p>
<a data-toggle="collapse" href="#dataLine" role="button" aria-expanded="false" aria-controls="collapseExample">
#dataLine.Split(Model.delimiterChar)[0]
</a>
</p>
<div class="collapse" id="dataLine">
<div class="card card-body w-25 p-3 collapsible" id="#dataLine.Split(Model.delimiterChar)[1]">
<!-- Collapsible content -->
</div>
</div>
}
}
Any suggestions on how to fix this would be greatly appreciated, thank you!
In the code below, we added a counter variable count which we append to the ID of the collapsible and href target of the collapsible trigger.
#Model.result
#if (Model.result == "")
{
int count = 0;
foreach (String dataLine in Model.userData)
{
string countString = count.ToString();
string target = "dataLine"+countString;
string trigger = "#"+target;
<p>
<a data-toggle="collapse" href="#trigger" role="button" aria-expanded="false" aria-controls="collapseExample">
#dataLine.Split(Model.delimiterChar)[0]
</a>
</p>
<div class="collapse" id="#target">
<div class="card card-body w-25 p-3 collapsible" id="#dataLine.Split(Model.delimiterChar)[1]">
<!-- Collapsible content -->
</div>
</div>
count++;
}
}
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 am using trying to create a Messaging feature on a project that I am using and in order to do that I am using a foreach loop through the Model in order to bring in the messages that both the specific user sent and the ones that the specific user has received. I am trying to make it look like a typical messaging service where when you type a message it displays your message and then it also displays the message that was received by you and it does that is chronological order.
My problem is that I can't get it to show the messages by the order of the time. The foreach is showing all the messages but it isn't doing the chronological order part.
Below is my foreach loop:
#{
var user = HttpContext.Current.User.Identity.GetUserId();
var bob = Model.Chat.Where(u => u.AssignToUserId == user).ToList();
var sam = Model.Chat.Where(u => u.OwnerUserId == user).ToList();
}
#foreach (var message in bob.Zip(sam, Tuple.Create))
{
<div class="direct-chat-msg">
<div class="direct-chat-info clearfix">
< span class="direct-chat-name pull-left">#message.Item1.OwnerUser.DisplayName</span>
<span class="direct-chat-timestamp pull-right">#message.Item1.Created</span>
</div>
<!-- /.direct-chat-info -->
<div class="direct-chat-text">
#message.Item1.Body
</div>
<!-- /.direct-chat-text -->
</div>
<div class="direct-chat-msg right">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-right">#message.Item2.OwnerUser.DisplayName</span>
<span class="direct-chat-timestamp pull-left">#message.Item2.Created</span>
</div>
<!-- /.direct-chat-info -->
<div class="direct-chat-text">
#message.Item2.Body
</div>
<!-- /.direct-chat-text -->
</div>
}
This is what is being displayed:Chat Message Windwo
I am trying to get it so that it orders it by date so if I send two messages back to back but only receive one it show my two first and then the other on in proper order and not every other. Thanks!
As mentioned in the comments you are probably going to want to use .OrderBy() to order your messages and avoid .Zip() because you are not guaranteed that you will always get a sender-receiver in pairs. You could get two or more message sent or received in a row.
You are probably going to have to combine your lists somehow and the do some sort of if statement to determine your markup. Something like below should get you close to where you need to be.
#{
var user = HttpContext.Current.User.Identity.GetUserId();
var bob = Model.Chat.Where(u => u.AssignToUserId == user).ToList();
var sam = Model.Chat.Where(u => u.OwnerUserId == user).ToList();
var allMessages = new List<T>();
allMessages.AddRange(bob).AddRange(sam).OrderBy(x => x.Created);
}
#foreach (var message in allMessages)
{
#if(message.OwnerUserId == message.OwnerUserId)
{
<div class="direct-chat-msg">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">#message.Item1.OwnerUser.DisplayName</span>
<span class="direct-chat-timestamp pull-right">#message.Item1.Created</span>
</div>
<!-- /.direct-chat-info -->
<div class="direct-chat-text">
#message.Item1.Body
</div>
<!-- /.direct-chat-text -->
</div>
}
else
{
<div class="direct-chat-msg right">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-right">#message.Item2.OwnerUser.DisplayName</span>
<span class="direct-chat-timestamp pull-left">#message.Item2.Created</span>
</div>
<!-- /.direct-chat-info -->
<div class="direct-chat-text">
#message.Item2.Body
</div>
<!-- /.direct-chat-text -->
</div>
}
}
P.S. Did this in Notepad++ so my markup may not be correct.