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();
        }

 　　而後就大功告成了

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