.net mvc前台如何接收和解析后台的字典类型的数据 二分搜索算法 window.onunload中使用HTTP请求 网页关闭 OpenCvSharp尝试 简单爬虫
.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/