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

asp.net Summary: In this series, we first discuss using ASP.net 2.0 to build an enhanced version of a standard ListBox control (Enhancedlistbox). 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 or one general methods of implementation

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.

　　 Third, the purpose

Next, I want to show you how to put the individual controls used in the examples you just described on a Web form. As you might guess, I'll show you how to encapsulate the functionality in these two examples into one of their own web controls. With the same server-side event model described in the regular method example, we can encapsulate all the behavior into each control to implement the necessary functionality. Since each control can control its own state, the Web forms that contain them do not have to do any extra work.

So far, everything is going well. You may ask: "Where is the problem?" "Well, assuming that the page developer uses the two controls on a page that contains a lot of content, and that every time a reordering or a move is required, it is not an efficient web site that needs to be sent to a server-side postback." That's why you use some javascript.

In this case, you'll use JavaScript code to access the contents of the ListBox in the Enhancedlistbox control to reorder the clients.

In the Listmover control, the JavaScript code moves items from one list to another. The end result is the same, but there is no need to send the server back and forth, as there is no need to trigger any postback. In this way, you can solve the problem of instant response and no need for feedback.

　　 Iv. Issues

Asp. NET generates content in server-side and has a clear definition between client-generated content. In fact, in most cases, the two parts are not related; Therefore, the problem arises. In fact, a Web control is just a server-side component that is responsible for generating HTML to the browser side. Indeed, the standard ASP.net listbox control generates a ListBox (as a <select> label) in HTML form.

The <option> child label in the <select> label can be created using the contents of the Item property in the ListBox control. The Item property is populated on the server side, and its contents help build the appropriate HTML during the build. This is very similar to generating a <input> label's text box Web control, and its Text property is mapped to the Value property of the <input> label. Whenever a page to the server is triggered, the Item property of the ListBox control is saved to viewstate and rebuilt from the viewstate before the page is rebuilt.

Reordering in Enhancedlistbox or moving items on a server-side listmover is straightforward, and allows the normal built-in viewstate mechanism to be supported without any interference from us. However, when you use client JavaScript to add this capability to implement their functionality, it will destroy ViewState. These controls do not go back to the server side, so the item collection property is never saved so that it is overloaded when it is rebuilt. Instead, access the <option> item in the generated <select> label directly at the HTML level. You can move or reorder a control item with JavaScript code, but what happens when you send it back again on the page? The control's list items revert to their state before the move (or reorder) begins.

As I said, if the functionality occurs on the server side of the postback, then the viewstate is saved and is well overloaded so that the item collection is properly populated. However, since your ultimate goal is to implement this functionality on the client side, you will no longer need to resize the Item property, but the property you depend on is responsible for state storage. Now, you may be embarrassed. But don't worry-I have a solution. Now let's start using the necessary client-side scripting code to develop the control to implement the functionality required by each child control. Then, I'll show you how to keep it synchronized with the server code.

　　 Five, Enhancedlistbox control

In this control, you add two pieces of content to an existing ASP.net listbox control. First, add a header-put a label above a listbox. Then, add two buttons to the listbox-for downward and upward reordering respectively.

Note For the sake of simplicity, I omit all the attribute parts from all the subsequent code descriptions.

Now, create a new class that inherits from the ListBox control, as follows:

Using System.Web.UI;
Using System.Web.UI.WebControls;
public class Enhancedlistbox:listbox
{}
If you compile this part of the code and add the control to your toolbox, you will have a full functional copy of the ASP.net listbox control. I developed this control as an inherited control because I wanted to make it have a "placeholder" for a asp.net listbox control. Later, I add additional properties to achieve the visibility of the head and support the reordering button on or off. When these properties are all closed, the controls will look and behave the same as a regular ListBox control. However, you cannot use an overloaded CreateChildControls to add controls to it, because this function is used to build a control hierarchy tree. This asp.net listbox control is written as a build control and draws all its HTML content directly to the build engine, so you need to "inject" your content here. You will use the build control method to build a label and two buttons, and to generate them by overloading the Render method. However, once you overload this method, you completely cancel all the generated content in the original ListBox, which is undesirable. Therefore, I would like to use a number of small techniques to achieve.

　　Six, code injection

My solution is to draw this control in a standard build control, which includes the table label and how the label is generated with the buttons I add. When I write the build Display section, which is where I want to inject the inherited original ListBox, I call base. Render method. This will inject all the code Microsoft has written for the ListBox control into the HTML section I'm trying to draw (see Listing 1 in the source code). The properties listed in table 1 below determine the appearance and behavior of this part of the code. In this article, I have not listed the corresponding property code, but you can find it in the download source code. Note that in the code, the button you want to generate will cause a postback (based on the value of the attribute Reorderbuttonpostback), and the implementation of the interface IPostBackEventHandler will capture the postback.

Table 1:enhancedlistbox Properties

Property name	Category
Upbuttoncaption	Appearance
Downbuttoncaption	Appearance
Showreorderbuttons	Appearance
ShowHeading	Appearance
Headingcaption	Appearance
Reorderbuttonpostback	Behavior
Sidebuttonwidth	Layout
Sidebuttonheight	Layout
Sidebuttonverticalalign	Layout
Reorderbuttonside	Layout
Upbuttonstyle	Styles
Downbuttonstyle	Styles
Listboxstyle	Styles
HeadingStyles	Styles

Now that the control is already looking like the style you want (see Figure 1), you can make the button more responsible for some work than just a postback. The final product contains event-handling code, which is in the implementation of the interface IPostBackEventHandler, so that events can be selectively fired at the server, while developers can add more code here. But remember, you want to use these buttons to reorder the items in the ListBox, and you want to do this without sending a postback. Now, let's start to analyze the most interesting parts.

Figure 1. The Enhancedlistbox control lets users reorder items in a list.