xml学习（3） html显示xml

最新推荐文章于 2023-01-14 19:10:57 发布
最新推荐文章于 2023-01-14 19:10:57 发布
阅读量3.5k 收藏 2
点赞数 1
分类专栏： xml学习 原创 .NET xml学习 文章标签： html显示xml html显示xml源码 pre显示xml xml学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xmroom/article/details/16932411
版权
.NET 同时被 3 个专栏收录
25 篇文章 1 订阅
订阅专栏
原创
17 篇文章 1 订阅
订阅专栏
xml学习
10 篇文章 1 订阅
订阅专栏


有的时候我们需要在html显示xml，比如我们修改了xml,点击保存，需要在页面显示xml源码，让我们知道xml已经修改了，最好的方法是把xml放到pre元素中，但是会发现没有换行，全部显示一行，肯定很难看，所以我做了一个迭代xmlDOM的函数来格式显示xml的函数，

  迭代函数思路：

1.每个xml文件时有无数个兄弟节点组成，但是终有最后截止的一个，那么循环结束的标志就是当一个节点没有兄弟节点时，循环就结束，

那么可以循环兄弟节点，于是有循环兄弟节点函数

2每个节点可能有子节点，子节点也可能有兄弟子节点，这个时候利用循环兄弟节点函数，循环节点的第一个子节点，

效果图：

主要代码：

   private void getXMLStr(XmlDocument xmlDoc)
    {
        foreach (XmlNode node in xmlDoc.ChildNodes)
        {

            if (node.NodeType == XmlNodeType.Element)
            {
                getNext(node,0);
            }
            else 
            {
                xml = "<div>" + node.OuterXml.Replace("<","<").Replace(">",">");
            }


        }
    }


    private void getNext(XmlNode node,int i)
    {
        if (node.NextSibling == null)//如果没有兄弟节点
        {
            if (node.HasChildNodes)
            {
                //如果有子节点
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {
                    //getXmlAttribute(node)  获取节点的所有属性
                    //如果子节点的子节点不是text类型
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ><" + node.Name +"  "+ getXmlAttribute(node) + "></div>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ></"+ node.Name +"></div>";
                }
                else
                {
                    //如果子节点的子节点不是text类型
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
 
                }
            }
            else  
            {
                xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
            }
        }
        else
        {
            if (node.HasChildNodes)
            {
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {

                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ><" + node.Name+"  " + getXmlAttribute(node) + "></div>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ></"+ node.Name  + "></div>";
                }
                else
                {
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
                }
            }
            else
            {
                xml = xml + "<div " + "style='margin-left:" + (i*20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
            }
            getNext(node.NextSibling,i);

        }

    }


    private string  getXmlAttribute(XmlNode node)
    {
        string rtn=string.Empty;
        foreach (XmlAttribute attr in node.Attributes)
        {
            rtn +="  "+ attr.Name + "=" + attr.Value;
        }
        return rtn;
    }

  源码：

showXML.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="showXML.aspx.cs" Inherits="showXML" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>读取xml</title>
  
    <link rel="Stylesheet" type="text/css" href="Css/Common/InputStyle.css" />
    <script type="text/javascript"  src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        function showXml() {
            $.ajax({
                url: 'showXML.aspx?action=create&rnd' + Math.random(),
                type: 'post',
                cache: false,
                async: false,
                success: function (result) {
                    if (result != '') {
                        result = result.toString();
                        $("#pre_xml").show().html('').append(result);
                    }
                    else {
                        alert('读取数据失败！');
                    }
                }
            });
        }

        $(document).ready(function () {
            showXml();
        });



        function hideXml() {
            $("#pre_xml").hide();
        }
    </script>


   

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="main">
      <div class="button">
        <table width="100%">
          <tr>
            <td>
              <input type="button" id="btn_show" class="two-bu" οnclick="showXml();" value="显示"/>
               <input type="button" id="btn_hide" class="two-bu" οnclick="hideXml();" value="隐藏"/>
            </td>
          </tr>
        </table>
      </div>
      <div >
       <pre id="pre_xml"  style=" background-color:#A8B7CC; width:500px;"  ></pre>
      </div>
      

     </div>
    
    </div>
    
    </form>
</body>
</html>


showXML.aspx.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Xml;
using System.Web.UI.HtmlControls;

public partial class showXML : System.Web.UI.Page
{

    public  string xml = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
        }
        if (Request.QueryString["action"] != null && Request.QueryString["action"].ToString() != "")
        {
            switch (Request.QueryString["action"].ToString())
            {
                case "create":
                    Response.Clear();
                    Response.Write(showXml());
                    Response.End();
                    break;
                default:
                    break;

            }
        }


    }


    /// <summary>
    /// 在html显示xml
    /// </summary>
    /// <param name="fileName">文件名字</param>
    private string showXml()
    {
        string rtn = string.Empty;
        string path = Server.MapPath("Xml\\") + "示例_创建" + ".xml"; //xml文件路径
        if (File.Exists(path))
        {
            XmlTextReader xmlRead = new XmlTextReader(path);//xml只读类
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(xmlRead);

            xmlRead.Close();
            getXMLStr(xmlDoc);
            rtn = xml;
        }
        return rtn;

    }


    private void getXMLStr(XmlDocument xmlDoc)
    {
        foreach (XmlNode node in xmlDoc.ChildNodes)
        {

            if (node.NodeType == XmlNodeType.Element)
            {
                getNext(node,0);
            }
            else 
            {
                xml = "<div>" + node.OuterXml.Replace("<","<").Replace(">",">");
            }


        }
    }


    private void getNext(XmlNode node,int i)
    {
        if (node.NextSibling == null)//如果没有兄弟节点
        {
            if (node.HasChildNodes)
            {
                //如果有子节点
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {
                    //getXmlAttribute(node)  获取节点的所有属性
                    //如果子节点的子节点不是text类型
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ><" + node.Name +"  "+ getXmlAttribute(node) + "></div>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ></"+ node.Name +"></div>";
                }
                else
                {
                    //如果子节点的子节点不是text类型
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
 
                }
            }
            else  
            {
                xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
            }
        }
        else
        {
            if (node.HasChildNodes)
            {
                if (node.FirstChild.NodeType != XmlNodeType.Text)
                {

                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ><" + node.Name+"  " + getXmlAttribute(node) + "></div>";
                    getNext(node.FirstChild, i + 1);
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  ></"+ node.Name  + "></div>";
                }
                else
                {
                    xml = xml + "<div " + "style='margin-left:" + (i * 20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
                }
            }
            else
            {
                xml = xml + "<div " + "style='margin-left:" + (i*20).ToString() + "px'  >" + node.OuterXml.Replace("<", "<").Replace(">", ">") + "</div>";
            }
            getNext(node.NextSibling,i);

        }

    }


    private string  getXmlAttribute(XmlNode node)
    {
        string rtn=string.Empty;
        foreach (XmlAttribute attr in node.Attributes)
        {
            rtn +="  "+ attr.Name + "=" + attr.Value;
        }
        return rtn;
    }

}


示例_创建.xml源码

注意：xml路径与后天获取的xml的路径要一致，我的路径是程序根目录xml文件夹下

示例_创建.xml源码


<?xml version="1.0" encoding="utf-8" ?>
<catalog  name="测试" >
    <cd >
        <title>11</title>
        <artist>12</artist>
        <country>13</country>
        <company>14</company>
        <price>15</price>
        <year>16</year>
    </cd>
    <cd>
        <title>21</title>
        <artist>22</artist>
        <country>23</country>
        <company>24</company>
        <price>25</price>
        <year>26</year>
    </cd>
  
  </catalog>








  

明外
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XML学习指南pdf
01-10
目 录 前言 第一部分 XML概览 第1章 为什么要使用XML 1.1 XML的需要 1.1.1 XML解决方案 1.1.2 SGML、HTML和XML 1.2 XML的正式目标 1.3 标准XML应用 1.4 XML的实际应用 第2章 创建并显示第一个XML文档 2.1 创建一个XML文档 2.1.1 创建XML文档 2.1.2 XML文档剖析 2.1.3 一些基本的XML规则 2.2 显示XML文档 2.2.1 显示没有样式表的XML文档 2.2.2 在Internet Explorer
前台HTML页面显示XML内容
MOONCOM的博客
07-26 2万+
应用场景：在网站开发过程中，读取XML格式文件，并将其所有内容都显示到页面上，即显示标签内容，又显示标签本身。 备注：本博客场景还适应于读取显示含有标签的数据库存储字段。 解决方法：解决方法一共有四种(可能还有别的方法，但我只知道四种，欢迎大家补充)，分别如下： 第一种，使用 将你要显示的内容包含在标签中，便可以将标签显示在页面上。 JS代码： var str
html用dom显示xml,XML/HTML DOM常用操作
weixin_27134495的博客
06-10 124
### 一、元素节点：1. 创建节点：```domObj.createElement(name)```2. 添加节点：```1、node.appendChild(new) # 在节点之后插入新的子节点2、node.insertBefore(new,old) # 在旧节点之前插入新节点```3. 克隆节点：```node.cloneNode(true/false)```4. 修改节点：```...
XML轻松学习手册 XML学习
05-25
· 第一章:XML快速入门 · 一. 什么是XML？ · 二. XML是新概念吗？ · 三. 使用XML有什么好处？ · 四. XML很难学吗？ · 五. XML和HTML的区别 · 六. XML的严格格式 · 七. 关于XML的更多 · 第二章:XML概念 · 一. 扩展性 · 二. 标识 · 三. 语言 · 四. 结构化 · 五. Meta数据 · 六. 显示 · 七. DOM · 第三章:XML的术语 · 导言 · 一.XML文档的有关术语 · 二.DTD的有关术语 · 第四章:XML的语法 · 一.XML语法规则 · 二.元素的语法 · 三.注释的语法 · 四.CDATA的语法 · 五.Namespaces的语法 · 六.entity的语法 · 七.DTD的语法 · 第五章:XML实例解释 · 一.定义新标识 · 二.建立XML文档 · 三.建立相应的HTML文件 · 第六章:XML相关资源
XML权威学习文档
07-14
前 言扩展标记语言（Extensible Markup Language，XML)，是目前最有前途的在World Wide Web上保存和传递信息的语言。尽管超文本标记语言（Hypertext Markup Language，HTML）目前是创建Web页的最常用语言，但是它在保存信息方面的能力很有限。与之相反，XML却有着极其灵活的语法，允许真实地描述各种类型的信息，从简单的菜谱到复杂的数据库（所以才会使用术语“扩展”）。XML文档（与样式表或传统的HTML页一起）可以很容易地在浏览器中显示。因为XML文档能如此有效地构造和标识它所包含的信息，以致于浏览器可以以非常灵活的方式发现、抽取、排序、过滤、整理以及管理信息。
html中显示xml
weixin_30617797的博客
07-20 486
在工作中经常会遇到一些特殊的要求，比如在html中显示xml，xml的格式跟html很相似，同样包含了标签、属性、值，所以xml的标签等内容会在html中被转义 如果要在html中让xml的内容（包括标签等）全部显示，则必须让xml的内容不被转义 解决方案1 把xml的特殊字符替换成html的转义字符 “<” -->&lt; ">"-->&gt;...
html xmlns=“http://www.w3.org/1999/xhtm的解释
我是一只蘑菇17的博客
11-14 3392
还有个问题，根据定义：用来标识命名空间的网络地址并不被XML解析器调用，XML解析器不需要从这个网络地址中查找信息，该网络地址的作用仅仅是给命名空间一个唯一的名字，因此这个网络地址也可以是虚拟的。应该是在每个xml的dtd文件中都会规定xmlns这个值，如果dtd文件中的xmlns的值与xhtml中的值相等，则认为是匹配的。官方概念：xmlns是xml namespace的缩写，也就是XML命名空间，xmlns属性可以在文档中定义一个或多个可供选择的命名空间。该属性可以放置在文档内任何元素的开始标签中。
界面渲染---XML
qq_59073474的博客
01-14 729
利用XML进行渲染界面（服务端的事情会比较多），服务端对XML文件进行读取，监听，逻辑的编写，最后将界面显示
xml数据在html页面显示,在HTML中显示XML数据【兼容IE、Firefxo、Opera】
weixin_29083373的博客
06-09 1301
XML确实是个好东西，尤其是现在大部分网站都是生成HTML静态页面的，但是有一些数据是需要动态改变的，频繁更新HTML不是个好办法，这个时候XML就大显身手了，只需要把经常变动的内容保存成XML，在HTML页面上调用就可以，需要时只要更新下XML，不过在HTML中调用XML数据还是有点不怎么容易，数据岛适合大量数据的显示，但是只支持IE，下面这段小代码可以兼容大部分浏览器【附件里面有全部文件】：这...
WEB页面显示XML文档内容
XCMercy
05-30 5721
存在问题 XML文档中内容都是自定义标签，浏览器会把自定义标签解析，最终显示的只有自定义标签中的内容。而我们需要显示整个XML文档中的内容，包括自定义标签。 解决方案 浏览器解析自定义标签的原因是：XML文档中自定义标签结构与HTML标签结构相同，都是 &lt; 开头，&gt;结尾的。为了让浏览器不解析自定义标签，同时还需要显示自定义标签的&lt; 和 &gt;，我们需要把 &lt; 和 &...
XML教程:什么是XML及XML和HTML的区别
09-24
XML被设计用来描述数据，其焦点是数据的内容。HTML被设计用来显示数据，其焦点是数据的外观。应该掌握的基础知识：在您继续学习之前，需要对以下知识有基本的了解： HTML / XHTML JavaScript or VBScript 什么是XML?
XML学习资料.txt
12-21
Oracle和SQL Server等数据库不同，数据库提供了更强有力的数据存储和分析能力，例如：数据索引、排序、查找、相关一致性等，XML的宗旨传输数据的，而与其同属标准通用标记语言的HTML主要用于显示数据。事实上XML与...
html用dom显示xml,dom 编程(html和xml)
weixin_39678163的博客
06-10 107
html dom与xml dom关系:什么是 DOM？DOM 是 W3C(万维网联盟)的标准。DOM 定义了訪问 HTML 和 XML 文档的标准：“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口，它同意程序和脚本动态地訪问和更新文档的内容、结构和样式。”W3C DOM 标准被分为 3 个不同的部分：核心 DOM - 针对不论什么结构化文档的标准模型XML DOM - 针对 XML 文...
html显示xml源码,在 HTML中显示XML数据的策略
weixin_28715081的博客
06-23 517
XML的全名是eXtenxible Markup Language(可以延伸或扩展的标记语言)，它的语法类似HTML，都是用标签来描述数据。HTML的标签是固定的，我们只能使用、不能修改；XML则不同，它没有预先定义好的标签可以使用，而是依据设计上的需要，自行定义标签。所以在电子商务的网络时代，用XML来组织数据，再用HTML页面来显示，将是设计网页的新方向。本文主要对两种在HTML中存贮并显示X...
xml内容显示的4种方法
热门推荐
denny的专栏
01-15 3万+
CSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示.如果一个XML文件仅仅用于交换信息，就无需考虑它的显示问题。编辑XML文件，我们仅仅需要关注文件的内容、信息的结构，至于它怎么显示，则交给CSS（叠层样式表）和XSL（可扩展样式语言）来完成。此外使用数据岛技术与javascript也能定制xml的内容显示，这就使得用户可以根据需要来定义数据的表现形式。1）用cs
html设置颜色xml,如何使用HTML标记为strings.xml文件中的字符串着色？
weixin_35654096的博客
06-30 246
我正在创建类似PokéDex的应用程序。我正在使用带有Mike Penz的FastItemAdapter的RecyclerViewer。我的Pokemon类中有多个变量，但我遇到的两个问题是String类型和String弱点。我的目标是在strings.xml文件中使用HTML标记以添加字体颜色。在ModelGenerator类中，在其中包含了完整的Pokemon列表，我从strings.xml文...
html显示xml内容
weixin_30378311的博客
09-13 613
参考： https://www.cnblogs.com/apache-x/p/5435459.html 方法： “<”用&lt;表示 “>”用&gt;表示 “"”用&quot;表示 == .Replace("<","&lt;").Replace(">","&gt;").Replace("\"","&quot;...
html设置颜色xml,HTML <noframes> 标签 - HTML 颜色参考手册 - 自强学堂
weixin_39847034的博客
06-30 115
HTML 标签实例显示三个frame框架，如果不支持frame输出 标签的文本：Sorry, your browser does not handle frames!尝试一下 »浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明HTML5 不支持 标签。 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。 元素插入在 元素中使用。注意：...
linux修改mysql最大连接数
死磕技术 活出人生
05-29 5526
第一步：进入mysql安装目录 /usr/bin cd /usr/bin 第二步：进入mysql mysql -uroot -p 第三步：查看mysql最大连接数量 show variables like 'max_connections'； quit； 第四步：在文件etc/my.cnf中设置Mysql 最大连接数 vi /etc/my.cnf 第五步：重启mysql sy...
vscode显示高亮的插件
最新发布
08-23
VSCode有很多可以显示高亮的插件，以下是一些常用的插件： 1. "Visual Studio IntelliCode"：使用机器学习算法提供智能代码补全和建议。 2. "Bracket Pair Colorizer"：为代码中的括号添加颜色，便于区分。 3. "Indent-Rainbow"：为代码中的缩进添加不同颜色，方便阅读。 4. "Color Highlight"：在代码中显示颜色值的实际颜色。 5. "Highlight Matching Tag"：在HTML、XML等标记语言中高亮匹配的标签。 6. "GitLens"：在代码中显示Git的注释和作者信息。 7. "ESLint"：用于JavaScript/TypeScript代码的语法检查和错误提示。 8. "Prettier"：自动格式化代码，使其保持一致的风格。 9. "Rainbow CSV"：以彩虹色高亮显示CSV文件中的数据。 10. "Markdown All in One"：在Markdown文件中提供一些常用功能，如目录生成、表格编辑等。 这只是一小部分插件，你可以在VSCode的插件市场中搜索更多的高亮显示插件，并根据你的需求选择合适的插件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值