在之前的asp.net WebForms的小项目上,改造成一个使用MVC框架的显示页面
MVC框架核心:Model、View、Controller
Model的文件结构如下:
Controller中返回当前基础的配置信息:
BoardInfo bdinfo;
public ActionResult Storage_Device()
{
MyDataServiceProxy.DataBaseServiceClient ds = new MyDataServiceProxy.DataBaseServiceClient();
DataTable dt1 = (DataTable)ds.DataProcess(DataDefinition.STORAGE_1_RUN);
float cpu = 0, ram = 0, storage = 0, cpuconfig = 0, memory = 0;
DataTable dtconfig = (DataTable)ds.DataProcess(DataDefinition.STORAGE_1_CONFIG);
if (dt1 != null)
{
if (dt1.Rows.Count > 0)
{
cpuconfig = Convert.ToSingle(dt1.Rows[0]["CPUFreq"].ToString());
memory = Convert.ToSingle(dt1.Rows[0]["RAM"].ToString());
}
}
bdinfo = new BoardInfo();
bdinfo.ConfigMsg.CPUFreq = cpuconfig;
bdinfo.ConfigMsg.RAM = memory;
bdinfo.GetIP("STORAGE_1");
return View(bdinfo);
}
一秒一次显示当前实时CPU、ram数据的方式实现了两种:
1、曲线显示方式按照之前javascript+ajax的方式实现,没有做过多的改动。
2、终点第二种,以文本的方式刷新当前CPU等数据:
在尝试了一些方法之后整个页面都跟着刷新,实际需要的是页面显示一部分静态的,只有文本显示区一小部分需要跟着刷新而不是整个页面。实现的方式是采用PartView的方式,将需要刷新的数据return到一个PartView,然后将这个PartView放到界面的一个Div容器中,实现如下:
Controller中定义PartView方法:
public ActionResult RunTimeData_PartView()
{
MyDataServiceProxy.DataBaseServiceClient ds = new MyDataServiceProxy.DataBaseServiceClient();
DataTable dt1 = (DataTable)ds.DataProcess(DataDefinition.STORAGE_1_RUN);
float cpu = 0, ram = 0, storage = 0;
if (dt1 != null)
{
if (dt1.Rows.Count > 0)
{
cpu = Convert.ToSingle(dt1.Rows[0]["CPUFreq"].ToString());
ram = Convert.ToSingle(dt1.Rows[0]["RAM"].ToString());
storage = Convert.ToSingle(dt1.Rows[0]["ROM"].ToString());
}
}
RunTimeInfo info = new RunTimeInfo();
info.RunCPUFreq = cpu;
info.RunRAM = ram;
info.RunROM = storage;
return PartialView(info);
}
在View中放置一个ID为Selector的Div容器
并写Script Ajax
function UpDateData() {
$.ajax({
type: "Get",
url: "/DataPage/RunTimeData_PartView",
data: "",
async: false,
cache: false,
success: function (data) {
$("#Selector").html(data);//重新加载页面
},
error: function (e) {
numberItem = 0;
}
});
}
最后在window.onload = function () 的方法中设置刷新间隔: setInterval(function () { UpDateData() }, 1000);