Comparison of DropDownList control and native dropdown in Asp

Keywords: ASP.NET SQL Attribute

First of all, think about how to display the data in a List collection in the form of a drop-down box (select tag) without using the DropdownList control?

Use drop-down box (pure select) to display classification data

Steps:

Processing backend:
① Define a public userID variable in the back-end code to save the userID obtained in the url

public static int userID ;

② First, judge whether the value corresponding to userID exists in the url

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

③ Display the data of the corresponding type according to the obtained userID (if there is no userID value in the url, the default is 1, and Dal will do the corresponding processing and return all types of data for 1)

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

* * * * because we practice 30% architecture by the way here, we need to use three layers and can also make corresponding changes. Attach the getUserByType() connection method:

//BLL layer
public static List<User> getUserByType(int id)
        {
            return DAL_User.getUserByType(id);
        }
//DAL layer
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);//Add to collection
            }
            return _users;
        }

Processing front end:
① Implement select code in front page

② Use <%% > with foreach traversal to display the data in the collection as a drop-down box

<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>Serial number</th>
                    <th>account</th>
                    <th>Password</th>
                    <th>address</th>
                    <th>operation</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="Delete" />
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </tbody>
        </table>

    </form>
</body>

③ Use onchange event to implement data postback after options change in the drop-down box (postback of userID)

<script>
        function SelectType(e) {//Send back data to the back end of the current page
            location.href = "SelectDemo.aspx?userID=" + e.value;
        }
    </script>

④ Go to the backend to get the value of userID. Judge whether there is a value corresponding to userID in the url. If there is, get the userID

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

⑤ [% = (userid = = item. TypeID? "Selected": "")% > fix the previously selected item of the drop-down box by matching the typeID value of the backend (if not set here, there will be a small bug drop-down box that will not bind the selected value)

 

Final rendering:

 

But it's much easier to use the DropDownList control of asp

①: we first drag the control into the front end (the only thing we should pay attention to is that when dragging the control to the front end, we must add: AutoPostBack="true" attribute, otherwise your background code will not send back if it is well written)

②: go to the background:

Add the event getUserByType () method to the drop-down box as above

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 value
                this.DropDownList1.DataTextField = "TypeName";
                this.DropDownList1.DataValueField = "TypeID";
                this.DropDownList1.DataBind();
            }
            Repeater1.DataSource = BLL_User.getAllUser();
            Repeater1.DataBind();
        }
        /// <summary>
        /// Trigger information change after the drop-down box option changes
        /// </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();
        }

And then it's done

Although our control is convenient for us to use, we also need to know how to hide the device when there is no control in the native.

Posted by justinh on Mon, 09 Mar 2020 04:07:40 -0700