将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.最终效果展示

没有网络请求,读取的是静态文件,根据具体情况具体操作。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

RESTful WCF

相较 WCF、WebService 使用 SOAP、WSDL、WS-* 而言,几乎所有的语言和网络平台都支持 HTTP 请求。我们无需去实现复杂的客户端代理,无...

205100
来自专栏挖掘大数据

常用的Hadoop 文件查看工具

packages.config <?xml version="1.0" encoding="utf-8"?> <packages> <package id...

22190
来自专栏.NET开发那点事

.NET开源高性能Socket通信中间件Helios介绍及演示

  Helios是一套高性能的Socket通信中间件,使用C#编写。Helios的开发受到Netty的启发,使用非阻塞的事件驱动模型架构来实现高并发高吞吐量。H...

25620
来自专栏c#开发者

MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具集成Visual Studio 2013

MVC 5 Scaffolder + EntityFramework+UnitOfWork Pattern 代码生成工具 经过一个多星期的努力总算完成了单表,多...

473130
来自专栏林德熙的博客

win10 uwp 读取保存WriteableBitmap 、BitmapImage 保存 WriteableBitmap 到文件从文件读 WriteableBitmapIma

我们在UWP,经常使用的图片,数据结构就是 BitmapImage 和 WriteableBitmap。关于 BitmapImage 和 WriteableBi...

15110
来自专栏草根专栏

用VSCode开发一个asp.net core2.0+angular5项目(5): Angular5+asp.net core 2.0 web api文件上传

这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api. 这是需要的源码: https://pan.baidu.com...

43050
来自专栏ASP.NET MVC5 后台权限管理系统

构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(13)-系统日志和异常的处理③

上一节我们讲了如何捕获异常和记录日志,这一节我们讲,没有捕获的或者忘记捕获的异常包括404错误等,我们统一处理这个异常。 这一讲是利用 Application_...

31280
来自专栏木宛城主

SharePoint下用C#代码上传文档至文档库的子文件夹中

SharePoint的文档库非常方便,可以管理日常的文档,更强大的是可以创建文件夹来分类,通常在UI界面上是非常简单了,点击文件夹,Create a Fold...

22380
来自专栏菩提树下的杨过

利用fluorineFx将DataTable从.Net传递到Flash

FluorineFx自带的示例都不错,就是有点不简洁,下面的代码基本上已经最简版了(环境vs2010) 1、先创建一个Web Application,然后添加F...

25750
来自专栏逸鹏说道

万恶的剪贴板==》为存储而生

近几天逆天经常大量复制粘贴一些图文信息,在某些特定的场合,图片都是无法直接粘贴进去的,就比如博客园的编辑器。 源码:https://github.com/dun...

29880

扫码关注云+社区

领取腾讯云代金券