mvc ajax局部刷新页面,asp.net MVC框架初学的总结。以及PartView页面局部刷新的方法。...

在之前的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);