asp.net MVC框架初学的总结。以及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容器

<div 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);