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 5060 posts 15522 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 5060 posts 15522 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 5060 posts 15522 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 5060 posts 15522 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 4908 posts 12265 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 5060 posts 15522 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

Please Sign in or register to post replies

Write your reply to:

Draft