一些常用的数据例如一些网站的区域信息被改变的可能性不大,一般不通过请求获取,于是我们选择存在静态文件中,例如以下Demo:

1.动态加载Json数据显示到前台

     [HttpPost]
public ActionResult GetData()
{
List<Area> areaList = new List<Area>()
{
new Area()
{
AreaID=,
AreaName="福建省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="福州市", Depth=},
new Area(){ AreaID=, AreaName="厦门市", Depth=}
}
},
new Area()
{
AreaID=,
AreaName="四川省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="成都市", Depth=}
}
}
};
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=,
AreaName="福建省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="福州市", Depth=},
new Area(){ AreaID=, AreaName="厦门市", Depth=}
}
},
new Area()
{
AreaID=,
AreaName="四川省",
Depth=,
cityList=new List<Area>()
{
new Area(){ AreaID=, AreaName="成都市", Depth=}
}
}
}; 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.最终效果展示

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

将Json数据保存在静态脚本文件中读取的更多相关文章

  1. C# 结构体和List<T>类型数据转Json数据保存和读取

    C#  结构体和List<T>类型数据转Json数据保存和读取 一.结构体转Json public struct FaceLibrary { public string face_name ...

  2. pyhton 从web获取json数据 保存到本地然后再读取

    从web中获取json数据直接进行处理总认为太慢.主要是从web中获取获取数据的过程有点慢. 所以就在想 假设先利用空暇时间把json数据获取并保存到本地,然后再从本地文件里读取和操作.应该就要快非常 ...

  3. SQL Server将数据导出到SQL脚本文件

    http://www.studyofnet.com/news/list-8883.2-1-4.html 一.SQL Server 2008将数据导出到SQL脚本文件 1.打开SQL Server200 ...

  4. 一些常用的文本文件格式(TXT,JSON,CSV)以及如何从这些文件中读取和写入数据

    TXT文件: txt是微软在操作系统上附带的一种文本格式,文件以.txt为后缀. 从txt文件中读取数据: with open ('xxx.txt') as file: data=file.readl ...

  5. java从文件中读取数据然后插入到数据库表中

    实习工作中,完成了领导交给的任务,将搜集到的数据插入到数据库中,代码片段如下: static Connection getConnection() throws SQLException, IOExc ...

  6. shell如何传递变量到另一个脚本文件中

    http://www.jbxue.com/article/shell/20707.html本文介绍了shell脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...

  7. 从文件中读取yuv和h264数据

    1.从文件中读取h264数据 参考ffmpeg avc.c写的从文件中一帧帧读取h.264数据的demo #include <stdio.h> #include <stdlib.h& ...

  8. 从PCD文件中读取点云数据

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=84 在本小节我们学习如何从PCD文件中读取点云数据. 代码 章例1文件夹中, ...

  9. 【Python】从文件中读取数据

    从文件中读取数据 1.1 读取整个文件 要读取文件,需要一个包含几行文本的文件(文件PI_DESC.txt与file_reader.py在同一目录下) PI_DESC.txt 3.1415926535 ...

随机推荐

  1. 使用 Nodejs 搭建简单的Web服务器

    使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块. ...

  2. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  3. Android消息传递之基于RxJava实现一个EventBus - RxBus

    前言: 上篇文章学习了Android事件总线管理开源框架EventBus,EventBus的出现大大降低了开发成本以及开发难度,今天我们就利用目前大红大紫的RxJava来实现一下类似EventBus事 ...

  4. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  5. Spring中Bean的作用域、生命周期

                                   Bean的作用域.生命周期 Bean的作用域 Spring 3中为Bean定义了5中作用域,分别为singleton(单例).protot ...

  6. iOS controller解耦探究实现——第一次写博客

    大学时曾经做过android的开发,目前的工作是iOS的开发.之前自己记录东西都是通过自己比较喜欢的笔记类的应用记录下了.直到前段时一个哥们拉着我注册了一个博客.现在终于想明白了,博客这个东西受众会稍 ...

  7. ASP.NET MVC关于Ajax以及Jquery的无限级联动

    ---恢复内容开始--- 第一次发表博文,发表博文的目的是巩固自己的技术,也能够共享给大家.写的不好的地方,希望大家多给给意见.老司机勿喷 数据结构() NewsTypeId 新闻ID, NewsTy ...

  8. HTML简单入门内容

    常用属性: Width=宽度 Height=高度 Size=大小 Color=颜色 Align=布局方向,值包括(top,bottom,left,right,center)上,下,左,右,中. Bor ...

  9. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

  10. 用Swagger生成接口文档

    Swagger简介 在系统设计的时候,各个应用之间往往是通过接口进行交互的.因此接口的定义在整个团队中就变得尤为重要.我们可以把接口的规范用接口描述语言进行描述,然后Swagger可以根据我们定义的接 ...