Copied to clipboard

Flag this post as spam?

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


  • Kasper Dyrvig 246 posts 379 karma points
    May 29, 2012 @ 11:26
    Kasper Dyrvig
    0

    xsl:attribute done Razor?

    I'm (still) new in the Razor world. I'm trying to do a multi level menu with jQuery.

    My goal:

    <ul class="menuLevel-1">
      <li><a href="/" class="navCurrent">Start</a></li>
      <li onclick="$(this).children('a').toggleClass('navCurrent'); $(this).children('ul').slideToggle('fast');"><a>Information</a>
        <ul class="menuLevel-2">
          <li><a href="#">Submenu item 1</a></li>
          <li><a href="#">Submenu item 2</a>
            <ul class="menuLevel-3">
              <li><a href="#">Subsubmenu item 1</a></li>
              <li><a href="#">Subsubmenu item 2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    Notice...

    • the current page has the class "navCurrent" added to the anchor
    • the menu item that contains submenu items has some jquery code.
    In XSLT I would have done it somewhat like this:
    <ul>
      <li><a href="/"><if:xsl test="$currentPage/@id = [nodeId]"><xsl:attribute name="class">navCurrent</xsl:attribute><xsl:if>Start</a></li>
      <li>
        <a onclick="$(this).children('a').toggleClass('navCurrent'); $(this).children('ul').slideToggle('fast');>Information</a>
        <if test="">
          <ul>
            <xsl:for-each select="umbraco.library:GetXmlNodeBtId([nodeId])/* [@isDoc and umbraciNaviHide != 1]">
              <li><a href="{umbaco.library:NiceUrl(./@id)]"><if:xsl test="./@id = ./@id"><xsl:attribute name="class">navCurrent</xsl:attribute><xsl:if><xsl:value-of select="./@nodeName"/></a></li>
            </xsl:for-each>
          </ul>
        </xsl:if>
      </li>
    </ul>

     

    But how do I solve it with Razor? My primary issue is to add a class to an element depending...

  • Kasper Dyrvig 246 posts 379 karma points
    May 29, 2012 @ 12:50
    Kasper Dyrvig
    0

    I have got this far in Razor:

    @{
      var rootNode = CurrentPage.AncestorsOrSelf.Last();
    }
    @if (rootNode.Children.Where("umbracoNaviHide != @0", "True").Any())
    {
      <ul class="menuLevel-1">
        <li><a href="@rootNode.Url" title="I dag" @if(CurrentPage.Id == @rootNode.Id){<text>class=navCurrent</text>}>I dag</a></li>
        @foreach(var childPage in rootNode.Children.Where("umbracoNaviHide != @0", "True"))
        {
          <li>
            <a href="@childPage.Url" @if(CurrentPage.Id == @childPage.Id){<text>class=navCurrent</text>} title="@childPage.Name">@childPage.Name</a>
            @if(@childPage.Children.Count() > 0)
            {
              @subPages(childPage.Children)
            }
          </li>
        }
      </ul>
    }
    @helper subPages(dynamic pages)
    {
      if (pages.Any())
      {
        var naviLevel = pages.First().Level;
        <ul class="menuLevel-@naviLevel">
          @foreach(var page in pages.Where("umbracoNaviHide != @0", "True"))
          {
            <li>
              <a href="@page.Url" title="@page.Name" @if(CurrentPage.Id == @page.Id){<text>class=navCurrent</text>}>@page.Name</a>
              @if(@page.Children.Count() > 0)
              {
                @subPages(page.Children)
              }
            </li>
          }
        </ul>
      }
    }
  • Grant Thomas 291 posts 324 karma points
    May 29, 2012 @ 13:18
    Grant Thomas
    1

    You can use a ternary operation to get some inline output, something like the following:

    <a href="@childPage.Url" @(CurrentPage.Id == childPage.Id ? "class='navCurrent'" : "") title="@childPage.Name">@childPage.Name</a>

    I'm wondering if there should be some curly braces in there - give it a go.

    If the inline syntax requires any tweaking, it might just be simpler to do:

    var selected = CurrentPage.Id == childPage.Id ? "class='navCurrent'" : "";
    <a href="@childPage.Url" title="@childPage.Name" @selected>@childPage.Name</a>

     

     

  • Kasper Dyrvig 246 posts 379 karma points
    May 29, 2012 @ 15:24
    Kasper Dyrvig
    0

    Hi Grant

    Your first suggestion works just fine (though I had to remove the ' in class='navCurrent' - any tips for actually getting the qoutes (")?)

    Any suggestions for getting the javascript on the li-element when the node has children?

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    May 29, 2012 @ 15:43
    Bo Damgaard Mortensen
    0

    Hi Kasper,

    You should be able to get the quotationmarks by good ol' escaping ;-)

    Example:

    var selected =CurrentPage.Id== childPage.Id?"class=\"navCurrent\"":"";

    All the best,

    Bo

  • Grant Thomas 291 posts 324 karma points
    May 29, 2012 @ 15:55
    Grant Thomas
    0

    Whoa! No need to use double quotes only to escape them - just use single quotes inside the string ("class='abc'").

    When I get time I can help you with the other stuff you mentioned, sure.

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    May 29, 2012 @ 16:09
    Bo Damgaard Mortensen
    0

    What's so bad about double-quotes, Grant? :-) Asking out of curiousity.

  • Kasper Dyrvig 246 posts 379 karma points
    May 29, 2012 @ 16:17
    Kasper Dyrvig
    0

    Maybe I can answer that by showing what I get...

    • "class=navCurrent"  =  class=navCurrent
    • "class=navCurrent"  =  class=&#39;navCurrent&#39;
    • "class=navCurrent"  =  class=&quot;navCurrent&quot;
    • "class="navCurrent""  =  Error
    • "class='navCurrent'"  =  class=&#39;navCurrent&#39;
  • Grant Thomas 291 posts 324 karma points
    May 29, 2012 @ 16:44
    Grant Thomas
    0

    The first three are the same (?) how come you get different output?

    The fourth, with double quotes, won't work that way and you would need to escape the inner double quotes with backslashes (as per Bo's suggestion).

    The fifth one *should* be correct, but it seems to me the output is being ran through an encoder to encode HTML entities before being sent to the browser - is this the case?

    My gripe with the double quotes isn't that there is anything intrinsically wrong with them - they're just as valuable as most other characters, it's just that in cases like this it's a really easy way to get your code looking more messay than it needs to be, and really quickly. If you can get away from the drastics of having to escape stuff due to a 'safer' or other option, then do so. This stands in most situations, but is particularly pertinent when we're coding among HTML, where we could end up having to escape this kind of stuff on every line, twice or thrice. Nasty.

  • Kasper Dyrvig 246 posts 379 karma points
    May 30, 2012 @ 08:47
    Kasper Dyrvig
    0

    Hm.... My examples seems to bee modifired by the RTE in the forum. Let me try again.

    "class=navCurrent"  =  class=navCurrent
    "class=\'navCurrent\'"  =  class=&#39;navCurrent&#39;
    "class=\"navCurrent\""  =  class=&quot;navCurrent&quot;
    "class="navCurrent""  =  Error
    "class='navCurrent'"  =  class=&#39;navCurrent&#39;

    But now back to the question :-)

    I need a tip on how to add a line of javascript to a <li> that contais children.

  • Grant Thomas 291 posts 324 karma points
    May 30, 2012 @ 10:48
    Grant Thomas
    0

    Kasper, for the Javascript you could do much the same thing; something like this:

    Preformat the script output as a string literal:

    var script = "onclick='$(this).children('a').toggleClass('navCurrent'); $(this).children('ul').slideToggle('fast');'";

    Now add it conditionally:

    <a href="#" @(thingThatMightHaveChildren.Any() ? script : "")>ABC</a>
  • Kasper Dyrvig 246 posts 379 karma points
    May 30, 2012 @ 14:47
    Kasper Dyrvig
    0

    Quick question: What is the .Any() for?

  • Grant Thomas 291 posts 324 karma points
    May 30, 2012 @ 14:50
    Grant Thomas
    1

    To check if the node has any sub-nodes to conditionally add the script - in fact, did I get that right? You might need to alter it for something like `node.Children.Any()` instead.

  • Kasper Dyrvig 246 posts 379 karma points
    May 30, 2012 @ 15:10
    Kasper Dyrvig
    0

    Okay. Thanks for your help! I really appreciate it.

Please Sign in or register to post replies

Write your reply to:

Draft