如何在ASP.net页面中使用XSLT文件显示CMS集合 [英] How do display a CMS collection in an ASP.net page using an XSLT file

问题描述

articleDisplayThumb XSLT文件（使用 DynamicParameter ID查看集合）：

 <？xml version =1.0encoding =UTF-8？& 
< xsl：stylesheet version =1.0xmlns：xsl =http://www.w3.org/1999/XSL/Transform> 
< xsl：template name =homeArticleThumbmatch =/> 
< xsl：for-each select =Collection / Content> 
< div class =col span_1_of_3style =height：150px; border：1px solid black;> 
< div class =test2> 
< div style =float：left; width：28％padding-right：2％; height：100％;> 
 {在此展示图片并将其链接到文章}  - > artThumbImg 
 
< / div> 
< div style =float：left; width：58％; height：100％;> 
< div style =width：100％; height：48％; padding-bottom：2％;> 
 {显示标题并在此连结}  - > artTitle 
 
< / div> 
< div style =width：100％; height：48％; overflow：hidden; text-overflow：ellipses; white-space：nowrap;> 
 {显示文字与...在这里}  - > partial artText（a Teaser ...）
 
< / div> 
< / div> 
< / div> 
< / div> 
< / xsl：for-each> 
< / xsl：template> 
< / xsl：stylesheet> 
  

上述类的CSS（我试图让它响应屏幕大小， ：

articleDisplayThumb XSLT file (Use the DynamicParameter ID to go through the collection):

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
  <xsl:for-each select="Collection/Content">
    <div class="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          {DISPLAY THE IMAGE HERE AND MAKE IT LINK TO THE ARTICLE} --> artThumbImg

        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%;">
            {DISPLAY THE TITLE AND LINK HERE} --> artTitle

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap;">
            {DISPLAY THE TEXT WITH "..." Here} --> partial artText (a Teaser...)

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

The CSS for the classes above (I am trying to make it responsive to screen size, using this example: http://jsfiddle.net/Lry4z15m/2/):

/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}


/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%; 
    }
    .span_2_of_3 {
        width: 100%; 
    }
    .span_1_of_3 {
        width: 98%;
    }
}

I am calling the above from my ASP.net page like this:

<CMS:ContentBlock ID="CB" runat="server" DynamicParameter="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />

The collection with ID 127 looks like this (The link for the title will have to be something like this: mypage?linkit={ID} where the ID is for each article when clicked):

What I would like it to end up, like this (The image on the left is artThumb, the blue is the artTitle and the black is the artText):

The XPaths:

How can I complete the XSLT, so I can achieve the end result, with the same style as the one used in JSFiddle?

UPDATE:

Did this so far...

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="homeArticleThumb" match="/">
  <xsl:for-each select="Collection/Content">
    <div class="col span_1_of_3" style="height: 150px; border: 1px solid black;">
      <div class="test2">
        <div style="float: left; width: 28% padding-right: 2%; height: 100%;">
          <xsl-copy-of select="/root/NewArticle/artThumb" />
        </div>
        <div style="float: left; width: 58%; height: 100%;">
          <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;">
            <a href=""><xsl:value-of select="/root/NewArticle/artTitle" /></a>

          </div>
          <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">
            <xsl:value-of select="/root/NewArticle/artText" />

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

解决方案

I would actually recommend against the collection control and opt for the the content view templated control which allows for filtering on collections as well. This should work in versions 8.6 and up and is much easier to style than using an xslt as it uses standard asp.net and c# markup.

Documentation on this control can be found here. http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2

这篇关于如何在ASP.net页面中使用XSLT文件显示CMS集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！