EasyUI在MVC控制器里面使用dynamic和ExpandoObject,完结数量转义的出口

在众多时候,大家在数据库里面定义表字段和事实上在页面中显得的剧情,往往是不太协作的,页面数据只怕是三个表数据的综合体,由此除了大家在表设计的时候怀想周到外,还索要思索数据显现的拍卖。假设是例行的处理,那么要求对部非常键字段实行尤其的转义处理,借使急需充实多壹些字段,那么那种拍卖也许就相对相比麻烦一些。本文介绍如何在MVC控制器里面使用dynamic和ExpandoObject,完成多少转义后壹体化的出口,包罗扩展任意多的字段信息。

1、数据新闻的彰显

诚如景况下,我们在界面里面体现的信息是绝相比较丰盛的,就算大家铺排数据表的时候,考虑的是什么样精简且制止重新,但是在界面上海展览中心示的音讯,往往是思考怎样让用户越来越有益于,因而可能尽恐怕的彰显相关音讯。

如对于这么的场馆,设备音信作为根本的底子消息,其连带的事情包涵设备检查、设备维护、设备报修等消息,如下所示。

EasyUI 1

依据上面包车型地铁多少安排,我们假如在展现设备检查、设备维护、设备报修等音讯的时候,那么我们壹般还须求体现部分的装置基础消息,那样我们更便于领悟任何记录数据,可是大家在数据安顿的时候,是把它们分别的,由此须求在输出到界面包车型地铁时候,把它们综合起来。

自家从前在《基于MVC肆+EasyUI的Web开发框架经验总计(玖)–在Datagrid里面达成外键字段的转义操作》介绍过部分数额转义的拍卖,不过这种办法并不是相比较可观的方法。本篇介绍的应用dynamic和ExpandoObject才是自己美丽的拍卖形式。

我们来探视自家最终通过那种艺术贯彻的界面效果,之后我们再来一步步介绍怎么着实现那一个操作进度的。

EasyUI 2

 

二、数据转义的落到实处

在上头的界面效果里面,大家是依据MVC达成后台的拍卖,在界面上运用Bootstrap举办展示的(利用EaysUI组件也是类似的处理)。大家分为两部分举办介绍实现的,1部分是使用MVC的出口数据,一部分是界面包车型大巴呈现。

一)MVC的控制器数据处理

在MVC里面,大家壹般经过基类的FindWithPager实行多少的分页处理,基于什么在MVC控制器里面达成数据的分页处理,大家感兴趣能够参见《根据Metronic的Bootstrap开发框架经验总计(二)–列表分页处理和插件JSTree的应用》小说举办精晓。

符合规律的做法,假使是主表消息,大家得以把它们简单的出口,如下所示。

        public override ActionResult FindWithPager()
        {
            //检查用户是否有权限,否则抛出MyDenyAccessException异常
            base.CheckAuthorized(AuthorizeKey.ListKey);

            string where = GetPagerCondition();
            PagerInfo pagerInfo = GetPagerInfo();
            List<DeviceInfo> list = baseBLL.FindWithPager(where, pagerInfo);

            //Json格式的要求{total:22,rows:{}}
            //构造成Json的格式传递
            var result = new { total = pagerInfo.RecordCount, rows = list };
            return ToJsonContentDate(result);
        }

也正是不必要经过任何转义就一贯把询问到的多少列表输出给调用者,由界面实行多少的筛选处理。

比方对于地点提到的装置检查、设备维修等和配备消息相关的,大家就必要利用dynamic和ExpandoObject,把装备消息整合一起提供给界面了,具体代码如下所示。

大家首先对查询的记录举行遍历,把每条记下实行转换,如下所示。

            List<ExpandoObject> objList = new List<ExpandoObject>();
            foreach (DeviceCheckInfo info in list)
            {
                dynamic obj = new ExpandoObject();

瞩目下面大家定义了List<ExpandoObject>的列表和dynamic
obj的对象,那样大家由此动态定义的指标,把我们要求的字段属性加到动态指标里面,然后嵌入集合里面即可。

壹体化的分页控制器代码如下所示。

        public override ActionResult FindWithPager()
        {
            //检查用户是否有权限,否则抛出MyDenyAccessException异常
            base.CheckAuthorized(AuthorizeKey.ListKey);

            string where = GetPagerCondition();
            PagerInfo pagerInfo = GetPagerInfo();
            List<DeviceCheckInfo> list = baseBLL.FindWithPager(where, pagerInfo);

            //设备编码    所属科室    品牌    品类    型号    设备序列号    检查时间    处理人
            List<ExpandoObject> objList = new List<ExpandoObject>();
            foreach (DeviceCheckInfo info in list)
            {
                dynamic obj = new ExpandoObject();

                DeviceInfo deviceInfo = BLLFactory<Device>.Instance.FindByCode(info.DeviceCode);
                if (deviceInfo != null)
                {
                    obj.Dept = deviceInfo.Dept;
                    obj.Brand = deviceInfo.Brand;
                    obj.Name = deviceInfo.Name;
                    obj.Model = deviceInfo.Model;
                    obj.SerialNo = deviceInfo.SerialNo;
                }
                obj.ID = info.ID;
                obj.DeviceCode = info.DeviceCode;
                obj.OperateTime = info.OperateTime;
                obj.Operator = info.Operator;

                objList.Add(obj);
            }

            //Json格式的要求{total:22,rows:{}}
            //构造成Json的格式传递
            var result = new { total = pagerInfo.RecordCount, rows = objList };
            return ToJsonContentDate(result);
        }

 

2)界面包车型地铁数码彰显

上面定义了数码的取得方式,也正是大家须求此外数据都足以在MVC控制器里面,通过动态属性的方式足够到集结对象里面,从而简化了大家界面包车型客车拍卖,大家只要求把收获的音讯映未来界面上即可,卓殊便利了。

界面视图的HTML代码如下所示

            <table id="grid" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
                <thead id="grid_head">
                    <tr>
                        <!--设备编码    所属科室    品牌    品类    型号    设备序列号    检查时间    处理人    -->
                        <th class="table-checkbox" style="width:40px"><input class="group-checkable" type="checkbox" onclick="selectAll(this)"></th>
                         <th>设备编码</th>
                         <th>所属科室</th>
                         <th>品牌</th>
                         <th>品类</th>
                         <th>型号</th>  
                        <th>设备序列号</th>
                        <th>检查时间</th>
                        <th>处理人</th>
                        <th style="width:90px">操作</th>
                    </tr>
                </thead>
                <tbody id="grid_body"></tbody>
            </table>

笔者们绑定到界面上,是透过Ajax的艺术获取数据,然后绑定展现的,JS代码如下所示。

        function SearchCondition(page, condition) {
            //获取Json对象集合,并生成数据显示内容
            url = "/DeviceCheck/FindWithPager?page=" + page + "&rows=" + rows;
            $.getJSON(url + "&" + condition, function (data) {
                $("#totalCount").text(data.total);
                $("#totalPageCount").text(Math.ceil(data.total / rows));

                $("#grid_body").html("");

                //<!--设备编码    所属科室    品牌    品类    型号    设备序列号    检查时间    处理人    -->
                $.each(data.rows, function (i, item) {
                    var tr = "<tr>";
                    tr += "<td><input class='checkboxes' type=\"checkbox\" name=\"checkbox\" value=" + item.ID + "></td>";
                     tr += "<td>" + item.DeviceCode + "</td>";
                     tr += "<td>" + item.Dept + "</td>";
                     tr += "<td>" + item.Brand + "</td>";
                     tr += "<td>" + item.Name + "</td>";
                     tr += "<td>" + item.Model + "</td>";
                     tr += "<td>" + item.SerialNo + "</td>";
                     tr += "<td>" + item.OperateTime + "</td>";
                     tr += "<td>" + item.Operator + "</td>";

                    tr += getActionHtml(item.ID); //获取查看、编辑、删除操作代码

                    tr += "</tr>";
                    $("#grid_body").append(tr);
                });

                //设置分页属性及处理
                var element = $('#grid_paging');
                if(data.total > 0) {
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: page,
                        numberOfPages: rows,
                        totalPages: Math.ceil(data.total / rows),
                        onPageChanged: function (event, oldPage, newPage) {
                            SearchCondition(newPage, condition);  //页面变化时触发内容更新
                        }
                    }
                    element.bootstrapPaginator(options);
                } else {
                    element.html("");
                }
            });
        }

如此那般就最后优雅的贯彻了我们日前介绍的界面效果了。

EasyUI 3