三层实现级联（如改变省份，城市自动更新）

最新推荐文章于 2021-06-23 16:07:48 发布

转载最新推荐文章于 2021-06-23 16:07:48 发布 · 270 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/8824/blog/1843733

文章标签：

#ui #xhtml #c#

本文介绍了一个使用ASP.NET实现的省份与城市联动选择框的例子。通过DropDownList控件及后台逻辑，实现了根据省份的选择动态更新对应城市的过程。此外，还展示了如何利用UpdatePanel和AsyncPostBackTrigger组件来实现页面局部刷新，提升用户体验。

为什么80%的码农都做不了架构师？>>>

注意：（1）设置DropDownList控件的两个属性（AutoPostBack值设为true、事件属性的SelectIndexChanged）

（2）点击事件后的页面刷新，if(!IsPostBack) 判断页面是否第一次加载

ProvinceList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProvinceList.aspx.cs" Inherits="PrUI.ProvinceList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:400px;height:400px">
            省份：<asp:DropDownList ID="DropDownList1" runat="server" 
                AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
            </asp:DropDownList>
            <br />
            城市:<asp:DropDownList ID="DropDownList2" runat="server" 
                AutoPostBack="True">
            </asp:DropDownList>
        </table>
    </div>
    </form>
</body>
</html>

ProvinceList.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace PrUI
{
    public partial class ProvinceList : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack){
            BindProvince();
            }
        }
        PrBLL.PrBll MyPrBll = new PrBLL.PrBll();

        /// <summary>
        /// 绑定城市的下拉列表
        /// </summary>
        public void BindProvince() {

            List<PrModel.PrModel> MyPrModelList = new List<PrModel.PrModel>();
            MyPrModelList = MyPrBll.GetProvince();
            DropDownList1.DataTextField = "Province";
            DropDownList1.DataValueField = "id";
            DropDownList1.DataSource = MyPrModelList;
            DropDownList1.DataBind();

            this.DropDownList1.Items.Insert(0,new ListItem("请选择省份",""));
            this.DropDownList1.SelectedIndex = 0;


        }
        /// <summary>
        /// 根据省份的id绑定城市的下拉列表
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList2.Items.Clear();
            List<PrModel.MyCity> MyCityModelList = new List<PrModel.MyCity>();
            MyCityModelList = MyPrBll.GetCityByPrId( DropDownList1.SelectedValue);
            DropDownList2.DataTextField = "City";
            DropDownList2.DataValueField = "id";
            DropDownList2.DataSource = MyCityModelList;
            DropDownList2.DataBind();

            this.DropDownList2.Items.Insert(0, new ListItem("请选择城市", ""));
            this.DropDownList2.SelectedIndex = 0;
        }

      
    }
}

另有DAL层及BLL层的两个查询方法。

使用AJAX实现异步刷新（页面内容局部刷新）

改动后的ProvinceList.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProvinceList.aspx.cs" Inherits="PrUI.ProvinceList" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <table style="width:400px;height:400px">
            省份：<asp:DropDownList ID="DropDownList1" runat="server" 
                     AutoPostBack="True" onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                    </asp:DropDownList>
            <br />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                     城市:<asp:DropDownList ID="DropDownList2" runat="server" 
                                AutoPostBack="True">
                          </asp:DropDownList>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
                    </Triggers>
            </asp:UpdatePanel>
        </table>
    </div>
    </form>
</body>
</html>

全页面刷新时间：

ShuaxinTime.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShuaxinTime.aspx.cs" Inherits="PrUI.ShuaxinTime" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                        <asp:Timer ID="Timer1" runat="server" Interval="1000">
                        </asp:Timer>
                    </ContentTemplate>
        
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

ShuaxinTime.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace PrUI
{
    public partial class ShuaxinTime : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        }
    }
}

ShuaxinTime.aspx.design.cs

//------------------------------------------------------------------------------
// <自动生成>
//     此代码由工具生成。
//
//     对此文件的更改可能会导致不正确的行为，并且如果
//     重新生成代码，这些更改将会丢失。 
// </自动生成>
//------------------------------------------------------------------------------

namespace PrUI {
    
    
    public partial class ShuaxinTime {
        
        /// <summary>
        /// form1 控件。
        /// </summary>
        /// <remarks>
        /// 自动生成的字段。
        /// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlForm form1;
        
        /// <summary>
        /// ScriptManager1 控件。
        /// </summary>
        /// <remarks>
        /// 自动生成的字段。
        /// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
        /// </remarks>
        protected global::System.Web.UI.ScriptManager ScriptManager1;
        
        /// <summary>
        /// UpdatePanel1 控件。
        /// </summary>
        /// <remarks>
        /// 自动生成的字段。
        /// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
        /// </remarks>
        protected global::System.Web.UI.UpdatePanel UpdatePanel1;
        
        /// <summary>
        /// Label1 控件。
        /// </summary>
        /// <remarks>
        /// 自动生成的字段。
        /// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
        /// </remarks>
        protected global::System.Web.UI.WebControls.Label Label1;
        
        /// <summary>
        /// Timer1 控件。
        /// </summary>
        /// <remarks>
        /// 自动生成的字段。
        /// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
        /// </remarks>
        protected global::System.Web.UI.Timer Timer1;
    }
}

转载于:https://my.oschina.net/8824/blog/1843733