dynamic class allocation with razor - Razor

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Max Davidse 16 posts 37 karma points

Apr 01, 2011 @ 10:42

dynamic class allocation with razor?

Razor

Hey there,

So far my first steps into Umbraco are going reasonably well..but every now and then I will bump into something I don't know how to do yet.

I am building a list of techniques, that are build up from a parent node, that is added as a parameter to a macro. This macro uses razor to build up the list, however...our designer found it funny to build it conditionally. Each 4th item gets a different style compared to the others.

Right now I have this working, but I am sure this can be done more ellegantly.

The below script is how I am doing this right now. As you can see I have tried to do it differently, but using a classextender, which I would set to " space" or nothing depending on the teller. I then wanted to concatenate that to the "class=technieken" part for the first three, and not for the last one.

I tried using

None of those tries worked so I am now stuck with repeating the code which is silly. How do I concat that classextender in razor? Thanks people.

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines;
@using System.Linq;
 
@{
    var teller = 0;
    var classextender = "";
    dynamic node = new DynamicNode(@Parameter.ParentID);
  <h2>Technieken</h2>
  <div class="techniekenOverview">
    @foreach (var c in node.Children)
    {
        teller += 1;
        if (teller % 4 != 0)
        {
      <div onClick="window.location.href='@c.Url';" class="technieken space"> 
        <a href="@c.Url">@c.techniekTitle</a>
        <p>@c.techniekDescription</p>
        <div class="imagePlaceHolder"><img src="@c.techniekImage.mediaItem.Image.umbracoFile" alt="@c.techniekTitle" border="0" /></div>
      </div>
        }
        else
        {
      <div onClick="window.location.href='@c.Url';" class="technieken"> 
        <a href="@c.Url">@c.techniekTitle</a>
        <p>@c.techniekDescription</p>
        <div class="imagePlaceHolder"><img src="@c.techniekImage.mediaItem.Image.umbracoFile" alt="@c.techniekTitle" border="0" /></div>
      </div>
        }
    }
  </div>
  <br class="clearfloat" />
}

Copy Link

Sebastiaan Janssen 5045 posts 15478 karma points MVP admin hq

Apr 01, 2011 @ 10:49
0
Actually, you're almost there:
```
<div onClick="window.location.href='@c.Url';" class="technieken@classextender">
```
The last quotation mark was moved to the end. :-)
Copy Link
Sebastiaan Janssen 5045 posts 15478 karma points MVP admin hq

Apr 01, 2011 @ 10:51

0

By the way, doing "% 4 != 0" is not the same as "> 3", but I'm guessing you know what you're doing there. =)

Copy Link

Max Davidse 16 posts 37 karma points

Apr 01, 2011 @ 10:58

Well I hope so. ;) I do % 4 != 0 so every first 3 will always get the classextender set to " space" just every 4th one, which would result in the modulus being 0, gets the other class.

I changed the script to what you see below, but get an error message.

Error loading Razor Script GetTechnieken.cshtml
c:\inetpub\wwwroot\ecologics\Umbraco.Website\macroScripts\GetTechnieken.cshtml(16): error CS0201: Only assignment, call, increment, decrement, and new object expressions can be used as a statement

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines;
@using System.Linq;
 
@{
    var teller = 0;
    var classextender = "";
    dynamic node = new DynamicNode(@Parameter.ParentID);
  <h2>Technieken</h2>
  <div class="techniekenOverview">
    @foreach (var c in node.Children)
    {
        teller += 1;
        if (teller % 4 != 0)
        {
            classextender == " space";
        }
        else
        {
            classextender == "";
        }
      <div onClick="window.location.href='@c.Url';" class="technieken@classextender"> 
        <a href="@c.Url">@c.techniekTitle</a>
        <p>@c.techniekDescription</p>
        <div class="imagePlaceHolder"><img src="@c.techniekImage.mediaItem.Image.umbracoFile" alt="@c.techniekTitle" border="0" /></div>
      </div>
    }
  </div>
  <br class="clearfloat" />
}

Copy Link

Max Davidse 16 posts 37 karma points

Apr 01, 2011 @ 11:11
0
*slaps his forehead*

That was just stupid, that needed to be

classextender = "space";

Not

classextender == "space";

Let's just say it is early. But now this is fixed.

Oh, I rewrote it a tiny bit:
```
<div onClick="window.location.href='@c.Url';" class="@(string.Format("technieken{0}", classextender))"> 
```
Copy Link
Sebastiaan Janssen 5045 posts 15478 karma points MVP admin hq

Apr 01, 2011 @ 11:12
0
See, I knew you knew what you were doing. :)

Oh actually, you also need to put a space in:
```
<div onClick="window.location.href='@c.Url';" class="technieken @classextender">
```
If that doesn't work, try to output @classextender elsewhere and see what happens. Maybe if it's empty your need to do @classextender.ToString()?
Copy Link
Sebastiaan Janssen 5045 posts 15478 karma points MVP admin hq

Apr 01, 2011 @ 11:14

0

Ah, excellent, we're posting at the same time. No extra space needed then, as you really want to concat them. Great, glad it works!

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib

Apr 01, 2011 @ 12:41
0
What if I want the class attribute itself to by dynamic? For example in an li list only the last li needs the class="last". With xslt I could use xsl:attribute inside an if statement. How can I do that with razor? Can I just do this?
```
classextender = "class=\"last\"";
```
Jeroen
Copy Link
Sebastiaan Janssen 5045 posts 15478 karma points MVP admin hq

Apr 01, 2011 @ 13:36

0

You can do it with First() and Last() in 4,7.1. For now you can first count the results and do a for loop instead of a foreach loop. So when i == myCount you can add the "last" class.

Copy Link
Toni Becker 146 posts 425 karma points

Apr 01, 2011 @ 13:40

0

Hy Sebastiaan i know i'm posting terrible questions :) could you have a look at my post please ? Need some help for solving and integrating it into a customer project.

Here is the Link Post

Copy Link
is working on a reply...

Please Sign in or register to post replies