首先先思考下如果不使用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=https://www.cnblogs.com/thyandscc/p/"<% = 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 = https://www.cnblogs.com/thyandscc/p/"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(); }
然后就大功告成了
雖然我們這個控制元件方便了我們的使用但是我們也要了解一下原生沒有控制元件我們應該怎么辦 藏器在身，待時而動，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/13.html
標籤：ASP.NET
上一篇：WebApi-控制器路由