How does the .net mvc front desk receive and parse back-end dictionary type data

How does the .net mvc front desk receive and parse back-end dictionary type data

  It’s been a long time since I wrote a blog. I recently made a small project on the company’s portal website. I came into contact with some knowledge points that I don’t know. There are few things today, so I recorded it. I wanted to search for relevant content on the Internet, but I didn’t find it.

  Today I want to record the practice of such a small demand. Let me talk about my thoughts first: because it is a portal site, I need to send a large amount of data from the backend to the frontend. What I consider is to do so, using a dictionary type (dictionary<,>) variable to change the data type ( For example, news, company products, technical features, company profile, etc. as the key value of the dictionary, and put the relevant data in a List<T> collection, and then use the content of the collection as the value corresponding to the key value. I want to pass it like this Come to the front desk. Such a dictionary data is more complicated. I have done everything in the backend, and the front end can also receive the data, but I don’t know how to get the data out one by one. I checked a lot of information on the Internet, but the problem was not resolved. I know that a predecessor of the company once passed a dictionary data to the app through the web api, and learned from his method, and finally achieved my goal.

  I declare in advance that I will only post key codes in this blog, and will not write a complete demo, because that will add a lot of unnecessary content.

1. post the background code to see:

        [HttpPost]
        public ActionResult GetData()
        {
            try
            {
               //Declare a dictionary variable
                Dictionary<string,List<object>> dictionary = new Dictionary<string,List<object>>();
               //Get the image type id of the carousel
                var ImageType = context.DicItems.FirstOrDefault(x => x.Name == "Homepage Carousel Image").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();
               //Add carousel information to the dictionary
                dictionary.Add("BanImage", BanImageData);
               //Technical characteristics
                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
                });
            }
        }

In this code, I first declare a variable of the field type:

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

 Then use ef to operate the database to obtain some data, and store the data in the List<T> collection:

 var technology = context.Technologies.Where(x => x.IsDelete == false).OrderByDescending(x => x.CreateTime);//context is the declared context, not posted in the code
 var TechnologyData = technology.Select(x => new
 {
     x.Id,
     x.TechName,
     x.CoverImage
 }).ToList().Cast<object>().ToList();

The third step is to add the data to the dictionary:

dictionary.Add("Technology", TechnologyData);

The front is the key (key), and the back is the value (value). If you don't know the type of dictionary, you can Baidu, so I won't explain it here.

Return data in json format like the front desk:

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

The data passed in the past should be in one of the following formats:

{
    "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",.....}
    ],
    .....
}

The value under each key can be obtained by subscript, like this: key1[2].name,key2[1].Id.

Haha, this is actually the json format, I'm too layman, so I don't know how to get it after a long time toss.

Okay, now let's talk about the reception of data at the front desk:

First post the code to see: <script type="text/javascript">

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

In ajax, first send a data request to the background, and then the program runs to the previous background code, when the background

When this data is sent back to the front desk,

When this data is received, this data contains two values, one for Result and the other for Data, but the data.Data is really a bit complicated. It's not a single data like data.Result, but it's here.

Later it is done like this: mainly look at the following code:

    var getData = function (data) {
        var source = {};
        for (var item in data) {
          //item is the key value
           //source[item] is the value of the list collection corresponding to a key value
            source[item] = data[item];   
        }
        return source;
    }

This function runs on it like this: getData(data.Data);

{} is the object type in js,

,

for(var item in data) traverses each set of data in the dictionary, and then saves the corresponding key value and data in the source{} object. Then it is the normal operation to read the data.

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

After allData gets the data, the data corresponding to each key value can be obtained through the key value in this way

, After obtaining, which set of data is specific, then use the subscript to obtain it.

, It’s still quite troublesome to go around, but the main reason is that the data is more complicated.

Okay, let's record it here, it's New Year's Day soon, I wish you all a happy New Year!

I am a rookie. If there is something wrong, I hope to point it out. If I feel that I wrote it poorly, accept the light spray and maliciously mock the abuser and leave it.

My email: 3074596466@qq.com, welcome to advise!

Reference: https://cloud.tencent.com/developer/article/1475578.net How does the mvc front-end receive and parse the dictionary-type data in the back-end-Cloud + Community-Tencent Cloud