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

本段代码，我首先声明了一个字段类型的变量：

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

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

二分搜索算法

二分搜索用于在已经排序好的集合中搜索值，每次与中间值对比，小于则搜索前半段，大于中间值则在后半段，继续二分搜索，实现代码：

        /// <summary>
        /// 二分查找
        /// </summary>
        /// <param name="arr">已经排序过的数组</param>
        /// <param name="searchkey">搜索值</param>
        /// <returns></returns>
        private static int BinarySearch(int[] arr, int searchkey)
        {
            int start = 0;
            int end = arr.Length - 1;

            int mid = 0;
            while (start <= end)
            {
                mid = (start + end) / 2;
                if (arr[mid] < searchkey) //中间值小于 搜索值,说明要查找值在尾部
                {
                    start = mid + 1;
                }
                else if (arr[mid] > searchkey)//中间值大于搜索值，说明要搜索值在首部
                {
                    end = mid - 1;
                }
                else
                {
                    return mid;
                }
            }
            return -mid;
        }

如果查询不到值返回的是负的最后查询的中间值的位置，负值变正后+1 则可用来有序插入搜索值，使列表保持排序。

window.onunload中使用HTTP请求

在页面关闭时触发window.onunload

在onunload中要使用http请求，需要使用同步请求：

如：

$.ajax({ url: url, async: false });

iframe页面关闭后执行方法：

因为iframe之上还存在父页面，在iframe页面里面实现了window.onunload事件，之后直接关闭父页面，不能触发iframe页面的onunload事件，改进后的代码：

父页面关闭也可以执行子页面关闭后的方法：

var exit=function (){};

window.onunload = exit;
 if (top.location != self.location) { //当前页面不是顶级页面时
            parent.window.onunload = exit;
}

网页关闭

有时候window.close();无效，

改成

window.open("about:blank", "_self").close();

用于关闭页面

OpenCvSharp尝试

OpenCvSharp是封装了OpenCV的.net版本

项目地址：https://github.com/shimat/opencvsharp

简单使用：

1、NuGet安装

2、使用OpenCvSharp打开一张图片，需要添加 OpenCvSharp 命名空间

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using OpenCvSharp;

namespace OpenCvDemo
{
    class Program
    {
        static void Main(string[] args)
        {
            Mat source = new Mat(@"F:\Test\OpenCvDemo\OpenCvDemo\p.jpg", ImreadModes.Color);
            Cv2.ImShow("Demo", source);
            Cv2.WaitKey(0);

        }
    }
}

运行结果：

简单爬虫

使用HtmlAgilityPack来开发简单爬虫：

1、NuGet安装HtmlAgilityPack

2、简单的爬虫代码

HtmlWeb web=new HtmlWeb();
string url="网站地址";
var doc = web.Load(url);
//使用并行查询来获取元素的属性值
IList<string> detailPageUrls = new List<string>();
            doc.DocumentNode.SelectNodes("//a[@class='js-title value title-font']")
                .AsParallel().ToList().ForEach(hn =>
                {
                    string detailPageurl = hn.GetAttributeValue("href", string.Empty);
                    if (!string.IsNullOrWhiteSpace(detailPageurl))
                    {
                        detailPageUrls.Add(detailPageurl);
                    }
                });

官网地址：https://html-agility-pack.net/