沃梦达 / 编程技术 / 前端开发 / 正文

灵活掌握asp.net中gridview控件的多种使用方法（上）

前端开发
2023-12-03

关于“灵活掌握asp.net中gridview控件的多种使用方法（上）”，我将从以下几个方面进行详细讲解：

关于“灵活掌握asp.net中gridview控件的多种使用方法（上）”，我将从以下几个方面进行详细讲解：

  1. GridView控件的基本使用
  2. 翻页、排序和筛选功能的实现
  3. 多表联合查询结果展示
  4. 多数据源联合查询结果展示

下面我们分别来详细讲解。

1. GridView控件的基本使用

GridView控件是ASP.NET中最常用的数据展示控件之一。其基本用法如下：

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

可以看到，GridView控件的使用方法十分简单和直接。不过，要让GridView控件工作，还需要添加数据源和字段。

我们可以通过在后台代码文件（.aspx.cs）中的Page_Load方法中向GridView控件添加数据源，然后就可以将数据绑定到GridView控件上。

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        GridView1.DataSource = GetData(); //GetData()方法用于返回数据源，在此不赘述
        GridView1.DataBind();
    }
}

注意，在Page_Load方法中，我们加入了一个IsPostBack判断，这是为了避免每次刷新页面都重新绑定数据源。

2. 翻页、排序和筛选功能的实现

对于一个友好的数据展示网页，翻页、排序和筛选功能是不可或缺的部分。这里我们将详细讲解如何在GridView控件中实现这些功能。

翻页

GridView控件的翻页功能可以通过以下代码实现：

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" PageSize="10" OnPageIndexChanging="GridView1_PageIndexChanging">
</asp:GridView>

其中，AllowPaging属性指定了翻页功能开启，PageSize属性指定了每页显示数据的条数。此外，我们还向GridView控件中添加了一个PageIndexChanging事件，在此事件中将实现翻页的具体逻辑。

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    GridView1.DataSource = GetData();
    GridView1.DataBind();
}

可以看到，在GridView1_PageIndexChanging事件中，我们将GridView控件的PageIndex属性赋值为e.NewPageIndex，e.NewPageIndex代表了点击的新页面索引。然后重新绑定数据源和刷新GridView1即可实现翻页功能。

排序

GridView控件的排序功能可以通过以下代码实现：

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" OnSorting="GridView1_Sorting">
</asp:GridView>

其中，AllowSorting属性指定了排序功能开启。我们还向GridView控件中添加了一个Sorting事件，在此事件中将实现排序的具体逻辑。

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
    DataTable dataTable = GetData();
    if(dataTable != null)
    {
        DataView dataView = new DataView(dataTable);
        dataView.Sort = e.SortExpression + " " + GetSortDirection(e.SortExpression);
        GridView1.DataSource = dataView;
        GridView1.DataBind();
    }
}

private string GetSortDirection(string column)
{
    string direction = "ASC";
    string currentColumn = ViewState["SortColumn"] as string;
    if(currentColumn != null)
    {
        if(currentColumn == column)
        {
            string currentDirection = ViewState["SortDirection"] as string;
            if(currentDirection != null && currentDirection == "ASC")
            {
                direction = "DESC";
            }
        }
    }
    ViewState["SortColumn"] = column;
    ViewState["SortDirection"] = direction;
    return direction;
}

可以看到，在GridView1_Sorting事件中，我们首先获取数据源，然后将数据源转化为DataView类型，并将其Sort属性设置为e.SortExpression（SortExpression就是当前页面被点击的表头字段），最后重新绑定数据源和刷新GridView1即可实现排序功能。

注意，由于GridView控件使用了ViewState来储存当前的排序状态，我们需要在代码中手动修改ViewState的值，这样页面才能正确地显示排序状态。

筛选

GridView控件的筛选功能可以通过以下代码实现：

<asp:GridView ID="GridView1" runat="server" AllowFilteringByColumn="True" OnRowDataBound="GridView1_RowDataBound">
</asp:GridView>

其中，AllowFilteringByColumn属性指定了筛选功能开启。我们还向GridView控件中添加了一个RowDataBound事件，在此事件中将实现筛选的具体逻辑。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if(e.Row.RowType == DataControlRowType.Header)
    {
        for(int i = 0; i < e.Row.Cells.Count; i++)
        {
            string column = GridView1.Columns[i].HeaderText;
            if(!string.IsNullOrEmpty(column))
            {
                DropDownList dropDownList = new DropDownList();
                dropDownList.Items.Add(new ListItem("All", string.Empty));
                dropDownList.AppendDataBoundItems = true;
                dropDownList.AutoPostBack = true;
                dropDownList.SelectedIndexChanged += new EventHandler(dropDownList_SelectedIndexChanged);
                dropDownList.Attributes.Add("runat", "server");

                foreach(DataRowView row in GetData().DefaultView)
                {
                    string currentValue = row[column] as string;
                    if(!string.IsNullOrEmpty(currentValue) && !dropDownList.Items.Contains(new ListItem(currentValue)))
                    {
                        dropDownList.Items.Add(new ListItem(currentValue));
                    }
                }

                e.Row.Cells[i].Controls.Add(dropDownList);
            }
        }
    }
}

protected void dropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList dropDownList = sender as DropDownList;
    string column = ((DataControlFieldHeaderCell)dropDownList.Parent).ContainingField.HeaderText;
    ViewState[column] = dropDownList.SelectedValue;
    GridView1.DataSource = GetData();
    GridView1.DataBind();
}

可以看到，在GridView1_RowDataBound事件中，我们在GridView控件的表头中添加了一个DropDownList控件。然后，我们循环数据源的每一行，找到当前字段不为空且DropDownList中不存在的值，并将其添加到DropDownList中。最后，我们将DropDownList添加到GridView控件的表头中即可实现筛选功能。

注意，在筛选功能中，我们需要使用ViewState来储存当前的筛选条件，所以我们需要手动修改ViewState的值，这样页面才能正确地显示筛选状态。

3. 多表联合查询结果展示

在实际开发中，我们往往需要展示多个数据表中的数据，这时就需要使用多表联合查询。以下是一个简单的多表联合查询的示例代码：

SELECT A.ID, A.Name, B.Address
FROM TableA A INNER JOIN TableB B ON A.ID = B.ID

以上SQL语句将返回TableA和TableB两个表中ID和Name、Address两列的结果集。我们可以通过以下代码将结果集绑定到GridView控件上：

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        GridView1.DataSource = GetMultiData();
        GridView1.DataBind();
    }
}

private DataTable GetMultiData()
{
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
    {
        using (SqlCommand command = new SqlCommand())
        {
            command.Connection = connection;
            command.CommandText = "SELECT A.ID, A.Name, B.Address FROM TableA A INNER JOIN TableB B ON A.ID = B.ID";
            command.CommandType = CommandType.Text;
            using (SqlDataAdapter dataAdapter = new SqlDataAdapter(command))
            {
                DataTable dataTable = new DataTable();
                dataAdapter.Fill(dataTable);
                return dataTable;
            }
        }
    }
}

这里我们使用了一个名为“ConnectionString”的连接字符串，用于连接数据库。我们通过SqlCommand和SqlDataAdapter类向数据库发送SQL查询语句，然后将结果集转化为DataTable类型，并返回给GridView控件即可成功展示多表联合查询结果。

4. 多数据源联合查询结果展示

除了上面提到的多表联合查询，我们还可能需要通过联合多个数据源来展示结果。以下是一个简单的多数据源联合查询的示例代码：

SELECT User.ID, User.Name, Order.Amount
FROM User
INNER JOIN Order ON User.ID = Order.UserID
UNION ALL
SELECT Employee.ID, Employee.Name, Salary.Amount
FROM Employee
INNER JOIN Salary ON Employee.ID = Salary.EmployeeID

以上SQL语句将返回用户和员工两个表中ID和Name、Amount两列的结果集，并通过UNION ALL命令将两个结果集合并成一个结果集。我们可以通过以下代码将结果集绑定到GridView控件上：

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        GridView1.DataSource = GetMultiSourceData();
        GridView1.DataBind();
    }
}

private DataTable GetMultiSourceData()
{
    using (SqlConnection connection1 = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString1"].ConnectionString))
    {
        using (SqlCommand command1 = new SqlCommand())
        {
            command1.Connection = connection1;
            command1.CommandText = "SELECT User.ID, User.Name, Order.Amount FROM User INNER JOIN Order ON User.ID = Order.UserID";
            command1.CommandType = CommandType.Text;

            using (SqlConnection connection2 = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString2"].ConnectionString))
            {
                using (SqlCommand command2 = new SqlCommand())
                {
                    command2.Connection = connection2;
                    command2.CommandText = "SELECT Employee.ID, Employee.Name, Salary.Amount FROM Employee INNER JOIN Salary ON Employee.ID = Salary.EmployeeID";
                    command2.CommandType = CommandType.Text;

                    using (DataSet dataSet = new DataSet())
                    {
                        using (SqlDataAdapter dataAdapter1 = new SqlDataAdapter(command1))
                        {
                            dataAdapter1.Fill(dataSet, "UserTable");
                        }

                        using (SqlDataAdapter dataAdapter2 = new SqlDataAdapter(command2))
                        {
                            dataAdapter2.Fill(dataSet, "EmployeeTable");
                        }

                        using (DataRelation relation = new DataRelation("UserEmployeeRelation", dataSet.Tables["EmployeeTable"].Columns["ID"], dataSet.Tables["UserTable"].Columns["ID"]))
                        {
                            dataSet.Relations.Add(relation);
                            DataTable dataTable = new DataTable();
                            dataTable.Columns.Add("ID");
                            dataTable.Columns.Add("Name");
                            dataTable.Columns.Add("Amount");
                            foreach (DataRow userRow in dataSet.Tables["UserTable"].Rows)
                            {
                                DataRow[] orderRows = userRow.GetChildRows("UserEmployeeRelation");
                                DataRow newRow = dataTable.NewRow();
                                newRow["ID"] = userRow["ID"];
                                newRow["Name"] = userRow["Name"];
                                newRow["Amount"] = orderRows[0]["Amount"];
                                dataTable.Rows.Add(newRow);
                            }
                            return dataTable;
                        }
                    }
                }
            }
        }
    }
}

这里我们需要使用两个连接字符串和SqlCommand、SqlDataAdapter类向两个数据源分别发送SQL查询语句，然后使用DataSet将两个结果集整合起来，并通过DataRelation建立它们之间的关系。最后，我们手动遍历结果集，将它们合并到一个新的DataTable中，并返回给GridView控件即可。

至此，关于“灵活掌握asp.net中gridview控件的多种使用方法（上）”的完整攻略讲解就结束了。其中，我们详细讲解了GridView控件的基本使用、翻页、排序和筛选功能的实现、多表联合查询结果展示以及多数据源联合查询结果展示等多个方面，希望能对大家有所帮助。

本文标题为：灵活掌握asp.net中gridview控件的多种使用方法（上）

上一篇： js中将多个语句写成一个语句的两种方法小结
下一篇： 原生js实现页面滚动动画

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2