一个下拉列表控件无刷新的控制另外一个下拉列表控件（利用Coolite.Ext控件）

首先说明一下，本例子实现的是控制一个WEBGIS系统地图的资源与图层的选择控制。效果如下图：

 

 

1、加入两个ComboBox控件，并设置他们的监听事件，其中Layer_ComboBox中的StoreID是指存放它数据的容器-Store控件的ID,如下所示：

<ext:ComboBox ID="Res_ComboBox" runat="server" Editable="false" TypeAhead="true" TriggerAction="All" SelectOnFocus="true" Mode="Local" ForceSelection="true" Width="150">

  <Listeners> <SelectHandler="Coolite.AjaxMethods.Resource_SelectedIndexChanged();"  />

</Listeners>                                                     </ext:ComboBox>

<ext:ComboBox ID="Layer_ComboBox" runat="server" DisplayField="Text" ValueField="Value" Editable="false" TypeAhead="true" TriggerAction="All" SelectOnFocus="true" Mode="Local" ForceSelection="true" StoreID="LayersStore" Width="150" >

    <Listeners>

       <Select Handler="Coolite.AjaxMethods.Layer_changed();" />

  </Listeners>

</ext:ComboBox>

2、加入一个Store控件，用来存放Layer_ComboBox的数据，同样设置监听事件。

<ext:Store runat="server" ID="LayersStore" >

  <Reader>

     <ext:JsonReader ReaderID="Id">

            <Fields>

               <ext:RecordField Name="Value" Type="String" />

               <ext:RecordField Name="Text" Type="String" />

           </Fields>

       </ext:JsonReader>

 </Reader>

   <Listeners>

<Load Handler="#{Layer_ComboBox}.setValue(#{Layer_ComboBox}

.store.getAt(0).get('Value'));" />                                                            </Listeners>

</ext:Store>

 

3、 再转到后台，首先是资源列表初始化和图层列表默认值初始化，如下：

  

    protected void initMapResource()

    {

        string str = String.Empty;

       foreach (ESRI.ArcGIS.ADF.Web.UI.WebControls.MapResourceItem mapResourceItem in MapResourceManager1.ResourceItems)

       {

         if (mapResourceItem.Resource.Name != "影像图" && mapResourceItem.Resource.Name !="TempEle")

          {

            this.Res_ComboBox.Items.Add(new Coolite.Ext.Web.ListItem(mapResourceItem.Resource.Name,mapResourceItem.Resource.Name));

            if (str == String.Empty)

                str = mapResourceItem.Resource.Name;

         }

       }

       this.Res_ComboBox.SelectedItem.Value = str;

     Session["ResName"] = str;//此语句再次可屏蔽是用作矩形选择查询用的

        Resource_Changed(str);  

}

 

4、然后是获得一个资源的所有图层的实现。如下

    /// <param name="resourceName">资源名</param>

    private string[] GetQueryableLayerNames(string resourceName)

    {

              ESRI.ArcGIS.ADF.Web.DataSources.IMapFunctionality commonMapFunctionality =Map1.GetFunctionality(resourceName);

        ESRI.ArcGIS.ADF.Web.DataSources.IGISResource gisResource = commonMapFunctionality.Resource;

             ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality commonQueryFunctionality =(ESRI.ArcGIS.ADF.Web.DataSources.

IQueryFunctionality)gisResource.CreateFunctionality(Typeof

(ESRI.ArcGIS.ADF.Web.DataSources.IQueryFunctionality), null);

        // Get the resource's queryable layers

        string[] layerIDs = null;

        string[] layerNames = null;

        commonQueryFunctionality.GetQueryableLayers(null, out layerIDs, out layerNames);

        return layerNames;

}

 

5、最后是两个ComboBox控件的选择项变化的处理（其中在此只需要Res_ComboBox的选择项变化处理就行了，Layer_ComboBox的选择项变化的处理用于矩形选择查询）

// 资源列表选择值变化处理

    public void Resource_Changed(string resourceName)

    {

        this.Layer_ComboBox.Items.Clear();

        string[] layerNames = GetQueryableLayerNames(resourceName);

 

        DataTable dt = new DataTable();

        DataColumn value = new DataColumn("Value");

        dt.Columns.Add(value);

        DataColumn text = new DataColumn("Text");

        dt.Columns.Add(text);

 

        for (int i = 0; i < layerNames.Length; i++)

        {

            DataRow row = dt.NewRow();

            row["Value"] = layerNames[i];

            row["Text"] = layerNames[i];

            dt.Rows.Add(row);

 

        }

        Session["LayerName"] = dt.Rows[0][0].ToString();       

      this.LayersStore.DataSource = dt;

        this.LayersStore.DataBind();

         //将datatable绑定到store控件

    }

 

   [AjaxMethod]

    public void Resource_SelectedIndexChanged()

    {

        if (this.Res_ComboBox.SelectedItem.Value != String.Empty)

        {

            Resource_Changed(this.Res_ComboBox.SelectedItem.Value);

            Session["ResName"] = this.Res_ComboBox.SelectedItem.Value;

           

        }      

    }

 

   [AjaxMethod]

   public void Layer_changed()

   {

       if (this.Layer_ComboBox.SelectedItem.Value != String.Empty)

       {

       Session["LayerName"] = this.Layer_ComboBox.SelectedItem.Value;

       }

 }

6、好了，就是这些了，自己运行下看下最后的效果吧。