在做專案的時候，我們有時候會遇到一種需求，一個頁面有兩種資料來源，也就對應著兩個列表頁。但是你不想新建兩個頁面：

• 一、是因為新建頁面多了本來就麻煩；

• 二、是頁面之間跳轉感覺太明顯，使用者體驗不是很好；

因此我傾向於使用DropDownList 進行切換

優點：

• 1、減少頁面的數量；

• 2、提高使用者體驗；結合UpdatePanel和ContentTemplate控制元件的使用；

前臺程式碼：

      <li><span>資料型別：</span><span>
                            <asp:DropDownList
 
 runat="server" ID="DataType" AutoPostBack="true" OnSelectedIndexChanged="DataType_SelectedIndexChanged">
                                <asp:ListItem Value="1">病蟲防治</asp:ListItem>
                                <asp:ListItem Value="2">植物檢疫</asp:ListItem>
                            </asp:DropDownList
 
>
                        </span></li>
                 <!--table1 begin-->
            <div class="tableHead" id="tdhead1" runat="server">
            </div>
             <div class="listBox" id="tdlist1" runat="server"></div>
             <!--table1 end-->
 

             <!--table2 begin-->
            <div class="tableHead" id="tdhead2" runat="server">
            </div>
             <div class="listBox" id="tdlist2" runat="server"></div>
             <!--table2 end-->

後臺程式碼：

• 第一次載入的時候執行這個方法來控制顯示

private void iniData()
        {
            if (DataType.SelectedIndex == 0)
            {
                tdhead1.Visible = true;//tdhead1顯示(visiable可以顯示的)
                tdlist1.Visible = true;//tdhead1顯示
                tdhead2.Visible = false;//tdhead2隱藏
                tdlist2.Visible = false;//tdlist2隱藏
            }
            else
            {
                tdhead1.Visible = false;
                tdlist1.Visible = false;
                tdhead2.Visible = true;
                tdlist2.Visible = true;
            }
        }`

點選切換的時候程式碼

 protected void DataType_SelectedIndexChanged(object sender, EventArgs e)
        {
            //載入資料
            bindData();
            //獲取引數
            queryParams = getQueryparams();            
            if (DataType.SelectedIndex == 0)
            {
                tdhead1.Visible = true;
                tdlist1.Visible = true;
                tdhead2.Visible = false;
                tdlist2.Visible = false;
            }
            else
            {
                tdhead1.Visible = false;
                tdlist1.Visible = false;
                tdhead2.Visible = true;
                tdlist2.Visible = true;
            }
        }