很久沒有寫博客了，最近做了一個公司門戶網站的小項目，其中接觸到了一些我不會的知識點，今日事情少，便記錄一下，當時想在網上搜索相關的內容，但是沒有找到。
今天想記錄一下這樣一個小的需求的做法。先說一下我的想法：因為是一個門戶網站，所以我需要從后台傳大量的數據到前台，我考慮的是這樣做，用一個字典類型（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拿到數據后，每個鍵值對應的數據就可以這樣通過鍵值獲取了
，獲取后，具體是哪一組數據，再用下標獲取就可以了。
，繞來繞去還是蠻麻煩的哈，但主要是數據比較復雜。
好了，就記錄到這里啦，馬上是元旦了，祝大家開心跨年咯！
本人菜鳥一個，要是有啥出錯的，望指出哦，覺得我寫的差的，接受輕輕的噴，惡意嘲諷謾罵者快走不送哦。
我的郵箱:3074596466@qq.com，歡迎指教！