Document Template Based on webform. panel control (enhanced Edition)

Some time ago I wrote a similar articleArticleIn the use process, there is no problem. however, when a customer went on a business trip last week, the idea of using that article was not enough. cause-1 is shown. to put it simply, there is a single data control like textbox under a certain panel, and a multi-table control like gridview at the same time.

In addition, a single data control such as textbox may correspond to more than one DB table. Therefore, its idea should be adjusted. The current adjustment process is as follows:

Figure-1

Before adjustment, let's talk about the multiple data controls shown in-1. Microsoft provides the gridview, and other third-party controls also have their own controls. there are many implementation methods. Here I chose the DataGrid Control in jqueryeasyui V1.2.1 class library, which is easy to use and simple. take a look at the actual situation, as shown in-2.

Figure 2

It should be noted that there are many input methods provided by him. In addition to the text edit box input method, it also provides textarea, checkbox, numberbox, validatebox, datetbox, ComboBox, multiple methods of combotree. for more information about how to use the SDK, see the demo of jquery easyui.

Let's look at how it loads columns and fills in data, as shown in-3 and figure-4.

Figure-3

Figure 4

To put it simply, concatenate the htmltable string, as shown in-5 during loading.

It is worth noting that I am not directly using the htmltable class in the background, and I use the htmlgenericcontrol universal control to generate a div object during creation, then assign a value to the DIV content. the reason why I didn't directly use the htmltable class is that I didn't find the corresponding thead and tbody classes, and the DataGrid format of easyui must contain these objects, so I didn't use them. it is easy to use Div. I only provide one idea here.

Now, let's make adjustments.

Step 1: The xml configuration file is not changed, but the dynamic creation of the button and webhtmltable controls is added when the control is created. the webhtmltable control is the control I introduced above for detailed data entry, as shown in-6.

Figure 6

SlaveCodeControltitle is the topic title, controlid is the topic name, and width and Editor (editing type) are all dead currently. Of course, they can also be configured.

Step 2: Create the Panel sub-control, as shown in-7. This is the code for the page_load event on the page, and the create part is placed in! Outside ispostback, the data source bound to the drop-down menu is placed in it. Previously, the test found that all data sources are placed out. Each time you set a value in the background, the value of the drop-down menu is not always obtained, it turns out to be reloaded once every time. this problem does not occur if it is obtained at the front-end.

Figure-7

Let's take a look at the document page generated based on the configuration in the XML file, as shown in-8.

Figure-8

Description

1. during the create control process, the control name and editing type are recorded. The function is to obtain the value of the control directly at the front-end, as shown in-9. the control name and editing type are stored in JSON format. String-based interaction in the front and back is the most convenient and convenient.

Figure-9

2. During the create control process, it also records which controls are mandatory. In this way, you can directly modify the xml configuration file to determine which controls are mandatory.

Figure-10

Now, the transformation has been completed. now let's continue to process the data value. here, we recommend that you obtain the control value in the foreground and submit it to the background using Ajax instead of directly triggering the Click Event of a button in the background of the page. this is because some data items in the drop-down menu of cascading operations are loaded in Ajax mode at the front end, which cannot be obtained in the background.

After the value is obtained, the control value data handed to the background is also a JSON string. Now we have to parse the control value.

As we have already said before, in a panel, the control may correspond to multiple dB tables. Therefore, when we take a value, we classify the values based on the DB table name, the ing between controls and DB tables and columns corresponds to the configuration file. there is another benefit in this way. When multiple panel controls are used at the same time, the columns of a DB table can be maintained simultaneously in multiple panel controls. in this way, we can splice the DB column values obtained from each panel control, and then uniformly execute the data addition, deletion, and modification operations.

I don't know whether it is clear? If you have any questions or other ideas, please leave a message!

 

Sample Code

Document Template. Enhanced version. Files Based on webform. panel control