C#+asp.net 2.0 Custom composite components for the basic article

Summary: In this series, we first discuss building an enhanced version (Enhancedlistbox) of a standard listbox control using ASP.net 2.0. This control can reorder its items and enable synchronization between the client and server side. Then we combine two of these controls to create a composite control (listmover).

First, the introduction

Building complex Web controls that provide a rich client interface often requires the integration of some client JavaScript code with the server-side code of the control. However, in some cases, making the problem too complex to achieve some ingenious effect often destroys the data synchronization between the control's internal server code and the generated client-side HTML code, which becomes a problem when the page is sent back. In this article, I'll start by building two "cool" Web controls that are extremely easy to cause, and then show you how to modify this vulnerability.

In this article, we will use the c#+asp.net 2.0来 to customize these controls and give you a brief description of how to make them work in the ASP.net 1.1 (or 1.0) environment.

Currently, HTML remains the primary language for the Web application generation phase. Unfortunately, the protocol it uses is stateless, so the web developer has to deal with this stateless feature on its own. By using some architectural features, such as the postback mechanism and the ViewState variable, ASP. NET helps to handle this problem. However, in order to achieve some functionality, there is a need to work harder to combine the various technologies that Web pages continually request from the server with the help of a postback event.

Specifically, I will analyze how to use JavaScript and DHTML to access elements that are generated on the client. In fact, the combination of client and server functionality requires a great deal of skill to achieve the best user experience, and Microsoft has achieved this in its asp.net validation controls. In order to provide a rich client-side checksum, a large amount of JavaScript is used in the control.

Author Note: This article assumes that you have a basic understanding of custom Web control development. Therefore, I will no longer repeat the basics of Web control development, such as how attributes work and how styles are added.

Two, a general realization method

Next, I want to show you how to build a cool set of controls that have the best features you can see in your business controls. Later, I'll continue to show the full encapsulation benefits of customizing Web controls to Web programming. Now that you know how to develop custom Web controls, one concept you should know is to encapsulate all the functionality and behavior of a control (as you would in a standard business object). This encapsulation is extremely useful when learning to build controls that have complex behavior.

In the first control, I'll show you how to build a control called Enhancedlistbox. This control expands the ASP.net listbox control-Adding a header and some reorder buttons. Note that this is a control that inherits directly from the regular listbox.

After that, I'll show you how to build a composite control-listmover, which will contain two of the Enhancedlistbox controls mentioned above. The Listmover control also contains buttons that allow you to move items from one list to another.

In fact, it is not difficult to implement this asp.net functionality in a regular way (non-oriented to Web controls). First, you drag a regular ListBox control onto your Web form and populate it with some data.

Then, add a label as the caption, and a group of buttons to use as the Reorder button. The server-side event that captures these buttons is the standard operation in asp.net; therefore, you only need to use one method to get the currently selected item and put it to a higher or lower position in the list based on the button clicked by the user. For example, you might write one of the following code implementations to move a list.

i_Index = ListBox1.SelectedIndex;
o_Item = ListBox1.SelectedItem;
ListBox1.Items.RemoveAt(this.SelectedIndex);
i_Index--;
if(i_Index < 0) i_Index = 0;
ListBox1.Items.Insert(i_Index， o_Item);

Next, let me do a simple analysis. First, I saved the index value of the selected item in the current list with the current item. Then, I delete the item at the current location, and then reinsert the item in a lower position (the previous index value minus 1). The logic here is very simple, so why do I have to explain this problem?

With this conventional asp.net programming approach, the Reorder button above the Web form raises a server-side event that implements the reordering in the listbox. This is triggered by a postback to the server; Therefore, this return may be a "heavy" round-trip, specifically to rely on the contents of the form and the speed of the Internet.

However, because this code implements a standard ASP.net postback process, the ASP.net uses its viewstate mechanism to handle state processing. When the page is generated again, the contents of the list box are generated correctly in the order required.

Of course, you can also recreate this feature in the Listmover control in the same normal way as this. Space is limited, I omitted here, but left to the reader you to achieve. This Web form contains a pair of ListBox, and some buttons that indicate moving from left to right or right to left. The server-side events for these buttons will extract the selected item from a ListBox and add it to another list, and vice versa. As shown in the previous example, ViewState is here to work well to maintain the items in these two listbox.