ASP.NET DEMOⅠ:联动下来框(DropDownList)

2007-05-29 03:17 晓风残月阅读(2020) 评论(1) 收藏举报

开篇废话～

也算序
下了个大胆的决定：整理出一系列 ASP.NET 实践相关的示例，来源大部分都是网络收集，然而都是自己实践总结。

约定：
1.环境：ASP.NET 2.0。尽量提供 1.x 的相关信息
2.编码方式：内联代码。优势是，简洁，方便测试，只需要一张 .aspx 页面
3.＋

那就开始吧～

DEMOⅠ:联动下来框(DropDownList)

提示：服务端版本，虽然当前AJAX盛行，然而，凡事都需要一个过程，对于ASP.NET初学者，有助于加深对DropDownList（下文缩写为DRP）的理解。如果，您需要无刷新版本，不想浪费您宝贵时间，请跳过:->

目的：实现四联动，分别展示三种如何给DRP添加数据源的方法，外加说明为什么你的DRP就是不会保持选择状态（应该在 IsPostBack 内绑定数据）：

1. 页面声名式: drpCountry

2. 代码绑定式: drpProvince, drpCity

3. 代码添加式: drpDistrict

技巧：

1.一般页面初始化过程的绑定数据，最好放在 IsPostBack 内，这样页面回发（PostBack）的时候就不会再执行一次

void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        // Load default Provinces and Cities.
        LoadProvinceData();
        LoadCityData();
        LoadDistrictData();
    }
}

2.实现自动联动的关键是要让DRP选择项改变的时候，自动回发页面，设置其 AutoPostBack="true" ，然后实现SelectedIndexChanged 事件的处理程序

   1: City:<asp:DropDownList ID="drpCity" DataTextField="CityName" DataValueField="CityId" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">        
   2: </asp:DropDownList>

3. 对于 ASP.NET 2.0，DRP 新增一个属性 AppendDataBoundItems，该属性接受一个bool值，指示是否在绑定前清楚已有的Items。默认值为false，即先清除。

   1: Province:<asp:DropDownList ID="drpProvince" AppendDataBoundItems="true" DataTextField="ProvinceName" DataValueField="ProvinceId" AutoPostBack="true" OnSelectedIndexChanged="drpProvince_SelectedIndexChanged" runat="server">        
   2:     </asp:DropDownList>

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
    void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack) {
            // Load default Provinces and Cities.
            LoadProvinceData();
            LoadCityData();
            LoadDistrictData();
        }
    }
 
    #region event handler(s)
 
    void drpCountry_SelectedIndexChanged(object sender, EventArgs e)
    {
        LoadProvinceData();
        LoadCityData();
        LoadDistrictData();
    }   
    
    void drpProvince_SelectedIndexChanged(object sender, EventArgs e)
    {
        LoadCityData();
        LoadDistrictData();
    }
 
    void drpCity_SelectedIndexChanged(object sender, EventArgs e)
    {
        LoadDistrictData();
    }
 
    #endregion
    
    #region private helpers
 
    void LoadProvinceData()
    {
        DataTable dtProvince = new DataTable();// null;
        
        // In this demo, we just provider provinces for Chinese
        if (drpCountry.SelectedValue.ToLower() == "cn") {
            // In your case, maybe you like to populate the Province data 
            // from the back-end datastore such as database.        
            dtProvince = CreateProvinceTable();
        }
        
        drpProvince.DataSource = dtProvince;
        drpProvince.DataBind();
    }
 
    void LoadCityData()
    {
        // In your case, maybe you perform the search in your database
        // by ADO.NET with inner-sql or stored procedure.
        DataTable dtCity = CreateCityTable();
        DataView dvCity = dtCity.DefaultView;
        // Providers a dummy ProvincId when there are none of provinces to select.
        string selectedProvinceId = (drpProvince.SelectedValue.Length != 0) ? drpProvince.SelectedValue : "-1";
        dvCity.RowFilter = "ProvinceID=" + selectedProvinceId;
        
        drpCity.DataSource = dvCity;
        drpCity.DataBind();
    }
 
    void LoadDistrictData()
    {        
        // Clears the items
        drpDistrict.Items.Clear();
        
        // In this demo, we just only provider districts for Chongqing city.
        if (drpCity.SelectedValue != "5") return;
        
        //
        ListItem item = null;        
        
        //
        item = new ListItem("Shapingba", "1");
        drpDistrict.Items.Add(item);
        //
        item = new ListItem();
        item.Text = "Yuzhongqu";
        item.Value = "2";
        item.Selected = true;
        drpDistrict.Items.Add(item);
        //
        drpDistrict.Items.Add(new ListItem("Jiangbei", "3"));
    }
 
    #endregion
 
    #region Creates Sample Data below.
 
    DataTable CreateProvinceTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ProvinceID", typeof(int));
        dt.Columns.Add("ProvinceName", typeof(string));
 
        DataRow row = dt.NewRow();
        row.ItemArray = new object[] {1, "Jiangsu"};
        dt.Rows.Add(row);
 
        row = dt.NewRow();
        row["ProvinceID"] = 2;
        row["ProvinceName"] = "Fujian";
        dt.Rows.Add(row);
        
        row = dt.NewRow();
        row[0] = 3;
        row[1] = "Chongqing";
        dt.Rows.Add(row);
 
        return dt;        
    }
 
    DataTable CreateCityTable()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("CityID", typeof(int));
        dt.Columns.Add("CityName", typeof(string));
        dt.Columns.Add("ProvinceID", typeof(int));
 
        DataRow row = dt.NewRow();
        row.ItemArray = new object[]{1, "Nanjiang", 1};
        dt.Rows.Add(row);
 
        row = dt.NewRow();
        row.ItemArray = new object[]{2, "Nanchong", 1};
        dt.Rows.Add(row);
 
        row = dt.NewRow();
        row.ItemArray = new object[] { 3, "Fuzhou", 2 };
        dt.Rows.Add(row);
 
        row = dt.NewRow();
        row.ItemArray = new object[] { 4, "Quanzhou", 2 };
        dt.Rows.Add(row);
        
        row = dt.NewRow();
        row.ItemArray = new object[] { 5, "Chongqing", 3};
        dt.Rows.Add(row);
 
        return dt;
    }
 
    #endregion
    
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ASP.NET Demo 1:DropDownList</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Country:<asp:DropDownList ID="drpCountry" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCountry_SelectedIndexChanged">
        <asp:ListItem Value="cn">Chinese</asp:ListItem>        
        <asp:ListItem Value="uk">U.K</asp:ListItem>
        <asp:ListItem Value="us">U.S.A</asp:ListItem>
    </asp:DropDownList>
    Province:<asp:DropDownList ID="drpProvince" DataTextField="ProvinceName" DataValueField="ProvinceId" AutoPostBack="true" OnSelectedIndexChanged="drpProvince_SelectedIndexChanged" runat="server">        
    </asp:DropDownList>
    City:<asp:DropDownList ID="drpCity" DataTextField="CityName" DataValueField="CityId" runat="server" AutoPostBack="true" OnSelectedIndexChanged="drpCity_SelectedIndexChanged">        
    </asp:DropDownList>
    District:<asp:DropDownList ID="drpDistrict" runat="server"></asp:DropDownList>
    </div>
    </form>
</body>
</html>

源码：dowload

刷新页面返回顶部

晓风专注于.NET技术