.net mvc前臺如何接收和解析後臺的字典型別的資料
很久沒有寫部落格了，最近做了一個公司入口網站的小專案，其中接觸到了一些我不會的知識點，今日事情少，便記錄一下，當時想在網上搜索相關的內容，但是沒有找到。
今天想記錄一下這樣一個小的需求的做法。先說一下我的想法：因為是一個入口網站，所以我需要從後臺傳大量的資料到前臺，我考慮的是這樣做，用一個字典型別（dictionary<,>）的變數，把資料的型別（比如新聞，公司產品，技術特點，公司簡介）等等作為字典的鍵值，而把相關的資料放到一個List<T>集合裡，然後把集合的內容作為鍵值對應的value，想這樣傳遞到前臺來。這樣的一個字典資料就比較的複雜了，我後臺都做好了，前端也能接收到資料，但不知道怎麼把這些資料一一拿出來，在網上查了很多資料，但問題沒有解決，後來知道公司的一個前輩曾把一個字典資料通過web api傳遞給app端，借鑑了一下他的方法，最終達到了我的目的。
事先宣告，本篇部落格我只會把關鍵程式碼貼上，而不會寫一個完整的demo，因為那樣會增加很多不必要的內容。
首先把後臺的程式碼貼出來看看：
[HttpPost]
public ActionResult GetData()
{
try
{
//宣告一個字典變數
Dictionary<string,List<object>> dictionary = new Dictionary<string
本段程式碼，我首先聲明瞭一個欄位型別的變數：
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]，歡迎指教！