Copied to clipboard

Flag this post as spam?

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


  • Keith R Hubbard 175 posts 403 karma points
    Nov 27, 2011 @ 23:37
    Keith R Hubbard
    0

    Converting XSLT to Razor

    I am starting to try and convert my files over to razor but some insight would be nice

     

    Existing XSLT

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
        <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


        <xsl:output method="xml" omit-xml-declaration="yes"/>

        <xsl:param name="currentPage"/>

        <xsl:template match="/">@Model
          <div id="galLinks">
            Quick Links:  
            <xsl:variable name="parentNode" select="$currentPage/.."/>

           <xsl:for-each select="$parentNode/ancestor-or-self::*[@isDoc] [@level=2]/* [@isDoc][string(umbracoNaviHide) != '1']">
      
        <a href="{umbraco.library:NiceUrl(@id)}">
          <xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
          <xsl:value-of select="@nodeName" />
        </a>  
      
    </xsl:for-each>
    </div>
        </xsl:template>

    </xsl:stylesheet>

     

    Razor code Attempt

    @using umbraco.MacroEngines
    @inherits umbraco.MacroEngines.DynamicNodeContext

    @Model

    <div id="galLinks">
            Quick Links:
      <ul>
        @foreach (var node in Model.AncestorOrSelf(2).Children.Where("Visible"))
        {
          <li><a href="@node.Url" @node.Name</a></li>  
    </ul>
    </div>

     

     


  • Dan Diplo 1554 posts 6205 karma points MVP 6x c-trib
    Nov 28, 2011 @ 14:11
    Dan Diplo
    0

    What insight do you want? :D

  • Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq
    Nov 28, 2011 @ 20:59
    Sebastiaan Janssen
    0
    So, you're missing a few characters here and there, but overall your code looks good. As Dan asks: what is it you want from us? Is it not working? Got any errors you want to share? Could you describe what your input is and your output should be?
    This is a bit more complete, note that you do not need the @inherit statements:
    <div id="galLinks">
    Quick Links:
    <ul>
    @foreach (var node in Model.AncestorOrSelf(2).Children.Where("Visible"))
    {
    <li><a href="@node.Url">@node.Name</a></li>
    }
    </ul>
    </div>
  • Keith R Hubbard 175 posts 403 karma points
    Nov 29, 2011 @ 04:39
    Keith R Hubbard
    0

    To explain it in a nutshell, this is the first piece of my gallery using Fancybox for image gallery's. I am tring to understand razor as i just got a fair grasp on xslt.  This gallery started from the original CWS gallery and has changed as Umbraco has improved and I have learned .  I uses Daniels image resizer.  To fulling help here is all the current code

     

    Template

      Galleries List Page

    <%@ Master Language="C#" MasterPageFile="~/masterpages/ContentMaster.master" AutoEventWireup="true" %>
    <asp:Content id="GalleriesListPagecontent" ContentPlaceHolderID="ContentMasterContentPlaceHolder" runat="server"><h1><umbraco:Item runat="server" field="PageHeader"/></h1>
    <div id="umbracoWrapper">
        <div id="leftContent">
         <umbraco:Item runat="server" field="bodyText"/>
    <!-- Umbraco macro for galleries list here -->

      <umbraco:Macro runat="server" Alias="XSLTListGalleries" macroAlias="XSLTListGalleries"></umbraco:Macro>
      </div>
       <div id="divrightpages">
            <div id="divrightboxpages"></div>
            <div id="divrightbox"></div>
        </div>
    </div>     
      <div id="facebook">
                <umbraco:Item field="facebook" runat="server" recursive="true"></umbraco:Item>
               </div>
    </asp:Content>

    XSLT

    ListGalleries.xslt

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
        <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


        <xsl:output method="xml" omit-xml-declaration="yes"/>

        <xsl:param name="currentPage"/>

        <!-- Get Properties of how to sort the Galleries -->
        <xsl:variable name="SortOrder" select="$currentPage/sortOrder" />
        <xsl:variable name="SortBy" select="$currentPage/sortBy" />

        <!--
        =============================================================
        Lets setup a variable called DataType. If the user has
        chosen 'sortOrder' from the sortBy dropdown list, then we
        need to set the datatype variable to = number otherwise it
        will sort the data wrongly.    
        =============================================================
        -->
        <xsl:variable name="DataType">
            <xsl:choose>
                <xsl:when test="$SortBy='sortOrder'">
                    <xsl:value-of select="'number'" />
                </xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="'text'" />
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>


        <xsl:template match="/">

            <div class="galleryGrid clearfix">

                <!--
                =============================================================
                For Each child node of the currentpage WHERE the node
                type alias is equal to Gallery
                =============================================================
                -->
                <xsl:for-each select="$currentPage/CWS_Gallery">
                   
                    <!--
                    =============================================================
                    Lets apply our user specified sorting from our variables
                    =============================================================
                    -->
                   
                    <!--
                    =============================================================
                    Lets Only display the photo galleries that have photos
                    =============================================================
                    -->
                    <xsl:if test="count(current()/CWS_Photo) &gt;=0">
                        
                        <div>
                            <!--
                            =============================================================
                            Lets change the class on the <div> tag above dynamically
                            =============================================================
                            -->                    
                            <xsl:attribute name="class">
                                <xsl:choose>
                                    <!--
                                    =============================================================
                                    When the position in the for each loop has 1 remainder over
                                    
                                    For Example:
                                    
                                    1/3 = 0 & 1 remainder    1 mod 3 = 1
                                    2/3 = 0 & 2 remainders    2 mod 3 = 2
                                    3/3 = 1 & 0 remainders    3 mod 3 = 0
                                    =============================================================
                                    -->
                                    <xsl:when test="position() mod 3 = 1">
                                        <xsl:text>
                                            first item left
                                        </xsl:text>
                                    </xsl:when>

                                    <!--
                                    =============================================================
                                    Otherwise lets set it to 'item left'
                                    =============================================================
                                    -->
                                    <xsl:otherwise>
                                        <xsl:text>
                                            item left
                                        </xsl:text>
                                    </xsl:otherwise>
                                </xsl:choose>
                            </xsl:attribute>                       
                        
                            <a href="{umbraco.library:NiceUrl(@id)}">

                                <!--
                                =============================================================
                                Gallery Thumbnail dimensions: 208px x 108px
                                =============================================================
                                -->
                                
                                <xsl:choose>
                                    <!--
                                    =============================================================
                                    When GalleryThumbnail is NOT empty then display the image
                                    =============================================================
                                    -->
                                    <xsl:when test="galleryThumbnail != ''">                                    
                                        <img src="{galleryThumbnail}" alt="{@nodeName}"/>
                                    </xsl:when>
                                    <xsl:otherwise>
                                        <!--
                                        =============================================================
                                        Otherwise we use a default blank placeholder
                                        =============================================================
                                        -->                                    
                                        <img src="/media/2268/photoplaceholder.jpg" alt="{@nodeName}"/>
                                    </xsl:otherwise>
                                </xsl:choose>
                                <br />
                                <!--<xsl:value-of select="@nodeName"/>-->
                            </a>
          <br />

                            <!--
                            =============================================================
                            Setup a variable called PhotoText
                            =============================================================
                            -->
                            <xsl:variable name="PhotoText">
                                <xsl:choose>
                                    <!--
                                    =============================================================
                                    If the count of photos is greater than 1
                                    =============================================================
                                    -->
                                    <xsl:when test="count(current()/CWS_Photo) &gt; 1">
                                        <xsl:value-of select="' Photos'" />
                                    </xsl:when>

                                    <!--
                                    =============================================================
                                    Otherwise we must have 1 photo
                                    =============================================================
                                    -->
                                    <xsl:otherwise>
                                        <xsl:value-of select="' Photo'" />
                                    </xsl:otherwise>
                                </xsl:choose>
                            </xsl:variable>

                            <span>
                                <!-- eg text output: 2 Photos -->
                                <xsl:value-of select="count(./* [@isDoc])"/>
                                <xsl:value-of select="$PhotoText"/>
                            </span>
                        </div>

                        <!--
                        =============================================================
                        After very 3rd item insert a <br/>
                        =============================================================
                        -->
                        <xsl:if test="position() mod 3 = 0">
                            <br class="clearBoth"/>
                        </xsl:if>


                    </xsl:if>

                </xsl:for-each>
            </div>

        </xsl:template>

    </xsl:stylesheet>

    The above code list galleryThumbs.  Then the Gallery itself. 

    Gallery

    <%@ Master Language="C#" MasterPageFile="~/masterpages/ContentMaster.master" AutoEventWireup="true" %>
    <asp:Content id="Gallerycontent" ContentPlaceHolderID="ContentMasterContentPlaceHolder" runat="server"><h1><umbraco:Item runat="server" field="PageHeader"/></h1>
    <div id="umbracoWrapper">
    <div id="leftContent">
      <umbraco:Item runat="server" field="bodyText"/>
    <!-- Umbraco macro for listing photos here -->
    <umbraco:Macro Alias="ParentPageLink" runat="server"></umbraco:Macro>
    <umbraco:Macro Alias="GalleryLinks" runat="server"></umbraco:Macro>
    <h2><umbraco:Item field="headerText" runat="server"></umbraco:Item></h2>
      <umbraco:Macro runat="server" Alias="XSLTListPhotos" macroAlias="XSLTListPhotos"></umbraco:Macro>
      </div>
       <div id="divrightpages">
            <div id="divrightboxpages"></div>
            <div id="divrightbox"></div>
        </div>
    </div>  
      <div id="facebook">
                <umbraco:Item field="facebook" runat="server" recursive="true"></umbraco:Item>
               </div>
    </asp:Content>

    This Gallery Template three Macros, ParentPageLink.xslt, GalleryLinks.xslt and ListPhotos.xslt

    ParentPageLink.xslt

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
        <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


        <xsl:output method="xml" omit-xml-declaration="yes"/>

        <xsl:param name="currentPage"/>

        <xsl:template match="/">

            <xsl:variable name="parentNode" select="$currentPage/.."/>

            <a class="leftArrow backLink" href="{umbraco.library:NiceUrl($parentNode/@id)}">
                Return To <xsl:value-of select="$parentNode/@nodeName"/>
            </a>

        </xsl:template>

    </xsl:stylesheet>

    GalleryLinks.xslt

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
        <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


        <xsl:output method="xml" omit-xml-declaration="yes"/>

        <xsl:param name="currentPage"/>

        <xsl:template match="/">
          <div id="galLinks">
            Quick Links:  
            <xsl:variable name="parentNode" select="$currentPage/.."/>

           <xsl:for-each select="$parentNode/ancestor-or-self::*[@isDoc] [@level=2]/* [@isDoc][string(umbracoNaviHide) != '1']">
      
        <a href="{umbraco.library:NiceUrl(@id)}">
          <xsl:attribute name="title"><xsl:value-of select="@nodeName" /></xsl:attribute>
          <xsl:value-of select="@nodeName" />
        </a>  
      
    </xsl:for-each>
    </div>
        </xsl:template>

    </xsl:stylesheet>

     

    ListPhotos.xslt

     

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>


    <xsl:template match="/">
      <div class="photoGrid clearfix">
        <xsl:for-each select="$currentPage/* [@isDoc][string(umbracoNaviHide) != '1']">
          <div>
            <xsl:attribute name="class">
              <xsl:choose>
                <xsl:when test="position() mod 4 = 1">
                  <xsl:text>
                 first item left
             </xsl:text>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:text>
                  item left
             </xsl:text>
                </xsl:otherwise>
              </xsl:choose>
            </xsl:attribute>
            <!-- get first photo thumbnail -->
            <a id="gallery" rel="gal">
              <xsl:attribute name="href">
                <xsl:value-of select="./FullImage"/>
              </xsl:attribute>
              <img src="{./ThumbImage}" alt="{@nodeName}"/>
            </a>
          </div>
          <xsl:if test="position() mod 4 = 0">
            <br class="clearBoth"/>
          </xsl:if>
        </xsl:for-each>
      </div>
    </xsl:template>

    </xsl:stylesheet>

    And here is the code for the Photo which has one macro

    Photo

    <%@ Master Language="C#" MasterPageFile="~/masterpages/ContentMaster.master" AutoEventWireup="true" %>
    <asp:Content id="Photocontent" ContentPlaceHolderID="ContentMasterContentPlaceHolder" runat="server"><h1><umbraco:Item runat="server" field="pageName"/></h1>
    <umbraco:Item runat="server" field="bodyText"/>
    <div class="Photo">
      <img src="<umbraco:Item runat='server' field='FullImage'/></umbraco:Macro>" alt="<umbraco:Item runat='server' field='pageName'/>"/>
      <div class="PhotoNav">
        <!-- Photo Nav macro -->
        <umbraco:Macro runat="server" Alias="XSLTPhotoNav" macroAlias="XSLTPhotoNav" />
      </div>
    </div></asp:Content>

    ListPhotos.xslt

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


    <xsl:output method="xml" omit-xml-declaration="yes"/>

    <xsl:param name="currentPage"/>


    <xsl:template match="/">
      <div class="photoGrid clearfix">
        <xsl:for-each select="$currentPage/* [@isDoc][string(umbracoNaviHide) != '1']">
          <div>
            <xsl:attribute name="class">
              <xsl:choose>
                <xsl:when test="position() mod 4 = 1">
                  <xsl:text>
                 first item left
             </xsl:text>
                </xsl:when>
                <xsl:otherwise>
                  <xsl:text>
                  item left
             </xsl:text>
                </xsl:otherwise>
              </xsl:choose>
            </xsl:attribute>
            <!-- get first photo thumbnail -->
            <a id="gallery" rel="gal">
              <xsl:attribute name="href">
                <xsl:value-of select="./FullImage"/>
              </xsl:attribute>
              <img src="{./ThumbImage}" alt="{@nodeName}"/>
            </a>
          </div>
          <xsl:if test="position() mod 4 = 0">
            <br class="clearBoth"/>
          </xsl:if>
        </xsl:for-each>
      </div>
    </xsl:template>

    </xsl:stylesheet>

    I am glad that razor will eliminate a lot of code

     

  • Keith R Hubbard 175 posts 403 karma points
    Nov 29, 2011 @ 05:54
    Keith R Hubbard
    0

    This is what i have for the the Parent Link

     

    @using umbraco.MacroEngines
    @inherits umbraco.MacroEngines.DynamicNodeContext

    @Model

    <ul>
    var Node = @Model.NodeById();
    @foreach(var level in Node.AncestorOrSelf.Parent)

    {
      <li><a class="leftArrow backLink" href="@level.Url">@level.Name</a></li>
      }
    </ul>

     

    this is the xslt version

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [
        <!ENTITY nbsp "&#x00A0;">
    ]>
    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library"
      exclude-result-prefixes="msxml umbraco.library">


        <xsl:output method="xml" omit-xml-declaration="yes"/>

        <xsl:param name="currentPage"/>

        <xsl:template match="/">

            <xsl:variable name="parentNode" select="$currentPage/.."/>

            <a class="leftArrow backLink" href="{umbraco.library:NiceUrl($parentNode/@id)}">
                Return To <xsl:value-of select="$parentNode/@nodeName"/>
            </a>

        </xsl:template>

    </xsl:stylesheet>

     

  • Sebastiaan Janssen 5060 posts 15522 karma points MVP admin hq
    Nov 29, 2011 @ 08:07
    Sebastiaan Janssen
    0

    If you're learning Razor, you might want to check out the videos on Umbraco.tv (free until the end of the year) and my Razor examples project (don't install as a package, but open as a site, make sure to read the instructions).

Please Sign in or register to post replies

Write your reply to:

Draft