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
    Max Davidse
    0

    dynamic class allocation with 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

    <div onClick="window.location.href='@c.Url';" class="technieken" + classextender>

    <div onClick="window.location.href='@c.Url';" class="technieken"@classextender>

    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" />
    }

  • Sebastiaan Janssen 5061 posts 15544 karma points MVP admin hq
    Apr 01, 2011 @ 10:49
    Sebastiaan Janssen
    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. :-)


  • Sebastiaan Janssen 5061 posts 15544 karma points MVP admin hq
    Apr 01, 2011 @ 10:51
    Sebastiaan Janssen
    0

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

  • Max Davidse 16 posts 37 karma points
    Apr 01, 2011 @ 10:58
    Max Davidse
    0

    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" />
    }

  • Max Davidse 16 posts 37 karma points
    Apr 01, 2011 @ 11:11
    Max Davidse
    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))"> 
  • Sebastiaan Janssen 5061 posts 15544 karma points MVP admin hq
    Apr 01, 2011 @ 11:12
    Sebastiaan Janssen
    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()?

  • Sebastiaan Janssen 5061 posts 15544 karma points MVP admin hq
    Apr 01, 2011 @ 11:14
    Sebastiaan Janssen
    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!

  • Jeroen Breuer 4909 posts 12266 karma points MVP 5x admin c-trib
    Apr 01, 2011 @ 12:41
    Jeroen Breuer
    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

  • Sebastiaan Janssen 5061 posts 15544 karma points MVP admin hq
    Apr 01, 2011 @ 13:36
    Sebastiaan Janssen
    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. 

     

  • Toni Becker 146 posts 425 karma points
    Apr 01, 2011 @ 13:40
    Toni Becker
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies