[英]How do display a CMS collection in an ASP.net page using an XSLT file
articleDisplayThumb
XSLT file (Use the DynamicParameter
ID to go through the collection): articleDisplayThumb
XSLT文件(使用DynamicParameter
ID去通过收集):
<?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/ ): 上面这些类的CSS(使用此示例,我试图使其响应屏幕尺寸: 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: 我是这样从我的ASP.net页面调用上述内容的:
<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): ID 127
的集合如下所示(标题的链接必须是这样的: mypage?linkit={ID}
,其中单击时是每篇文章的ID
):
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
): 我希望这样结束(左边的图像是artThumb
,蓝色是artTitle
,黑色是artText
):
The XPaths: XPath:
How can I complete the XSLT, so I can achieve the end result, with the same style as the one used in JSFiddle? 如何完成XSLT,以便可以达到与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>
Instead of using the ContentBlock server control, try using the Collection server control: 代替使用ContentBlock服务器控件,请尝试使用集合服务器控件:
The following may help. 以下内容可能会有所帮助。
<CMS:Collection ID="Collection1" runat="server" DefaultCollectionID="127" CssClass="setP" DisplayXslt="Workarea/CustomFiles/articleDisplayThumb.xsl" />
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. 这应该可以在8.6版及更高版本中使用,并且比使用xslt样式更容易,因为它使用标准的asp.net和c#标记。
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 http://documentation.ektron.com/cms400/edr/web/edr.htm#Templated_Server_Controls/Content.htm%3FTocPath%3DTemplated%2520Server%2520Controls%7C_____2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.