专栏首页每天学点JavaScript.net mvc前台如何接收和解析后台的字典类型的数据

.net mvc前台如何接收和解析后台的字典类型的数据

  很久没有写博客了,最近做了一个公司门户网站的小项目,其中接触到了一些我不会的知识点,今日事情少,便记录一下,当时想在网上搜索相关的内容,但是没有找到。

  今天想记录一下这样一个小的需求的做法。先说一下我的想法:因为是一个门户网站,所以我需要从后台传大量的数据到前台,我考虑的是这样做,用一个字典类型(dictionary<,>)的变量,把数据的类型(比如新闻,公司产品,技术特点,公司简介)等等作为字典的键值,而把相关的数据放到一个List<T>集合里,然后把集合的内容作为键值对应的value,想这样传递到前台来。这样的一个字典数据就比较的复杂了,我后台都做好了,前端也能接收到数据,但不知道怎么把这些数据一一拿出来,在网上查了很多资料,但问题没有解决,后来知道公司的一个前辈曾把一个字典数据通过web api传递给app端,借鉴了一下他的方法,最终达到了我的目的。

  事先声明,本篇博客我只会把关键代码贴上,而不会写一个完整的demo,因为那样会增加很多不必要的内容。

首先把后台的代码贴出来看看:

        [HttpPost]
        public ActionResult GetData()
        {
            try
            {
                //声明一个字典变量
                Dictionary<string,List<object>> dictionary = new Dictionary<string,List<object>>();
                //获取轮播图图片类型id
                var ImageType = context.DicItems.FirstOrDefault(x => x.Name == "主页轮播图").Id;         
                var BanImage = context.ManageImages.Where(m => m.ParentId == ImageType && m.IsDelete == false).OrderByDescending(m => m.UploadTime).ToList();
                var BanImageData = BanImage.Select(x => new
                {
                    x.Id,
                    x.ImageTitle,
                    x.ImageUrl
                }).ToList().Cast<object>().ToList();
                //将轮播图信息添加到字典中
                dictionary.Add("BanImage", BanImageData);
                //技术特色
                var technology = context.Technologies.Where(x => x.IsDelete == false).OrderByDescending(x => x.CreateTime);
                var TechnologyData = technology.Select(x => new
                {
                    x.Id,
                    x.TechName,
                    x.CoverImage
                }).ToList().Cast<object>().ToList();
                dictionary.Add("Technology", TechnologyData);
                return Json(new {
                    Data = dictionary,
                    Result = true
                });

            }
            catch (Exception exception)
            {
                return Json(new
                {
                    Result = false,
                    exception.Message
                });
            }
        }

本段代码,我首先声明了一个字段类型的变量:

 Dictionary<string,List<object>> dictionary = new Dictionary<string,List<object>>();

 然后用ef操作数据库获取了一些数据,并将数据存到List<T>集合中:

 var technology = context.Technologies.Where(x => x.IsDelete == false).OrderByDescending(x => x.CreateTime);//context是声明的上下文,代码中未贴出
 var TechnologyData = technology.Select(x => new
 {
     x.Id,
     x.TechName,
     x.CoverImage
 }).ToList().Cast<object>().ToList();

第三步,把数据添加到字典中:

dictionary.Add("Technology", TechnologyData);

前面是键(key),后面是值(value),有关字典类型不清楚的可百度,此处不做说明。

以json格式像前台回传数据:

 return Json(new {
     Data = dictionary,
     Result = true
 });

传过去的数据应该为如下一种格式:

{
    "key1":[
        {"Id":"xxxxxx","name":"xxxxxx",.....},
        {"Id":"xxxxxx","name":"xxxxxx",.....},
        {"Id":"xxxxxx","name":"xxxxxx",.....},
        {"Id":"xxxxxx","name":"xxxxxx",.....}
    ],
    "key2":[
        {"Id":"xxxxxx","name":"xxxxxx",.....},
        {"Id":"xxxxxx","name":"xxxxxx",.....},
        {"Id":"xxxxxx","name":"xxxxxx",.....},
        {"Id":"xxxxxx","name":"xxxxxx",.....}
    ],
    .....
}

每个key下面的值可用下标获取,像这样:key1[2].name,key2[1].Id.

哈哈,这其实就是json格式,我太外行了,所以折腾很久也不知道怎么弄。

好了,现在说一下前台接收数据:

先贴出代码看看:<script type="text/javascript">

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

在ajax里面,首先向后台发送数据请求,然后程序才运行到之前的后台代码,当后台把

这个数据回传到前台来的时候,由

这个data接收,这个data就包含两个值,一个交Result ,另一个交Data,但是这个data.Data数据真的有点复杂,不是像data.Result那样是个单数据,就是这里卡主我了。

后来是这样来做的:主要看下面这段代码:

    var getData = function (data) {
        var source = {};
        for (var item in data) {
           //item即为键值
            //source[item]为一个键值对应的list集合的值
            source[item] = data[item];   
        }
        return source;
    }

这个函数在上面运行起来就是这样的:getData(data.Data);

{}是js中的对象类型,

for(var item in data) 就把字典里的每一组数据遍历一遍,然后把对应的键值和数据保存到source{}对象中。然后就是常规操作读取数据了。

 allData = getData(data.Data);
 var BanImageData = allData["BanImage"];
 for (var i = 0; i <= 3; i++) {
     var ImageId = "BanImage_" + i;
     alert(BanImageData[i].ImageUrl);
     $("#" + ImageId).attr("src", BanImageData[i].ImageUrl);
 }

allData拿到数据后,每个键值对应的数据就可以这样通过键值获取了

,获取后,具体是哪一组数据,再用下标获取就可以了。

,绕来绕去还是蛮麻烦的哈,但主要是数据比较复杂。

好了,就记录到这里啦,马上是元旦了,祝大家开心跨年咯!

本人菜鸟一个,要是有啥出错的,望指出哦,觉得我写的差的,接受轻轻的喷,恶意嘲讽谩骂者快走不送哦。

我的邮箱:3074596466@qq.com,欢迎指教!

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • IQueryable与IEnumberable的区别

    转自 http://www.cnblogs.com/fly_dragon/archive/2011/02/21/1959933.html

    CherishTheYouth
  • HBuilder + PHP开发环境配置

    图 5 打开之后,从开始界面可以点击注册后进入使用软件,或者点击暂不登录按钮,也可进入编辑界面。 2.点击文件--->新建--->Web项目,即可创...

    CherishTheYouth
  • 如何在IIS上发布网站

    本片博客记录一下怎么用IIS发布一个网站,以我自己电脑上一个已经开发完成的网站为例:

    CherishTheYouth
  • sql嵌入html格式显示报表(r6笔记第34天)

    在使用监控系统报警的时候,如果显示的报警信息为纯粹的文本,会枯燥很多,而且看起来很不清晰。 比如我们要监控表空间的使用情况,输出列有表空间名,状态,区管理方式,...

    jeanron100
  • 程序员对时间管理的理解

    你的身边是否有过这神一般存在的朋友——永远精力充沛、永远有用不完的时间,学习、社交、生活、兴趣什么都不落下……

    Anymarvel
  • 我是如何从Web开发转向移动开发的?

    我是如何从Web开发转向移动开发的? 我的职业开发生涯是作为一个Web开发人员开始的,使用的是PHP。不久后,我切换到.NET生态系统,使用C#和ASP .NE...

    用户1289394
  • 一文教你用Spider制作简易的翻译工具

    但是,我们通过查看网页结构,我们发现这个网址并不是我们所需要的,那么我们就需要寻找接口了。

    不温卜火
  • AI大事件 | 教皇敦促信徒为AI祈祷,现代汽车有意收购波士顿动力

    我们能教会机器人总结概括他们的学习吗?如何使算法变得更加通俗易懂?孩子的学习方式对AI有借鉴意义吗?在HAI的秋季会议上,学者们讨论了人工智能从人类智能中学习的...

    大数据文摘
  • 如何一步一步用DDD设计一个电商网站(十三)—— 领域事件扩展

    上篇中我们初步运用了领域事件,其中还有一些问题我们没有解决,所以实现是不健壮的,下面先来回顾一下。

    Zachary_ZF
  • 每天只需编程4小时

    其实我一直认为,作为程序员每天有效编程时间大约4个小时就可以,我每天就是最多编程4个小时,不是因为我没有什么活,其实我的工作任务在很多人看来是“相当繁重”的。减...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券