Asp.Net 使用UpdatePanel实现DropDownList的联动和局部更新

功能实现：
【商品分类】（DropDownList_MechndsType）下拉列表的选中值更改时，【商品名称】（DropDownList_MerchndsName）下拉列表的备选数据更新为所选商品分类下的商品。

代码示例：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Label ID="Label_MerchndsType" runat="server" Text="商品类型"></asp:Label>

<asp:DropDownList ID="DropDownList_MerchndsType" runat="server" DataSourceID="SqlDataSource1" DataTextField="MERCHNDS_TYPE_NAME" DataValueField="MERCHNDS_TYPE_ID" AppendDataBoundItems =" true"  AutoPostBack ="true" >
  <asp:ListItem Selected="True" Text="请选择" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MMCS_DBConnectionString %>" SelectCommand="SELECT [MERCHNDS_TYPE_NAME], [MERCHNDS_TYPE_ID] FROM [TblMerchndsTypeMaster]"></asp:SqlDataSource>
<br/>
<br/>
<hr style="height:1px;border:none;border-top:1px solid #555555;" />
<asp:Label ID="Label_MerchndsName" runat="server" Text="商品名称"></asp:Label>
<br/>
<asp:UpdatePanel ID ="UpdatePanel1" runat ="server">
  <ContentTemplate>
    <asp:DropDownList ID="DropDownList_MerchndsName" runat="server" DataSourceID="SqlDataSource4" DataTextField="MERCHNDS_NAME" DataValueField="MERCHNDS_ID">
    </asp:DropDownList>
    <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:MMCS_DBConnectionString %>" SelectCommand="SELECT [MERCHNDS_NAME], [MERCHNDS_ID] FROM [TblMerchndsInfo] WHERE ([MERCHNDS_TYPE_ID] LIKE '%' + @MERCHNDS_TYPE_ID + '%')">
      <SelectParameters>
        <asp:ControlParameter ControlID="DropDownList_MerchndsType" DefaultValue="%" Name="MERCHNDS_TYPE_ID" PropertyName="SelectedValue" Type="String" />
     </SelectParameters>
     </asp:SqlDataSource>
  </ContentTemplate>
  <Triggers>
     <asp:AsyncPostBackTrigger ControlID ="DropDownList_MerchndsType" EventName ="SelectedIndexChanged" />
  </Triggers>
  </asp:UpdatePanel>

实现方式：
DropDownList_MerchndsType的选中值作为DropDownList_MerchndsName的数据源(SQL)的WHERE条件。DropDownList_MerchndsType的SelectedIndexChanged事件触发时，更新DropDownList_MerchndsName。
※如果不使用UpdatePanel控件，只将DropDownList_MerchndsType的AutoPostBack属性设定为True，也可以使DropDownList_MerchndsTyped的SelectedIndexChanged事件被触发时，主动更新整个页面来让联动的DropDownList_MerchndsName下拉列表数据更新。

控件UpdatePanel：
此控件可以实现ASP.NET页面的局部数据更新。它是隶属于ASP.NET AJAX Extensions中的服务器控件。
※使用UpdatePanel控件时必须添加ScriptManager控件。因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。一个页面中只能添加一个ScriptManager控件。

<asp:UpdatePanel ID = "UpdatePanel1" runat ="server">
  <ContentTemplate>
    <% UpdatePanel所控制的局部更新区域 %>
  <ContentTemplate>
</asp:UpdatePanel>
<Triggers>
  <asp:AsyncPostBackTrigger ControlID = "控件的ID" EventName ="触发事件的名称">
<Triggers>

※当使用DropDownList的SelectedIndexChanged事件作为触发事件的时候，需要将该DropDownList的AutoPostBack属性设置为True。

Asp.Net 使用UpdatePanel实现DropDownList的联动和局部更新

推荐阅读更多精彩内容