Asp中的DropDownList控制項和原生下拉框的使用比較

首先先思考下如果不使用DropdownList控制項，如何將一個List集合中的數據通過下拉框（select標簽）的形式顯示？

使用下拉框（純select方式）實現分類數據的顯示 

步驟：

處理後端：
①在後端代碼中定義一個公開的userID變數，用於保存url中獲取到的userID

public static int userID ;

②先判斷url中是否存在userID對應的值

if (!string.IsNullOrEmpty(Request.QueryString["userID"]))
                {
                    userID = int.Parse(Request.QueryString["userID"]);
                }

③根據獲取到的userID顯示對應類型的數據（如果url中沒有userID值，預設為1，Dal會做相應處理，為1會返回所有類型數據）

Repeater1.DataSource = BLL_User.getUserByType(userID);
            Repeater1.DataBind();

　　****因為這裡順便練習三成構架所以用到了三層需要也可以進行相應的更改  附上getUserByType() 的連套方法：

//BLL層
public static List<User> getUserByType(int id)
        {
            return DAL_User.getUserByType(id);
        }
//DAL層
public static List<User> getUserByType(int id)
        {
            string sql = $"userType ={id}";
            if (id ==1)
            {
                sql = "";
            }
            List<User> uers = SelectSQL(sql);
            return uers;
        }

public static List<User> SelectSQL(string strWhere)
        {
            string sql = "";
            _users = new List<User>();
            if (strWhere == "")
            {
                sql = "select * from UserInfo where isShow=1";
            }
            else
            {
                sql = $"select * from UserInfo where isShow=1 and " + strWhere;
            }
            DataTable td = new DBHerple().SelectDataTable(sql);
            User user = null;

            foreach (DataRow dataRow in td.Rows)
            {
                user = new User();
                user.userID = int.Parse(dataRow["userID"].ToString());
                user.userName = dataRow["userName"].ToString();
                user.userPwd = dataRow["userPWd"].ToString();
                user.userAddress = dataRow["userAddress"].ToString();
                user.userType = int.Parse(dataRow["userType"].ToString());
                _users.Add(user);//添加到集合中去
            }
            return _users;
        }

處理前端：
①在前端頁面實現select代碼

②使用<% %>結合foreach遍歷將集合中的數據顯示為下拉框形式

<form id="form1" runat="server">
        <div>
            <select id="slct" onchange="SelectType(this)">
                <% foreach (var item in userType)
                    {%>
                <option <%=(userID == item.typeID ? "selected":"") %> value="<% = item.typeID%>"><% = item.typeName%></option>
                <%} %>
            </select>
        </div>
        <table class="layui-table user-table">
            <thead>
                <tr>
                    <th>序號</th>
                    <th>賬戶</th>
                    <th>密碼</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <tr>
                            <td><%# Eval("userID") %></td>
                            <td><%# Eval("userName") %></td>
                            <td><%# Eval("userPWd") %></td>
                            <td><%# Eval("userAddress") %></td>
                            <td>
                                <asp:Button CssClass="layui-btn layui-btn-danger" ID="Button1" runat="server" Text="刪  除" />
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </tbody>
        </table>

    </form>
</body>

③使用onchangge事件實現下拉框中選項改變之後的數據回發（userID的回發）

<script>
        function SelectType(e) {//回發數據到當前頁面的後端
            location.href = "SelectDemo.aspx?userID=" + e.value;
        }
    </script>

④轉到後端獲取userID的值 判斷url中是否存在userID對應的值如果有就獲取userID

 if (!string.IsNullOrEmpty(Request.QueryString["userID"]))
                {
                    userID = int.Parse(Request.QueryString["userID"]);
                }
            }

⑤<%=(userID== item.TypeID ? "selected":"") %> 通過匹配後端的TypeID值固定下拉框之前選中的項（如果這裡不設置會有一個小bug下拉框不會綁定選定的值）

最終效果圖：

但是如果用asp的DropDownList控制項的話就簡單多了

　　①：我們先拖入控制項到前端中去（唯一要註意的一點是拖動控制項到前端的時候一定一定要添加：AutoPostBack="true" 屬性不然你後臺代碼寫的在好都不會回發）

　　②：轉到後臺：

　　為下拉框添加事件 getUserByType（）方法和上面的一樣

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<User> users = BLL_User.getAllUser();
                this.DropDownList1.DataSource = BLL_User.getTypeAll();
                this.DropDownList1.SelectedIndex = 0;//int值
                this.DropDownList1.DataTextField = "TypeName";
                this.DropDownList1.DataValueField = "TypeID";
                this.DropDownList1.DataBind();
            }
            Repeater1.DataSource = BLL_User.getAllUser();
            Repeater1.DataBind();
        }
        /// <summary>
        /// 下拉框選項改變後觸發信息變動
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            int id = int.Parse(this.DropDownList1.SelectedValue);
            Repeater1.DataSource = BLL_User.getUserByType(id);
            Repeater1.DataBind();
        }

 　　然後就大功告成了

　　雖然我們這個控制項方便了我們的使用但是我們也要瞭解一下原生沒有控制項我們應該怎麼辦 藏器在身，待時而動。