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