一个下拉列表控件无刷新的控制另外一个下拉列表控件(利用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、好了,就是这些了,自己运行下看下最后的效果吧。