C# xml通過xslt轉換為html輸出
阿新 • • 發佈：2019-01-14
html效果截圖：
1、首先分析html程式碼結構：
結果如圖：
2、呼叫介面返回的資料格式：
3、由第一步可看出每2個數據為一行並排顯示，後臺返回的資料總數可能為奇數個或偶數個，對應該生成的xml結構：
4、對應的xslt檔案程式碼
<?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"xslt程式碼exclude-result-prefixes="msxsl" > <xsl:output method="html" indent="yes"/> <xsl:template match="/root"> <html lang="en"> <head> <title>REAL ESTATE</title> <meta charset="utf-8"></meta> <meta name="viewport"content="width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="http://joannarealestate.com.cn/images/jre_logo.png" type="image/png"></link> </head> <style> th.c20 { font-size: 0pt; line-height: 0pt; padding: 0; margin: 0; font-weight: normal; vertical-align: top; } table.c19 { border-bottom: 1px solid rgb(219, 219, 219); } td.c18 { background-color: #FFFFFF; /*border: 1px solid #232129;*/ } td.c17 { color: #232129; font-family: Arial, sans-serif; font-size: 12px; width: 148px; height: 40px; line-height: 16px; text-align: center; } a.c16 { color: #232129; text-decoration: none; } img.c15 { margin: 0; padding: 0; max-width: 25px; } img.c14 { margin: 0; padding: 0; max-width: 23px; } td.c13 { color: #232129; font-family: Arial, sans-serif; font-size: 16px; line-height: 22px; text-align: left; } td.c12 { font-size: 0pt; line-height: 0pt; text-align: left; } img.c11 { margin: 0; padding: 0; max-width: 20px; } div.c10 { color: #232129; font-family: Arial, sans-serif; font-size: 16px; line-height: 18px; text-align: center; } span.c9 { color: #1d78be; font-size: 20px; } table.c8 { font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%; } td.c7 { font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%; } div.c6 { color: #ff6f51; font-family: Arial, sans-serif; font-size: 20px; line-height: 26px; text-align: center; margin: 10px 0px 5px 0px; } a.c5 { color: #232129; text-decoration: none; } td.c4 { background-color: #DBDBDB; font-size: 0pt; line-height: 0pt; text-align: left; } div.c3 { font-size: 0pt; line-height: 0pt; text-align: left; } a.c2 { color: #232129; text-decoration: none; display: block; } img.c1 { margin: 0; padding: 0; width: 294px; height: 183px; }</style> <body> <table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr> <td class="td" style="font-size: 0pt; line-height: 0pt; padding: 0; margin: 0; font-weight: normal; width: 600px; min-width: 600px;" width="600"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td id="target"> <div repeatindex="3"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td class="content-spacing" style="font-size: 0pt; line-height: 0pt; text-align: left;" width="20"></td> <td align="center"> <table border="0" cellpadding="0" cellspacing="0" class="center"> <tbody> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td class="content-spacing" style="font-size: 0pt; line-height: 0pt; text-align: left;" width="25"></td> <td> <div class="h6-center" style="color: #232129;font-size: 26px;line-height: 20px;text-align: center;padding-bottom: 10px;"> <div>最新推薦房源</div> </div> <table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;" width="100%"> <tbody> <tr> <td class="spacer" height="5" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;"> </td> </tr> </tbody> </table> </td> <td class="content-spacing" style="font-size: 0pt; line-height: 0pt; text-align: left;" width="25"></td> </tr> </tbody> </table> <table bgcolor="#232129" border="0" cellpadding="0" cellspacing="0" class="border" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;" width="100%"> <tbody> <tr> <td bgcolor="#232129" class="border" height="1" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;" width="100%"> <tbody> <tr> <td class="spacer" height="10" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;"> </td> </tr> </tbody> </table> </td> <td class="content-spacing" style="font-size: 0pt; line-height: 0pt; text-align: left;" width="20"></td> </tr> </tbody> </table> </div> <div repeatindex="4"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td class="content-spacing" style="font-size: 0pt; line-height: 0pt; text-align: left;" width="75"></td> <td align="center"> <div class="text-center" style="font-size: 20px;font-weight: normal;line-height: 30px;color: #333333;text-align: center;"> <div> <br/> 我們為您推薦這些也許是您想要檢視的最新房源。 </div> </div> <table border="0" cellpadding="0" cellspacing="0" class="spacer" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;" width="100%"> <tbody> <tr> <td class="spacer" height="35" style="font-size: 0pt; line-height: 0pt; text-align: center; width: 100%; min-width: 100%;"> </td> </tr> </tbody> </table> </td> <td class="content-spacing" style="font-size: 0pt; line-height: 0pt; text-align: left;" width="75"></td> </tr> </tbody> </table> </div> <!-- 房子 --> <xsl:for-each select="./row"> <div repeatindex="6"> <table border="0" cellpadding="0" cellspacing="0" class="mobile-full" width="600"> <tbody> <tr> <td colspan="3"> <table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:20px;" width="100%"> <tbody> <tr> <!--奇數行--> <th class="column-top c20" valign="top" width="294"> <xsl:for-each select="./RecommendationsList[position() mod 2=1]"> <xsl:call-template name="data2"></xsl:call-template> </xsl:for-each> </th> <!--間隔--> <th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;" valign="top" width="10"> <table border="0" cellpadding="0" cellspacing="0" class="spacer c2" width="100%"> <tbody> <tr> <td class="spacer c1" height="30"></td> </tr> </tbody> </table> </th> <!--偶數行--> <th class="column-top c20" valign="top" width="294"> <xsl:for-each select="./RecommendationsList[position() mod 2=0]"> <xsl:call-template name="data2"></xsl:call-template> </xsl:for-each> </th> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </xsl:for-each> <!-- /房子 --> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </html> </xsl:template> <xsl:template name="data2" match="child::*"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td> <div class="fluid-img c3"> <xsl:element name="a"> <xsl:attribute name="href"> <xsl:text>http://joannarealestate.com.cn/property.html?houseID=</xsl:text> <xsl:value-of select="./ID"/> </xsl:attribute> <xsl:attribute name="class">c2</xsl:attribute> <xsl:attribute name="target">_blank</xsl:attribute> <xsl:element name="img"> <xsl:attribute name="border">0</xsl:attribute> <xsl:attribute name="width">294</xsl:attribute> <xsl:attribute name="height">183</xsl:attribute> <xsl:attribute name="class">c1</xsl:attribute> <xsl:attribute name="href"> <xsl:text>http://img.jrechina.com</xsl:text> <xsl:value-of select="./PicUrl"/> </xsl:attribute> </xsl:element> </xsl:element> </div> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td class="img c4" width="1"></td> <td> <table style="border:1px #CCC solid;" border="0" cellpadding="0" cellspacing="0" class="c19" width="100%"> <tbody> <tr> <td align="center" colspan="3"> <div class="h4-1-orange-center c6" style="margin-top: 20px"> <xsl:element name="a"> <xsl:attribute name="href"> <xsl:text>http://joannarealestate.com.cn/property.html?houseID=</xsl:text> <xsl:value-of select="./ID"/> </xsl:attribute> <xsl:attribute name="class">c5</xsl:attribute> <xsl:attribute name="target">_blank</xsl:attribute> <xsl:attribute name="style">display: block;margin-bottom: 20px; font-size:16px</xsl:attribute> <xsl:value-of select="./CommunityNameE"/> </xsl:element> </div> <table border="0" cellpadding="0" cellspacing="0" class="spacer c8" width="100%"> <tbody> <tr> <td class="spacer c7" height="5"></td> </tr> </tbody> </table> <div class="text-2-center c10" style="font-size:16px"> ￥<span class="c9"> <xsl:value-of select="./Min_ZJ"/> </span> /Month </div> <table border="0" cellpadding="0" cellspacing="0" class="spacer c8" width="100%"> <tbody> <tr> <td class="spacer c7" height="15"></td> </tr> </tbody> </table> <div> <table border="0" cellpadding="0" cellspacing="0" class="center"> <tbody> <tr> <td class="img c12" width="20"> <img border="0" src="http://crm.joannarealestate.com.cn/HD/ZhongQiu_en/images/bed.jpg" class="c11"/> </td> <td class="img c12" width="5"></td> <td class="text c13" style="font-size:16px"> <div> <xsl:value-of select="./Bedroom"/> </div> </td> <td class="img c12" width="20"></td> <td class="img c12" width="20"> <img border="0" src="http://crm.joannarealestate.com.cn/HD/ZhongQiu_en/images/wash.jpg" class="c14"/> </td> <td class="img c12" width="5"></td> <td class="text c13" style="font-size:16px"> <div> <xsl:value-of select="./Washroom"/> </div> </td> <td class="img c12" width="20"></td> <td class="img c12" width="20"> <img border="0" src="http://crm.joannarealestate.com.cn/HD/ZhongQiu_en/images/sqm.jpg" class="c15"/> </td> <td class="img c12" width="5"></td> <td class="text c13"> <div style="font-size:16px"> <xsl:value-of select="./RoomSize"/> </div> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" class="spacer c8" width="100%"> <tbody> <tr> <td class="spacer c7" height="15"></td> </tr> </tbody> </table> </div> <table border="0" cellpadding="0" cellspacing="0" class="spacer c8" width="100%"> <tbody> <tr> <td class="spacer c7" height="15"></td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" class="center"> <tbody> <tr> <td class="c18"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tbody> <tr> <td class="text-btn-black c17" colspan="3" style="color:#232129;font-family:Arial, sans-serif;font-size:12px;width: 148px;height: 40px;line-height:16px;text-align:center;"> <div> <xsl:element name="a"> <xsl:attribute name="href"> <xsl:text>http://joannarealestate.com.cn/property.html?houseID=</xsl:text> <xsl:value-of select="./RecommendationsList/ID"/> </xsl:attribute> <xsl:attribute name="class">link-black c16</xsl:attribute> <xsl:attribute name="target">_blank</xsl:attribute> <xsl:attribute name="style">color:#232129;text-decoration:none;</xsl:attribute> <xsl:text>FIND OUT MORE</xsl:text> </xsl:element> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table border="0" cellpadding="0" cellspacing="0" class="spacer c8" width="100%"> <tbody> <tr> <td class="spacer c7" height="30"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> <td class="img c4" width="1"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </xsl:template> </xsl:stylesheet>
5、呼叫介面生成xml的程式碼：
string Owner_ID = EncryptHelper.DESEncrypt("18745_9479", "test"); string url = string.Format("http://netapi.jrechina.com/Handler/FYGL.ashx?Action=GetRecommendationsList&lan={0}&Owner_ID={1}&page=1&rows=4", 0, Owner_ID); XDocument doc = new XDocument( new XProcessingInstruction("xml-stylesheet", "href=\"RecommendationsList.xslt\" type=\"text/xsl\"")); XElement eleRoot = new XElement("root");//根節點 doc.Add(eleRoot); //根據使用者ID拼接請求獲取該使用者的推薦列表（取前4條） string res = HttpHelper.GetData(url); dynamic result = Utility.Helper.FromJson<dynamic>(res); if (result.DataList != null && (int)result.DataList.Count > 0) { int totalCount = (int)result.DataList.Count; int rows = totalCount % 2 > 0 ? totalCount / 2 + 1 : totalCount / 2;//2個數據為一行 XElement eleRow = new XElement("row"); //eleRoot.Add(eleRow); XElement eleRecommendationsList; int index = 0;//迴圈到第幾個 foreach (dynamic item in result.DataList) { index++; if (index % 2 == 1) {//奇數個表示新起一行 eleRow = new XElement("row"); } eleRecommendationsList = new XElement("RecommendationsList", new XElement("ID", (item.ID??"").ToString()), new XElement("HouseNo", (item.HouseNo??"").ToString()), new XElement("RoomSize", (item.RoomSize??"").ToString()), new XElement("Bedroom", (item.Bedroom??"").ToString()), new XElement("Washroom", (item.Washroom??"").ToString()), new XElement("PicUrl", string.IsNullOrEmpty((string)item.PicUrl) ? "" : ((string)item.PicUrl).Replace("sm_", "").Replace("sf_", "").Replace(".", "@[email protected]@[email protected]")), new XElement("Min_ZJ", (item.Min_ZJ??"").ToString()), new XElement("FY_Subtitle", (item.FY_Subtitle??"").ToString()), new XElement("FY_Subtitle_CN", (item.FY_Subtitle_CN ?? "").ToString()), new XElement("CommunityNameE", (item.CommunityNameE ?? "").ToString()), new XElement("CommunityNameC", (item.CommunityNameC ?? "").ToString()), new XElement("PropertyName_C", (item.PropertyName_C ?? "").ToString()), new XElement("PropertyName_E", (item.PropertyName_E ?? "").ToString()), new XElement("E_Address", (item.E_Address ?? "").ToString()), new XElement("DistrictName", (item.DistrictName ?? "").ToString()), new XElement("DistrictNameC", (item.DistrictNameC ?? "").ToString()), new XElement("BusinessCircleName", (item.BusinessCircleName ?? "").ToString()), new XElement("BusinessCircleNameC", (item.BusinessCircleNameC ?? "").ToString()) ); eleRow.Add(eleRecommendationsList); if (index % 2 == 0|| index % 2 > 0&& index >= totalCount) {//是偶數個或最後一個且是奇數個 eleRoot.Add(eleRow); } } } string savePath = @"G:\zhyue\backup\projects\Test\ConsoleApplication1\測試\XSLT和XML結合使用\RecommendationsList.xml"; if (File.Exists(savePath)) File.Delete(savePath); doc.Save(savePath);呼叫介面生成xml程式碼
6、瀏覽器中檢視xml：
成功，不過xml無法直接訪問圖片，沒找到解決法案，html是可以的