將Json數據保存在靜態腳本文件中讀取

      一些常用的數據例如一些網站的區域信息被改變的可能性不大，一般不通過請求獲取，於是我們選擇存在靜態文件中，例如以下Demo:

1.動態加載Json數據顯示到前台

     [HttpPost]
        public ActionResult GetData()
        {
            List<Area> areaList = new List<Area>()
            {
                new Area()
                {
                     AreaID=1,
                      AreaName="福建省",
                      Depth=1,
                       cityList=new List<Area>()
                       {
                            new Area(){ AreaID=2, AreaName="福州市", Depth=2},
                            new Area(){ AreaID=2, AreaName="廈門市", Depth=2}
                       }
                },
                new Area()
                {
                     AreaID=1,
                      AreaName="四川省",
                      Depth=1,
                       cityList=new List<Area>()
                       {
                            new Area(){ AreaID=2, AreaName="成都市", Depth=2}                         
                       }
                }
            };
            return this.Write(Request["callback"], "", new { success = true, returnData = areaList });
        }

        /// <summary>
        /// 轉換輸出
        /// </summary>
        /// <param name="callBack"></param>
        /// <param name="paramName"></param>
        /// <param name="obj"></param>
        /// <returns></returns>
        public ContentResult Write(string callBack, string paramName, object o)
        {
            Newtonsoft.Json.JsonSerializerSettings jSetting = new Newtonsoft.Json.JsonSerializerSettings();
            jSetting.NullValueHandling = NullValueHandling.Ignore;
            jSetting.DateFormatString = "yyyy-MM-dd HH:mm:ss";
            if (callBack == "" && paramName == "")
                return Content(JsonConvert.SerializeObject(o, jSetting), "application/json");
            else if (callBack != "")
                return Content(callBack + "(" + JsonConvert.SerializeObject(o, jSetting) + ");", "application/x-javascript");
            else
                return Content("var " + paramName + " = " + JsonConvert.SerializeObject(o, jSetting) + ";", "application/x-javascript");
        }

<div id="main">
    <ul id="ulmain">
        
    </ul>
</div>

 $.ajax({
            url: '/Home/GetData',
            dataType: 'jsonp',
            type: 'post',
            success: function (r) {
                var html = '';
                for (var i = 0; i < r.returnData.length; i++) {
                    var item = r.returnData[i];
                    html += '<li>' + item.AreaName + '</li>'
                    var hc = '';
                    if (item.cityList.length > 0) {
                        hc += '<ul>';
                        for (var j = 0; j < item.cityList.length; j++) {
                            var city = item.cityList[j];
                            hc += '<li>' + city.AreaName + '</li>'
                        }
                        hc += '</ul>';
                    }
                    html += hc;
                }

                $("#ulmain").html(html);
            }  
        });

結果如下：

2.生成靜態文件

      /// <summary>
        /// 生成靜態JS文件
        /// </summary>
        /// <returns></returns>
        public ActionResult CreateFile()
        {

            List<Area> areaList = new List<Area>()
            {
                new Area()
                {
                     AreaID=1,
                      AreaName="福建省",
                      Depth=1,
                       cityList=new List<Area>()
                       {
                            new Area(){ AreaID=2, AreaName="福州市", Depth=2},
                            new Area(){ AreaID=2, AreaName="廈門市", Depth=2}
                       }
                },
                new Area()
                {
                     AreaID=1,
                      AreaName="四川省",
                      Depth=1,
                       cityList=new List<Area>()
                       {
                            new Area(){ AreaID=2, AreaName="成都市", Depth=2}                         
                       }
                }
            };

             Newtonsoft.Json.JsonSerializerSettings jSetting = new Newtonsoft.Json.JsonSerializerSettings();
             string body = "var citylist = " + Newtonsoft.Json.JsonConvert.SerializeObject(areaList, jSetting) + ";";
             System.IO.File.WriteAllText(Server.MapPath("~/Scripts/temp.js"), body, System.Text.Encoding.UTF8);
             return Json(new { success = true, msg = "生成成功" }, JsonRequestBehavior.AllowGet);
        }   

<button id="btnCreate">
    生成靜態JS文件
</button>

    $("#btnCreate").click(function () {

            $.get("/Home/CreateFile", "", function (r) {
                if (r.success)
                {
                    alert("生成成功");
                }
            });
        });

靜態文件在~/Scripts/temp.js:

內容如下：

3.注釋掉AJAX請求，指向靜態文件讀取數據

別忘記添加：<script src="~/Scripts/temp.js"></script>

4.最終效果展示

沒有網絡請求，讀取的是靜態文件，根據具體情況具體操作。