Document Template Based on webform. panel control

The company has been working on webform software, so it is often necessary to create new pages to complete some functions, such as adding, deleting, modifying, and querying data. For document pages, you must be familiar with them.

The most common scenario is a list page + A document page. The list page uses a grid control to display batch data. The document page is used to display a single piece of data and can be added and edited at the same time.

For the document page, the most common implementation method is to use Microsoft controls to drag and drop. however, the problem that arises is that the demand is constantly changing, and the fields that may need to be maintained are constantly increased and modified. In this way, the page must be frequently modified to add or delete some controls, values, and assignments.CodeIt must also be modified.

It is easy to say, that is, the drag and drop of controls. It is simple and tedious to say. Once a field changes, it must be modified.

I have used the PowerBuilder development tool. The data window function in it is really powerful, and it does not have to pay attention to which specific data window to load, because it provides a complete set of methods for value assignment and UI interaction. can we port it to webform? Later we found that the panel control is very similar to the data window function in PowerBuilder, but it is only a container and does not provide any method. Well, we will create this control.

First, you must be able to load the control, use the Panel. CONTROLS attribute, and dynamically load the control. Here we will first look at how the control is stored? I designed a table, as shown in-1.

Figure-1

Description of some fields:

Encoding type and name drop-down menu, checkboxlist, radiobuttonlist, and other control data sources.

Data column name drop-down menu datavaluefield Attribute Value

Show column name drop-down menu datatextfield Attribute Value

Style layout for the radiobuttonlist/checkboxlist control, set the layout, horizontal and number of Columns

See an example below, as shown in-2.

Figure 2

Let's take a look at the data generated based on these controls, as shown in-3. Hey, the interface is ugly! Here we can use an htmltable layout control, and the code can be directly downloaded from the attachment file.

Figure-3

Second, the control also triggers the event. The foreground event is controlled. addtibutes. add in the Add mode. Background events can be implemented through delegation. here we will talk about the registration of foreground events. I added a client event attribute when encapsulating the panel control, as shown in-4. here we will explain that each of these custom properties above the property has its meaning. If you are interested, you can refer to the relevant materials, in the future, we will be able to encapsulate controls into those of Microsoft. Isn't that convenient?

Figure 4

The webpanelclientevents class member is shown in-5.

Figure 5

How to call it? -6

Figure 6

Then, when creating the control, load different client events according to the control editing type, as shown in code snippet-7.

Figure-7

OK. So far, the function of dynamically loading controls to the foreground has been implemented. Next, let's see what other functions can be implemented. when the control is displayed, you must assign values to the control.

In fact, when loading data, we can record edit controls such as Textbox, dropdownlist, or radiobuttonlist, and register a hiddenfield control in the background to store the control list, used by the front-end to obtain the panel control value. my implementation method-8 shown

Figure-8

I saved the control name and editing type in the dictionary <string, string> data type, converted it into a JSON string, and saved it in the hiddenfield control, you can directly convert a JSON string to an object. After collecting the control value, you can convert the control value to a JSON string and submit it to the background for processing.

The assignment operation is relatively simple. You can assign values directly when creating a control dynamically, or assign values based on the control list on the foreground. figure-9 is an example of the onchange event triggered by a drop-down menu. This method is called by the change client events of all drop-down menu controls. The as_dropdownlistid parameter is used to identify which control triggers the event.

Figure-9

So far, a webpanel control that imitates the datawindow control has been born. The most basic data display has no problem with value assignment. Some functions can be expanded on your own.

 

Code download

Document Template. Files Based on the webform. panel control