Use dynamic and ExpandoObject In the MVC controller to implement data escape output, mvcexpandoobject

Use dynamic and ExpandoObject In the MVC controller to implement data escape output, mvcexpandoobject

In many cases, we define table fields in the database and the actual content displayed on the page, which is often not very matched. Page data may be a combination of multiple table data, therefore, in addition to table design considerations, we also need to consider data presentation processing. For general processing, some foreign key fields need to be specially escaped. If you need to add more fields, this processing may be relatively troublesome. This article describes how to use dynamic and ExpandoObject In the MVC controller to achieve integrated output after data escaping, including adding any more field information.

1. Data Information Display

In general, the information displayed on the interface is relatively rich. Although we consider how to streamline and avoid duplication when designing data tables, however, the information displayed on the interface is often considered to make it easier for users, so relevant information may be displayed as much as possible.

For such a scenario, device information is the main basic information, and related services include equipment inspection, equipment maintenance, and equipment repair report, as shown below.

Based on the above data design, if we display information such as Device Inspection, device maintenance, and device repair, we usually need to display some basic device information, this makes it easier for us to understand the entire record data, but we separate them during data design, so we need to combine them when outputting them to the interface.

I used to describe how to process data escape in "MVC4 + EasyUI Web development framework Experience Summary (9) -- How to Implement escape operations for foreign key fields in the Datagrid, however, that method is not ideal. The use of dynamic and ExpandoObject in this article is my ideal processing mode.

Let's take a look at the interface effect that I implemented in this way. Then we will introduce how to implement this operation step by step.

 

2. Data escape implementation

In the above interface effect, we implement background processing based on MVC, and present it using Bootstrap on the interface (using EaysUI components is similar ). We will introduce the implementation in two parts: one is the MVC output data and the other is the interface display.

1) MVC controller Data Processing

In MVC, we usually use FindWithPager of the base class to process data by page. Based on how to implement data paging in the MVC controller, for more information, see Metronic-based Bootstrap development framework experience (2) -- list paging processing and plug-in JSTree usage.

In general practice, if it is the primary table information, we can simply output them, as shown below.

Public override ActionResult FindWithPager () {// check whether the user has the permission. Otherwise, a MyDenyAccessException exception base is thrown. checkAuthorized (AuthorizeKey. listKey); string where = GetPagerCondition (); PagerInfo pagerInfo = GetPagerInfo (); List <DeviceInfo> list = baseBLL. findWithPager (where, pagerInfo); // Json format requirements {total: 22, rows: {}} // construct a Json format to pass var result = new {total = pagerInfo. recordCount, rows = list}; return ToJsonContentDate (result );}

That is, the queried data list is directly output to the caller without any escape, and the data is filtered on the interface.

If the above mentioned device inspection, device repair, and other information related to the device, we need to use dynamic and ExpandoObject to integrate the device information and provide it to the interface. The specific code is as follows.

First, we traverse the queried records and convert each record, as shown below.

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

Note that we have defined the List of List <ExpandoObject> and the dynamic obj object. In this way, we dynamically define the object and add the required field attributes to the dynamic object, put it in the set.

The complete paging controller code is as follows.

Public override ActionResult FindWithPager () {// check whether the user has the permission. Otherwise, a MyDenyAccessException exception base is thrown. checkAuthorized (AuthorizeKey. listKey); string where = GetPagerCondition (); PagerInfo pagerInfo = GetPagerInfo (); List <DeviceCheckInfo> list = baseBLL. findWithPager (where, pagerInfo); // List of device serial numbers of the brand type and model of the department to which the device code belongs <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 format requirements {total: 22, rows :{}} // construct a Json format to pass var result = new {total = pagerInfo. recordCount, rows = objList}; return ToJsonContentDate (result );}

 

2) data display on the Interface

The above defines the data acquisition method, that is, we need to add any data to the set object through dynamic attributes in the MVC controller, thus simplifying the processing of our interface, we only need to display the obtained information on the interface, which is very simple.

The HTML code of the interface view is as follows:

<Table id = "grid" class = "table-striped table-bordered table-hover" cellpadding = "0" cellspacing = "0" border = "0" class = "display "width =" 100% "> <thead id =" grid_head "> <tr> <! -- Device Code Department brand type model device serial number check time Handler --> <th class = "table-checkbox" style = "width: 40px "> <input class =" group-checkable "type =" checkbox "onclick =" selectAll (this) "> </th> <th> device Code </th> <th> Department </th> <th> brand </th> <th> Category </th> <th> Model </th> <th> device serial number </th> <th> check time </th> <th> handler </th> <th style =" width: 90px "> operation </th> </tr> </thead> <tbody id =" grid_body "> </tbody> </table>

We are bound to the interface to obtain data through Ajax and then bind the display. The JS Code is as follows.

Function SearchCondition (page, condition) {// obtain the Json object set and generate the data display 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 (""); // <! -- Device Code Department brand type model device serial number inspection time Handler --> $. 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); // get the view, edit, and delete operation code tr + = "</tr>"; $ ("# grid_body "). append (tr) ;}); // sets the page attributes and processes 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); // content update triggered when the page changes} element. bootstrapPaginator (options);} else {element.html ("");}});}

In this way, the interface effect described above is achieved elegantly.