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

 　　然后就大功告成了

　　虽然我们这个控件方便了我们的使用但是我们也要了解一下原生没有控件我们应该怎么办 藏器在身，待时而动。