模态框+Tab切换显示Json/Xml格式，提交Json/Xml字符串到后台

1.模态框加Tab切换

   我在Modal里面加一个Tab，Tab变透明不能正常显示，我有毒。。。

   后来终于可以正常显示了，敲锣打鼓放鞭炮！！

 

 po上代码~~

 <!-- 模态框（Modal） Begin-->
    <div class="modal fade" id="showContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="height:800px;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5 class="modal-title" id="modal_ESBtitle"></h5>
                </div>
                <div class="modal-body">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"> <a href="#XML" data-toggle="tab">XML</a></li>
                        <li><a href="#JSON" data-toggle="tab">JSON</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="XML" name="show">
                            <textarea class="form-control" rows="15" id="showXML" style="border-top-width:0px; border-radius:20px; resize:none;"></textarea>
                        </div>
                        <div class="tab-pane fade" id="JSON" name="show">
                            <textarea class="form-control" rows="15" id="showJSON" style="border-top-width:0px; border-radius:20px; resize:none;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-group modal-footer">
                    <div class="col-sm-12" id="actionBar">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） End-->

2.接下来就是显示Xml和Json数据啦！~

   说明一下我这边数据库存的是xml字符串，所以我拿到字符串之后就一顿操作猛如虎。。。

//模态窗
function showTabContent(content) {
    //赋值
    $("#showXML").text(xmlFormat(content));
    $("#showJSON").text(JSON.stringify(xmlStrToJsonObj(content), null, 4));
    //弹窗
    $("#showContent").modal('show');

}
//格式化xml  
function xmlFormat(xml) {
    var formatted = '';
    var reg = /(>)(<)(\/*)/g;
    xml = xml.replace(reg, '$1\r\n$2$3');
    var pad = 0;
    $.each(xml.split('\r\n'), function (index, node) {
        var indent = 0;
        if (node.match(/.+<\/\w[^>]*>$/)) {
            indent = 0;
        } else if (node.match(/^<\/\w/)) {
            if (pad != 0) {
                pad -= 1;
            }
        } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
            indent = 1;
        } else {
            indent = 0;
        }
        var padding = '   ';
        for (var i = 0; i < pad; i++) {
            padding += '     ';
        }
        formatted += padding + node + '\r\n';
        pad += indent;
    });
    return formatted;


}
//将xml字符串转为json对象
function xmlStrToJsonObj(xmlStr) {
    var xmlObj = xmlStrToXmlObj(xmlStr);
    var jsonObj = {};
    if (xmlObj.childNodes.length > 0) {
        jsonObj = xmlObjToJsonObj(xmlObj.childNodes);
    }
    return jsonObj;
}
//将xml字符串转为xml对象
function xmlStrToXmlObj(xmlStr) {

    var xmlObj = {};
    if (document.all) {
        var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
        xmlDom.loadXML(xmlStr);
        xmlObj = xmlDom;
    } else {
        xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
    }
    return xmlObj;

}
//将xml对象转为json对象
function xmlObjToJsonObj(xmlNodes) {

    var obj = {};
    if (xmlNodes.length == 0) {
        obj = '';
    } else {
        for (var i = 0; i < xmlNodes.length; i++) {
            var node = xmlNodes[i];
            if (typeof node.tagName == "undefined" || node.nodeName == "#text") {
                obj = node.nodeValue;
            } else {
                var key = node.tagName;
                var value = xmlObjToJsonObj(node.childNodes)
                obj[key] = value;
            }
        }
    }
    return obj;
}

copy一下就ok啦~~

3.提交Json/Xml字符串

　我这边需要保存xml字符串到数据库，所以我先把数据提交到后台，然后转换~

 （后台判断Json/Xml的格式是否正确，因为前端判断的话，每个浏览器使用的函数都不一样，就很麻烦！）

   前端ajax提交（一定要去除多余的符号，因为展示的时候，加了很多符号）

        //去除多余符号（\n \r 空格）
        content = str.replace(/\n/g, '').replace(/\r/g, '').replace(/\s*/g, "");

   后台代码（Mvc）

        //修改内容
        [HttpPost]
        [ValidateInput(false)]（Impotant!一定要加才能接收到数据，要不然会报错，说什么有危险字符~）
        public JsonResult EditTabXml(string str, string strType, string Id)
        {
            var data = new DataSourceResult { Data = "", Total = 0 };
            return Json(data, JsonRequestBehavior.AllowGet);
        }
        /// <summary>
        /// 判断xml是否有效
        /// </summary>
        /// <param name="str">xml字符串</param>
        /// <returns>返回空字符表示xml格式正确</returns>
        public string IsXml(string str)
        {
            string result = "";
            try
            {
                System.Xml.XmlDocument doc = new System.Xml.XmlDocument();//新建对象
                doc.LoadXml(str);//符合xml格式的字符串
            }
            catch (Exception e)
            {
                result = "Error:" + e.Message;
            }
            return result;
        }
        /// <summary>
        /// 判断json是否有效
        /// </summary>
        /// <param name="str">json字符串</param>
        /// <returns>返回空字符表示json格式正确</returns>
        public string IsJson(string str)
        {
            string result = "";
            try
            {
                object routes_list = new JavaScriptSerializer().DeserializeObject(str); //转为json对象
            }
            catch (Exception e)
            {
                result = "Error:" + e.Message;
            }
            return result;
        }
        /// <summary>
        /// Json字符串转Xml字符串
        /// </summary>
        /// <param name="str">json字符串</param>
        /// <returns>xml字符串</returns>
        public string JsonToXml(string str)
        {
            string result = "";
            try
            {
                XmlDocument xmlDoc = new XmlDocument();

                XmlDictionaryReader xmlReader = JsonReaderWriterFactory.CreateJsonReader(Encoding.UTF8.GetBytes(str), XmlDictionaryReaderQuotas.Max);
                xmlDoc.Load(xmlReader);
                //json转xml
                XmlDeclaration xmlDec = xmlDoc.CreateXmlDeclaration("1.0", "utf-8", string.Empty);
                //创建xml声明
                xmlDoc.InsertBefore(xmlDec, xmlDoc.DocumentElement); //插入xml声明
                //一定要去除，我想不到其他的办法了，只能用这个笨办法
                result = xmlDoc.OuterXml;
                result = result.Replace("<?xml version=\"1.0\" encoding=\"utf-8\"?>", "");
                result = result.Replace("type=\"string\"", "");
                result = result.Replace("type=\"object\"", "");
                result = result.Replace("type=\"boolean\"", "");
                result = result.Replace("type=\"number\"", "");
                result = result.Replace("type=\"int\"", "");
                result = result.Trim();

            }
            catch (Exception e)
            {
                result = e.Message;
            }
            return result;
        }