Analysis on ComboBox display of ASP. NET control development skills

How does ComboBox display show ASP. NET control development skills? First, let's take a look:

First look at the effect

 

ASP. NET control development skills-ComboBox display Figure 1

ComboBox features:

Compared with DropDownList, You can input text by yourself, but HTML does not provide such a tag, so you can only simulate it using existing tags.

As shown in the preceding figure, let's take a look at the generated HTML code. This part is divided into local code and contains two sets.

 
 

  
  
﹤table id="ComboBox2" class="comboBox" cellpadding="0" cellspacing="0" 
  
  
 
  
  
 onmouseout="ComboBox2.HandleInputMouseOut()"   
  
  
 
  
  
onmouseover="ComboBox2.HandleInputMouseOver()" style="display:inline-block;width:200px;"﹥  
  
  
﹤tr﹥  
  
  
﹤td width="100%" id="ComboBox2_TextBox"﹥  
  
  
 
  
  
﹤input id="ComboBox2_Input" name="ComboBox2_Input" autocomplete="off"   
  
  
 
  
  
onsubmit="return false;" type="text"   
  
  
 
  
  
class="comboTextBox" onfocus="ComboBox2.HandleFocus()"   
  
  
 
  
  
onblur="ComboBox2.HandleBlur(event)"   
  
  
 
  
  
onkeydown="ComboBox2.HandleKeyPress(event,this)" style="display:none;" /﹥﹤/td﹥  
  
  
 
  
  
﹤td﹥  
  
  
 
  
  
﹤img onmouseup="ComboBox2.HandleDropMouseUp(event,this)"   
  
  
 
  
  
onmousedown="ComboBox2.HandleDropClick(event,this)" src="images/drop.gif"   
  
  
 
  
  
id="ComboBox2_DropImage" style="display:block;" /﹥﹤/td﹥  
  
  
﹤/tr﹥  
  
  
﹤/table﹥  
  
  
﹤div class="comboDropDown" id="ComboBox2_DropDown" style="display:none;"﹥  
  
  
﹤table cellpadding="0" cellspacing="0" border="0" width="100%"﹥  
  
  
﹤tr﹥  
  
  
﹤td﹥﹤div id="ComboBox2_DropDownContent" onscroll="ComboBox2.HandleScroll(event,this)"   
  
  
 
  
  
        onmousedown="ComponentArt_CancelEvent(event)"   
  
  
 
  
  
onmouseup="ComboBox2.HandleMouseUp(event,this)"﹥  
  
  
 
  
  
﹤/div﹥﹤/td﹥  
  
  
﹤/tr﹥  
  
  
﹤/table﹥  
  
  
﹤/div﹥ 
 
 

(1) A table contains a text box and an image.

 

ASP. NET control development skills-ComboBox display Figure 2

(2) When you select an image on the right, a drop-down box is displayed, indicating that the hidden div is displayed. You can see that it is initialized to hidden, style = "display: none ;".

 

ASP. NET control development skills-ComboBox display Figure 3

The combination of the two forms a ComboBox control.

The ComboBox display of ASP. NET control development skills will be introduced here, and relevant content about ComboBox display will be mentioned in future articles.

1. Implementation of ASP. NET Component Design Code
2. Development of ASP. NET controls-analysis of methods for modifying server controls
3. Development of ASP. NET controls-how to trigger JavaScript scripts using UpdatePanel
4. ASP. NET control development tips: disable unnecessary functions of the base class
5. Analysis on the use of HtmlTextWriter class in ASP. NET control development skills