前几天研究SSE,用浏览器做侦听后台数据库数据变化,如果有更新,就即时通过浏览器,使用SSE效果果然OK,侦听数据库有更新时马上会向浏览器通知有新数据,我还在浏览器里放了短音提示,但遇到一个问题,发出短音提示时刷新页面,即时显示出数据的变化,由于网页页面中使用的元素复杂,使用JS来改变难度很大,还不如重新加载一次网页来的方便,但整网页重新加载会使用刚刚显示的通知信息和短音提示消失,起不到通知客户的效果,所以想来想去,还是局部刷新比较好,这时想到asp.net MVC4有个分部视图可以做个局部刷新,实现了一下,达到了要求,以后应该多用分部视图,大大提高灵活性。
具体实现就不写了,来点简单的思路:
1.写好分部视图的控制器
public PartialViewResult GetData(){ //这里加载一些页面需要的数据,可以使用ViewBag,ViewData,还可以使用Model var list=dao.get......; return PartialView(list); }
2.写好分部视图的网页
@model List<String> @using Info.Models; <div> //显示从控制器获取的数据库 </div>
3.主页中加入分部视图
<div class="mainbox"> @{Html.RenderAction("GetData");} </div>
4.在主页中使用JS加载分部视图
var es=new EventSource("/Home/SSE"); es.onmessage=function(e){ if(e.data=="ok"){//说明数据库有更新 $(".mainbox").load("/Home/GetData"); document.getElementById("mp3").play(); $("#msg").text("有新的数据已提交").show(); } }
这样就实现了有新数据时即时更新页面,通过分部视图局部加载控制器中的数据到网页页面中。