[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>