[DevExpress]ASP.NET控件ASPxComboBox組合框小結(一)

Dev家族里的ASP.NET相關控件大部分成對出現的比如:ASPxComboBox服務器控件對應着相應的客戶端對象ASPxClientComboBox.

它們名字上的區別是客戶端對象名字里有個Client.查看API文檔也能發現對應服務端控件的大部分屬性讀取，相應的客戶端都是采用方法的方式實現。

文檔可以在這里下載：

https://www.devexpress.com/ClientCenter/Downloads/Documentation

按照文檔說，ASPxComboBox代表一個Editor用於顯示一個在下拉窗口里顯示列表項的這樣一個控件。

既然是Editor,所以位於名稱空間:DevExpress.Web.ASPxEditors里。

它的樣子如下：

現在來看下它們的簡單使用:

1.引入

標簽方式： 

                            <dx:ASPxComboBox runat="server" ID="cboTypeOfServ">
                            
                            </dx:ASPxComboBox>

因為是服務端控件，請加上runat="server",需要引用，加上ID。

有了控件，但是還沒有列表項：

2.列表項

列表項對應的是個集合---ASPxComboBox.Items屬性，Items應該不陌生。

集合類型是：ListEditItemCollection

對集合的操作就可以反映到控件上。

通過標簽設置Items如下：

                            <dx:ASPxComboBox runat="server" ID="cboTypeOfServ">
                                <Items>
                                    <dx:ListEditItem Text="Immediately" Value="I" />
                                    <dx:ListEditItem Text="Appointment" Value="A" />
                                </Items>
                            </dx:ASPxComboBox>

這是一種靜態的設置方式，適合性別(男，女）這固定的列表，你也可以通過后台代碼操作Items動態增添你的項目。

控件產生的主要html代碼:

A.)編輯框等部分

<table class="dxeButtonEdit  " cellspacing="1" cellpadding="0" id="cboTypeOfServ" border="0">
    <tbody><tr>
        <td style="display:none;"><input id="cboTypeOfServ_VI" name="cboTypeOfServ_VI" type="hidden"></td><td class="dxic" onmousedown="return aspxDDDropDown('cboTypeOfServ', event)" style="width:100%;padding-left:1px;padding-right:1px;padding-top:1px;padding-bottom:1px;"><input class="dxeEditArea dxeEditAreaSys  " onkeydown="aspxEKeyDown('cboTypeOfServ', event)" name="cboTypeOfServ" id="cboTypeOfServ_I" onblur="aspxELostFocus('cboTypeOfServ')" onfocus="aspxEGotFocus('cboTypeOfServ')" type="text" onchange="aspxETextChanged('cboTypeOfServ')" style="height:15px;cursor:default;" autocomplete="off" readonly=""></td><td id="cboTypeOfServ_B-1" class="dxeButtonEditButton" onmousedown="return aspxDDDropDown('cboTypeOfServ', event)" style="-khtml-user-select:none;"><table class="dxbebt" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;border-collapse:separate;">
            <tbody><tr>
                <td class="dx"><img id="cboTypeOfServ_B-1Img" class="dxEditors_edtDropDown" src="/SAMSWeb/DXR.axd?r=1_5-ybgU4" alt="v"></td>
            </tr>
        </tbody></table></td>
    </tr>
</tbody></table>

B.)下拉框部分

<div id="cboTypeOfServ_DDD_PW-1" style="position: absolute; width: 175px; height: 51px; left: 8px; top: 28px; visibility: visible; z-index: 12000; overflow: visible; ">
    <table id="cboTypeOfServ_DDD_PWST-1" cellspacing="0" cellpadding="0" border="0" style="border-collapse: separate; position: relative; top: 0px; left: 0px; ">
        <tbody><tr>
            <td onmousedown="aspxPWMDown(event,'cboTypeOfServ_DDD',-1,false)" style="cursor: default; width: 168px; height: 0px; "><table id="cboTypeOfServ_DDD_CLW-1" cellspacing="0" cellpadding="0" border="0" style="border-collapse: separate; width: 168px; height: 44px; ">
                <tbody><tr>
                    <td id="cboTypeOfServ_DDD_PWC-1" style="height:100%;"><div id="cboTypeOfServ_DDD_CSD-1">
                        <table class="dxeListBox" cellspacing="0" cellpadding="0" id="cboTypeOfServ_DDD_L" border="0" style="border-collapse: separate; height: 0px; width: 170px; ">
                            <tbody><tr>
                                <td valign="top"><div id="cboTypeOfServ_DDD_L_D" class="dxlbd" style="overflow-x: hidden; height: 42px; padding-right: 0px; overflow-y: auto; width: 168px; ">
                                    <input id="cboTypeOfServ_DDD_L_VI" type="hidden" name="cboTypeOfServ$DDD$L" value=""><table id="cboTypeOfServ_DDD_L_LBT" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;border-collapse:separate;">
                                        <tbody><tr class="dxeListBoxItemRow">
                                            <td class="dxeListBoxItem" style="" id="cboTypeOfServ_DDD_L_LBI0T0">Immediately</td>
                                        </tr><tr class="dxeListBoxItemRow">
                                            <td class="dxeListBoxItem" style="" id="cboTypeOfServ_DDD_L_LBI1T0">Appointment</td>
                                        </tr>
                                    </tbody></table>
                                </div></td>
                            </tr>
                        </tbody></table><script id="dxss_500738610" type="text/javascript">
<!--
aspxAddDisabledItems('cboTypeOfServ_DDD_L',[[['dxeDisabled'],[''],['']]]);

var dxo = new ASPxClientListBox('cboTypeOfServ_DDD_L');
window['cboTypeOfServ_DDD_L'] = dxo;
dxo.uniqueID = 'cboTypeOfServ$DDD$L';
dxo.SelectedIndexChanged.AddHandler(function (s, e) { aspxCBLBSelectedIndexChanged('cboTypeOfServ', e); });
dxo.ItemClick.AddHandler(function (s, e) { aspxCBLBItemMouseUp('cboTypeOfServ', e); });
dxo.RequireStyleDecoration();
dxo.styleDecoration.AddStyle('F','dxeFocused','');
dxo.itemsValue=['I','A'];
dxo.isComboBoxList = true;
dxo.hoverClasses=['dxeListBoxItemHover'];
dxo.selectedClasses=['dxeListBoxItemSelected'];
dxo.disabledClasses=['dxeDisabled'];
dxo.InlineInitialize();

//-->
</script>
                    </div></td>
                </tr>
            </tbody></table></td><td style="background:url('/SAMSWeb/DXR.axd?r=1_25-ybgU4') no-repeat left top;"></td>
        </tr><tr>
            <td style="background:url('/SAMSWeb/DXR.axd?r=1_24-ybgU4') no-repeat left top;"></td><td style="background:url('/SAMSWeb/DXR.axd?r=1_26-ybgU4') no-repeat left top;"><div style="height:5px;width:5px;">

            </div></td>
        </tr>
    </tbody></table>
</div>

還會產生一些資源文件引用的代碼如css,js,圖片資源等，還有生成的隱藏控件用於存儲組合框所需要的信息狀態等以及一些腳本代碼。

可以通過Width屬性設置組合框寬度尺寸，如Width="100",生成的代碼可以看到:

style="width:100px;"

內聯樣式.當然也可以指定高度Height屬性。默認單位px,也可以百分比如Width="100%".

3.可見性

可以使用Visible控制可見性，和ASP.NET內置服務端控件類似，這個可見比較徹底，直接不會輸出到頁面上那些雜七雜八的代碼了，當然了，服務端還是能控制它們地:-)

所有不是無條件的沒有嘿嘿。

這樣不在客戶端輸出，你服務使用客戶端腳本控制它了，因為都沒了，嘎嘎。

如果想要客戶端隱藏的效果，可以使用ClientVisible 屬性，這個是客戶端可見性控制。

你可以查看生成的html代碼里有這個:

display:none;

你可以在客戶端通過客戶端對象的方法ASPxClientControl.SetVisible方法再把它顯示出來，這是后話。

3.當前選擇項

如果想默認選擇第一項，可以設置SelectedIndex屬性，默認是-1就是一個也不選。

<dxe:ASPxComboBox ID="ASPxComboBox1" runat="server" SelectedIndex="0">

當前選擇的項可以通過SelectedItem得到，類型是ListEditItem的。

這也就是Items[SelectedIndex]嘛？

SelectedIndex改變會觸發ASPxComboBox.SelectedIndexChanged 這個服務端事件。

看個例子：

        <dx:ASPxComboBox ID="cboTypeOfServ" runat="server" AutoPostBack="true" OnSelectedIndexChanged="cboTypeOfServ_SelectedIndexChanged">
            <Items>
                <dx:ListEditItem Text="Immediately" Value="I" />
                <dx:ListEditItem Text="Appointment" Value="A" />
            </Items>                    
        </dx:ASPxComboBox>
        <asp:Label runat="server" ID="lblMessage" />

代碼:

    protected void cboTypeOfServ_SelectedIndexChanged(object sender, EventArgs e)
    {
        lblMessage.Text = "你選擇的是:" + cboTypeOfServ.Value;
    }

注意AutoPostBack屬性，

If the AutoPostBack property is set to true, the end-user action is first processed via the corresponding client-side event (if its handler is assigned) and only after that is the server-side processing performed, if it has not been canceled by setting the client-side event's processOnServer property to false. If the value of the AutoPostBack property is false, a specific user action which has a corresponding server-side event can never the less be processed on the server side by setting the processOnServer property to true in the client event's handler. 

如果AutoPostBack設置為true,用戶的操作首先被客戶端的事件處理(如果客戶端時間處理方法設置了的話），然后只有當客戶端時間處理沒有將客戶端事件的processOnServer屬性設為false時才會再發給服務端執行處理。即便AutoPostBack的值為false,那么特定用戶的操作在客戶端事件處理中如果設置了processOnServer為true之后，仍然會被對應的服務端事件處理。

所以對應相應操作的服務器事件在如下兩者情況不會產生：

1.）AutoPostBack設置為false,未處理客戶端事件或者處理了並未改變processOnServer屬性(沒把它設置為true).

2.)AutoPostBack設置為true,處理了對應的客戶端事件並把processOnServer設置為false了。

4.當前選擇項的值Value,文本Text,控制用戶是否可以改變選擇項ReadOnly。

鼠標懸停光標Cursor="pointer"變小手，和css樣式屬性中相似。

AllowMouseWheel是否運行滾輪來改變選擇。

5.顯示圖標

            <Items>
                <dx:ListEditItem Text="大餅圖" Value="Pie" ImageUrl="~/Images/pie.png" />
                <dx:ListEditItem Text="線性圖" Value="Line" ImageUrl="~/Images/line.png" />
            </Items>