.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();
    　　});
　　　　
　　　　

　　　　 var alldata = {};

        var query = function () {
        $.ajax({
            type: 'post',
            url: "@url.action("getdata","home")",
            datatype: 'json',
            success: function (data) {
                // alert(data.message);
                if (data.result) {
                    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);
                    }
                }               
            }
        });
    }

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

 

在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拿到数据后，每个键值对应的数据就可以这样通过键值获取了，获取后，具体是哪一组数据，再用下标获取就可以了。

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

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

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

 

我的邮箱:[e-mail]，欢迎指教！