I'm currently learning 2sxc and am building a directory app as my initial project.
I'm trying to use the following code in a list view to change the way an item is displayed based on the Boolean "UpgradedListing"
#foreach(var listing in AsList(Data)) {
<div #Edit.TagToolbar(listing)>
if(listing.UpgradedListing == 'true'){
<strong>#listing.ListingName</strong<br/>
<a href='mailto:#listing.Email'>#listing.Email</a>
<hr/>
} else {
#listing.ListingName<br/>
<a href='mailto:#listing.Email'>#listing.Email</a>
<hr/>
}
</div>
}
the resulting output looks like this:
if(listing.UpgradedListing == 'true'){ Techmedics Ltd office#techmedics.co.nz
} else { Techmedics Ltd
office#techmedics.co.nz
}
if(listing.UpgradedListing == 'true'){ Solutions Online NZ Ltd enquiries#solutions-online.co.nz
} else { Solutions Online NZ Ltd
enquiries#solutions-online.co.nz
}
in other words the if else isn't being seen as code.
Can any one explain why this is?
You just need an # symbol in front of the first if, so
#if(listing.UpgradedListing == 'true'){
Also you've got a typo, your closing strong tag is missing its right >
And 'true' is not the same as true (boolean). 2sxc will know and return a boolean for .UpgradedListing (if you have it set AS a boolean field... if you have it as a string, then you need == "true"
and you can also move the stuff that doesn't change outside the if/else to make it more readable...
#foreach (var listing in AsList(Data))
{
// here you can still write C# without an #
// because it's still in code-mode
var x = 7; // this still works here
<div #Edit.TagToolbar(listing)>
<!-- here Razor switches to HTML because we had a Tag around it -->
<!-- so we need to really introduce the code-mode again -->
#if (listing.UpgradedListing)
{
<strong>#listing.ListingName</strong><br />
}
else
{
#listing.ListingName<br />
}
<a href='mailto:#listing.Email'>#listing.Email</a>
<hr />
</div>
}
Related
My navigation bar,
<div *ngIf = ("path == '/login'" && "path == '/home'") class="tabs-header-nav">
<a routerLink="/login" class="nav-link active">login</a>
<a routerLink="/bb" class="nav-link">home</a>
<a routerLink="/" class="nav-link">CC</a>
</div>
<div *ngIf = ("path == '/aa'" || "path == '/bb'") class="tabs-header-nav">
<a routerLink="/aa" class="nav-link active">aa</a>
<a routerLink="/bb" class="nav-link">bb</a>
<a routerLink="/" class="nav-link">CC</a>
</div>
Likewise I have 5 to 6 navigation bar in my html. Now I need to display a particular navigation bar for particular page. Single if condition ( *ngIf = "path === '/aa'" ) seems to be working, where if I give multiple conditions it is not working. Could you please help me on this?
You should go for ngSwitch that takes multiple values
<div [ngSwitch]="path">
<div *ngSwitchCase="'/login'">...</div>
<div *ngSwitchCase="'/home'">...</div>
</div>
I have created a Stackblitz demo here
I think you are doing mistake in *ngIf quotations
If you have data that may in every time be different, mostly you use of If. but if is not ok in every where. It is better that you use of switch-case in your code like:
public string TestSwitchCase(string value)
{
switch (value)
{
case "John":
return null;
case "Jack":
return "Jack";
default:
break;
}
return null;
}
Now in angular, there is best way to do this in HTML code. this is ngSwitch and use like:
<container-element [ngSwitch]="switch_expression">
<some-element *ngSwitchCase="match_expression_1">...</some-element>
<some-element *ngSwitchCase="match_expression_2">...</some-element>
<some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
<ng-container *ngSwitchCase="match_expression_3">
<!-- use a ng-container to group multiple root nodes -->
<inner-element></inner-element>
<inner-other-element></inner-other-element>
</ng-container>
<some-element *ngSwitchDefault>...</some-element>
</container-element>
For more information See: This
GoodLuck.
[SOLUTION] : Simply use "&&" operator to add multiple conditions in *ngIf -
//TypeScript File - demo.ts
//Declaration
flag: any;
temp_array = [];
//Assignment
this.flag = true;
this.temp_array = [1,2];
<!--HTML File - demo.html-->
<div *ngIf="flag && temp_array.length>0">
Both *ngIf conditions passes
</div>
So basically what I want is to show
'Something1' when the job is not processing
'Something2' when the job is running and status is '0'
'Something3' when the job is running but status is something else
I tried the following code snippet, but it looks like let-status in the outer template will never get assigned. Not sure whether the implementation is correct or not, could anyone give me two cents on how to make this logic work?
Thanks.
<span *ngIf="!isProcessing(); else elseBlock">
Something1
</span>
<ng-template #elseBlock let-status="queryPlaybackStatus()" *ngIf="queryStatus() === '0'; else innerElseBlock">
<span>
Something2
</span>
<ng-template #innerElseBlock>
<span>
Something3
</span>
</ng-template>
</ng-template>
I would suggest defining a string in your component, where you have much better control over your logic. In the component, set the string to the appropriate text.
Then bind to that string in the template.
I don't have all of your needed logic here, but something like this:
isImage = false;
get statusText(): string {
if (!isProcessing()) {
this.isImage = false;
return 'Something1';
} else {
this.isImage = true;
return 'path to image';
}
}
This uses a getter, which provides a way for a component property to have logic.
Then just bind to statusText in the template.
<span *ngIf='!isImage'>
{{statusText}}
</span>
<span *ngIf='isImage>
<img ...>
</span>
<span *ngIf="!isProcessing(); else elseBlock">
Something1
</span>
<ng-container #elseBlock *ngIf="queryStatus() as status">
<span *ngIf="status === '0'; else innerElseBlock">
Something2
</span>
<ng-template #innerElseBlock>
<span>
Something3_with_{{status}}%
</span>
</ng-template>
</ng-container>
So basically this need a magic combination of ng-container and ng-template.
It sounds to me like you want ngSwitch. This allows you to switch based on logic, which you should encapsulate in your component, not your template. First, let's create a property that encapsulates our logic in our component:
public get currentStep(): number {
if (!this.isProcessing) {
return 1;
} else if (this.queryStatus === 0) {
return 2;
} else {
return 3;
}
}
Next, let's bind our ngSwitch statement to this newly-created property:
<div [ngSwitch]="currentStep">
<div *ngSwitchCase="1">
<p>Something1</p>
<div>Put whatever you want in here! Images, etc.</div>
</div>
<div *ngSwitchCase="2">
<p>Something2</p>
<p>Loading....</p>
</div>
<div *ngSwitchCase="3">
<p>Something3</p>
<p>All done!</p>
</div>
</div>
That should get you where you need to go. Since this is simple, I created a stackblitz example that will demonstrate a working version of this. In the example, you can click a button and watch the app cycle through all the steps (I'm using setTimeout to simulate a long-running server query).
I have the following code, and it displays the listed text and the pagination at the bottom all fine. But when I try to get the images from the child page into the list it errors for me. Any ideas why?
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "SiteLayout.cshtml";
}
<div role="main" id="main">
<div id="blogPageFeatures">
<!-- loop through all of the child pages (blog posts) and grab data to output as a summary -->
#{
var pageSize =3;
var page =1;int.TryParse(Request.QueryString["page"],out page);
var items =Model.Content.Children().Where(x => x.IsDocumentType("BlogArticle")).OrderByDescending(x => x.CreateDate);
var totalPages =(int)Math.Ceiling((double)items.Count()/(double)pageSize);
if(page > totalPages)
{
page = totalPages;
}
else if(page <1)
{
page =1;
}
}
#foreach(var item in items.Skip((page -1)* pageSize).Take(pageSize))
{
<a href="#item.Url">
<!-- The next image line is where it errors -->
<img src="#Umbraco.Media(item.Children.blogArticleImage).Url">
<h2>#item.Name</h2>
<p class="blogTileDate">#item.CreateDate.ToString("dd/MM/yy")</p>
</a>
}
<div class="clearfix"></div>
<!-- Pagination START -->
#if(totalPages >1)
{
<div class="pagination">
<ul>
#if(page >1)
{
<li>Prev</li>
}
#for(int p =1; p < totalPages +1; p++)
{
var active =(p == page)?" class=\"active\"":string.Empty;
<li#(Html.Raw(active))>
#p
</li>
}
#if(page <totalPages)
{
<li>Next</li>
}
</ul>
</div>
}
<!-- Pagination END -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
You are getting Model.Content.Children, which is a strongly typed collection of IPublishedContent objects. You are then calling item.Children.blogArticlImage, which is not going to work, as you're trying to get the a property on the children of the item, not a property of the item itself. You're also trying to use dynamic syntax, which won't work on the strongly typed objects. Try changing your image code to:
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage")).Url">
That should do te trick, one thing to note is that if an item doesn't have an image set, or the image that has been selected has been deleted, it'll throw an error. A more robust approach would be something like this:
var imageSrc = "ADD DEFAULT IMAGE PATH HERE";
var media = Umbraco.TypedMedia(item.GetPropertyValue<int>("blogArticleImage"));
if (media != null && !string.IsNullOrEmpty(media.Url))
{
imageSrc = media.Url;
}
<mig src="#imageSrc">
I have this rather simple Sitemap in a Sitecore solution using Razor;
#{
var root = Sitecore.Context.Database.GetItem(myRootId);
<div class="sitemap">
#RecursiveSitemap(root)
</div>
}
#helper RecursiveSitemap(Item parentItem){
<ul>
#{
Sitecore.Collections.ChildList childList = parentItem.Children;
foreach (Item child in childList)
{
<li>#child["title"]</li>
if (child.Children.Count != 0)
{
RecursiveSitemap(child);
}
}
}
</ul>
}
It returns the first level as expected, but no more. I cannot figure out why - what am i missing?
You forgot to add the # to the second call to RecursiveSitemap(child) so it won't write out the result.
It must be:
if (child.Children.Count != 0)
{
#RecursiveSitemap(child);
}
I have the following code block that nearly works. It completes the outer #foreach cycle and starts each sub #foreach cycle. It puts out the first image in each pair but then outputs
"} if(countItem==1) (" which can be read in the browser.
Any advice would be appreciated
Craig
Code:-
#inherits umbraco.MacroEngines.DynamicNodeContext
#{
int level = 2;
var subjects = #Model.AncestorOrSelf(level).Children.Where("nodeTypeAlias == \"SideGallerySectionHeading\"");
int countItem = 1;
if (subjects != null) {
<div class="highslide-gallery">
#foreach(var subjectName in subjects){
<h3>#subjectName.Name</h3>
foreach(dynamic image in subjectName.Children) {
if(countItem==1){<div class="picrowdiv">}
<div class="picdiv">
<a href="#image.Media("itemLarge","umbracoFile")" class="highslide" onclick="return hs.expand(this)">
<img src="#image.Media("itemThumbnail","umbracoFile")" width="100" height="100" alt="test"></a>
<div class="highslide-caption">
#image.bodyText
</div>
<p>#image.caption</p>
</div>
if(countItem==1){</div>}
countItem++;
if(countItem>2){countItem=1;}
}
}
</div>
}
}
You may try to rewrite the line
if(countItem==1){</div>}
into
#if(countItem==1){
</div>
}
Razor is quite picky about closing your html tags so you may have to refactor to make this work. I like ternary operators for stuff like this
try
#(countItem==1 ? "</div>")
#countItem++;
#(countItem>2 ? countItem=1)
you can also do else with a :
so
#(countItem==1 ? "</div>" : "")