在很多实际开发的场景中,我们都需要对某个列表进行筛选、过滤操作,比如根据不同的分类选择不同的商品等。在此时,我们就可以使用 Asp.net 中的 DropDownList 控件以及它的 SelectedIndexChanged 事件来实现动态筛选功能。
一、 DropDownList 控件简介
DropDownList 控件是 Asp.net 中常用的一个下拉列表控件,它可以用来展示一些选项,用户可以通过选择其中的一项来完成相应的操作。比如下图所示的“商品分类”下拉列表:
使用 DropDownList 控件有两种方式,一种是在设计时通过工具栏拖拽来实现,另一种是通过代码动态地创建 DropDownList 控件。
二、 SelectedIndexChanged 事件简介
在 DropDownList 控件中,当用户选择了一项之后,会触发一个事件——SelectedIndexChanged。这个事件是在服务器端被触发的,也就是说它需要在前台页面跟服务器进行交互才能完成。而在触发 SelectedIndexChanged 事件时所执行的代码逻辑,其实就是在筛选列表中的子项。
三、 代码示例
接下来,我们将通过一个实例来演示如何通过 SelectedIndexChanged 事件实现列表的动态筛选功能。假设我们现在需要展示一个简单的员工列表,因为员工有不同的部门,我们需要在列表的上方加入一个下拉列表,以便用户能够根据部门对员工进行筛选。
首先,我们需要创建一个数据表 Employee,其中包含姓名、工号、性别等员工信息:
CREATE TABLE [dbo].[Employee] (
[Id] INT NOT NULL,
[Name] VARCHAR (50) NOT NULL,
[Sex] VARCHAR (10) NOT NULL,
[Age] INT NOT NULL,
[DeptName] VARCHAR (50) NOT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
然后,我们需要在 Asp.net 中创建一个新的 Web Form 页面,然后在页面上添加一个 GridView 控件,一个 Label 控件以及一个 DropDownList 控件,如下图所示:
在这个示例中,我们通过代码动态地创建了一个 DropDownList 控件,然后添加到了 Web Form 页面上。同时,在 SelectedIndexChanged 事件中我们将筛选操作写入了一个方法中,以便在列表中动态地筛选出与选择的部门相对应的员工信息。
下面是一段完整的代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataSet ds = LoadData();
this.GridView1.DataSource = ds.Tables[0];
this.GridView1.DataBind();
//前端代码直接初始化
DataSet dsDept = LoadDept();
this.DropDownList1.DataSource = dsDept.Tables[0];
this.DropDownList1.DataTextField = "DeptName";
this.DropDownList1.DataValueField = "DeptName";
this.DropDownList1.DataBind();
}
}
private DataSet LoadData()
{
string connString = @"";
using (SqlConnection conn = new SqlConnection(connString))
{
conn.Open();
string sql = "SELECT * FROM Employee";
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Employee");
return ds;
}
}
}
private DataSet LoadDataByDept(string deptName)
{
string connString = @"";
using (SqlConnection conn = new SqlConnection(connString))
{
conn.Open();
string sql = "SELECT * FROM Employee WHERE DeptName=@deptName";
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
cmd.Parameters.AddWithValue("@deptName", deptName);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Employee");
return ds;
}
}
}
private DataSet LoadDept()
{
string connString = @"";
using (SqlConnection conn = new SqlConnection(connString))
{
conn.Open();
string sql = "SELECT DISTINCT DeptName FROM Employee";
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Dept");
return ds;
}
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
string deptName = this.DropDownList1.SelectedValue;
if (deptName != "")
{
DataSet ds = LoadDataByDept(deptName);
this.GridView1.DataSource = ds.Tables[0];
this.GridView1.DataBind();
this.Label1.Text = "当前部门:" + deptName;
}
else
{
DataSet ds = LoadData();
this.GridView1.DataSource = ds.Tables[0];
this.GridView1.DataBind();
this.Label1.Text = "当前部门:全部";
}
}
在这个示例中,我们首先在 Page_Load 事件中通过 LoadData() 方法获取到员工信息的 DataSet,并将其绑定到 GridView 控件上。然后,在 SelectedIndexChanged 事件中,我们获取到用户选择的部门名称,并通过 LoadDataByDept() 方法来动态地获取到相应部门的员工信息,并重新绑定到 GridView 控件上。
需要注意的是,当用户选择了“全部”时,我们需要通过 LoadData() 来获取所有员工的信息,并重新绑定到 GridView 控件上。
四、 总结
在 Asp.net 中,通过 DropDownList 控件以及 SelectedIndexChanged 事件,我们可以非常方便地实现对特定列表进行动态筛选的功能。在实际开发中,我们可以通过这种方式非常方便地为用户提供一种灵活的数据查看方式,从而可以提升系统的易用性和用户体验。