一个页面实现多个管理页面任意切换

在做项目的时候，我们有时候会遇到一种需求，一个页面有两种数据源，也就对应着两个列表页。但是你不想新建两个页面：

• 一、是因为新建页面多了本来就麻烦；

• 二、是页面之间跳转感觉太明显，用户体验不是很好；

因此我倾向于使用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;
            }
        }