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

查看：189
本文介绍了如何使用XSLT文件显示在ASP.net页面CMS集合的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

articleDisplayThumb XSLT文件（使用 DynamicParameter ID要经过收集）：

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的xsl：样式版本=1.0的xmlns：XSL =htt​​p://www.w3.org/1999/XSL/Transform＆GT;
＆LT; XSL：模板名称=homeArticleThumb匹配=/＆GT;
  ＆LT;的xsl：for-每个选择=收藏/内容＆GT;
    ＆LT; D​​IV CLASS =山坳span_1_of_3的风格=高度：150像素;边界：1px的纯黑色;＆GT;
      ＆LT; D​​IV CLASS =test2的＆GT;
        ＆LT; D​​IV的风格=浮动：左;宽度：28％的填充右：2％;身高：100％;＆GT;
          {显示图像的位置，使它的文章链接}  - ＆GT; artThumbImg        ＆LT; / DIV＆GT;
        ＆LT; D​​IV的风格=浮动：左;宽度：58％;身高：100％;＆GT;
          ＆LT; D​​IV的风格=宽度：100％;高度：48％;填充底：2％;＆GT;
            {显示标题和链接在这里}  - ＆GT; artTitle          ＆LT; / DIV＆GT;
          ＆LT; D​​IV的风格=宽度：100％;高度：48％;溢出：隐藏;文本溢出：省略号;空格：NOWRAP;＆GT;
            {显示与TEXT......说到这里}  - ＆GT;部分artText（传情......）          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /的xsl：for-每个＆GT;
＆LT; / XSL：模板＆GT;
＆LT; / XSL：样式＆GT;

以上的类的CSS（我试图使其更加符合屏幕尺寸，使用这个例子： HTTP ：//jsfiddle.net/Lry4z15m/2/ ）：

  / * COLUMN SETUP * /
.COL {
    显示：块;
    / *浮动：左; * /
    显示：inline-block的;
    保证金：1 0％1％0;
}
.COL：首先，孩子{
    保证金左：0;
}
/ * * GROUPING /
。集团：前。集团：{后
    内容：;
    显示：表;
}
。集团：{后
    明确：两者;
}
。集团{
    缩放：1; / *对于IE 6/7 * /
}/ *三个GRID * /
.span_3_of_3 {
    宽度：100％;
}
.span_2_of_3 {
    宽度：66.1％;
}
.span_1_of_3 {
    宽度：32.2％;
}/ * GO全宽小于480像素* /@media只有屏幕（最大宽度：480像素）{
    .COL {
        余量：1％0.1％0％;
    }
}@media只有屏幕（最大宽度：480像素）{
    .span_3_of_3 {
        宽度：100％;
    }
    .span_2_of_3 {
        宽度：100％;
    }
    .span_1_of_3 {
        宽度：98％;
    }
}

我打电话以上从我的ASP.net页是这样的：

 ＆LT; CMS：内文ID =CB=服务器DynamicParameter =127的CssClass =SETPDisplayXslt =工作区/ CustomFiles / articleDisplayThumb.xsl/＆GT ;

ID为 127 集合看起来像这样（的链接，标题必须是这样的：<？code>我的空间linkit = {ID } 其中 ID 是点击时每篇文章）：

我想它结束了，像这样的（左边的图片是 artThumb ，蓝色是 artTitle 和黑色是 artText ）

中的XPath：

我

如何能完成XSLT，这样我就可以实现最终的结果，具有相同的样式中的jsfiddle中使用的？

更新：

这篇到目前为止... 

 ＆LT;？XML版本=1.0编码=UTF-8＆GT？;
＆LT;的xsl：样式版本=1.0的xmlns：XSL =htt​​p://www.w3.org/1999/XSL/Transform＆GT;
＆LT; XSL：模板名称=homeArticleThumb匹配=/＆GT;
  ＆LT;的xsl：for-每个选择=收藏/内容＆GT;
    ＆LT; D​​IV CLASS =山坳span_1_of_3的风格=高度：150像素;边界：1px的纯黑色;＆GT;
      ＆LT; D​​IV CLASS =test2的＆GT;
        ＆LT; D​​IV的风格=浮动：左;宽度：28％的填充右：2％;身高：100％;＆GT;
          ＆LT; XSL-复制的选择=/根/ NewArticle / artThumb/＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV的风格=浮动：左;宽度：58％;身高：100％;＆GT;
          ＆LT; D​​IV的风格=宽度：100％;高度：48％;填充底：2％;文本对齐：左;＆GT;
            LT＆; A HREF =＆GT;＆LT;的xsl：value-of的选择=/根/ NewArticle / artTitle/＆GT;＆LT; / A＆GT;          ＆LT; / DIV＆GT;
          ＆LT; D​​IV的风格=宽度：100％;高度：48％;溢出：隐藏;文本溢出：省略号;空格：NOWRAP;文本对齐：左＆GT;
            ＆LT; XSL：选择=/根/ NewArticle / artText/＆GT值的;          ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
      ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; /的xsl：for-每个＆GT;
＆LT; / XSL：模板＆GT;
＆LT; / XSL：样式＆GT;


解决方案

我真的建议对采集控制和选择的内容视图模板控制，允许对集合筛选为好。这应该在8.6版本及后续工作，比，因为它使用标准的asp.net和c＃标记使用XSLT更容易的风格。

在此控制文档可以在这里找到。
<一href=\"http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2\" rel=\"nofollow\">http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2

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

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

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆