DropDownList+GridView三级联动效果

最新推荐文章于 2021-03-10 20:33:09 发布

eclipseluo

最新推荐文章于 2021-03-10 20:33:09 发布

阅读量617

点赞数

分类专栏： ASP.NET 文章标签： server asp object 产品 xhtml string

本文链接：https://blog.csdn.net/eclipseluo/article/details/4766115

版权

ASP.NET 专栏收录该内容

90 篇文章 1 订阅

订阅专栏

制作三级联动效果：顾客---》订单---》产品，效果图如下：

主要操作NorthWind数据库中的三张表：Customers（顾客表）、Orders（订单表）、Order Details（订单详情表）

（1）把Customers表中的CustomerID绑定到下拉框中（使用无参数的SQL语句来实现）

（2）选择一个Customers显示该顾客的所有订单（使用有参数的SQL语句实现）

（3）点击订单列表中的“查看订单产品”显示该订单的“产品列表”（使用存储过程实现）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="顾客:"></asp:Label> <asp:DropDownList ID="DdlCustomerID" runat="server" onselectedindexchanged="DdlCustomerID_SelectedIndexChanged" AutoPostBack="true" > </asp:DropDownList> <br /> <br /> <asp:Label ID="lbOrders" runat="server" Text="订单列表:" ></asp:Label><br /> <asp:GridView ID="gv_Orders" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" DataKeyNames="OrderID" onrowcommand="gv_Orders_RowCommand" > <FooterStyle BackColor="#CCCC99" /> <RowStyle BackColor="#F7F7DE" /> <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" /> <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:TemplateField HeaderText="查看"> <ItemTemplate> <asp:LinkButton ID="lookOrderDetail" runat="server" CommandName="lookOrderDet" CommandArgument='<%#Eval("OrderID") %>'>查看订单产品</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <br /> <br /> <asp:Label ID="lbOrderDetails" runat="server" Text="订单产品列表:" Visible="false"></asp:Label><br /> <asp:GridView ID="gv_OrderDetails" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Visible="false"> <FooterStyle BackColor="#CCCC99" /> <RowStyle BackColor="#F7F7DE" /> <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" /> <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </div> </form> </body> </html>

后台代码：

using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) //如果回发，每次request都会刷新，而非第一次加载页面 //如果没有这个判断，将无法正确保持页面上的数据绑定等一系列问题 { DdlBind(); gv_OrderBind(); } } /// <summary> /// 创建数据库实例 /// </summary> /// <returns></returns> public SqlHelper CreateConn() { SqlHelper helper = new SqlHelper(@"Data Source=A102-35/SQLEXPRESS;Initial Catalog=Northwind;integrated security=true"); return helper; } /// <summary> /// DropDownList的列表绑定 /// </summary> public void DdlBind() { SqlHelper helper=CreateConn(); DdlCustomerID.DataSource=helper.RunProcDataTable("select * from Customers", "Customers"); DdlCustomerID.DataTextField = "CustomerID"; DdlCustomerID.DataValueField = "CustomerID"; DdlCustomerID.DataBind(); } /// <summary> /// GridView gv_Orders的绑定 /// </summary> public void gv_OrderBind() { SqlHelper helper = CreateConn(); if (DdlCustomerID.Items.Count == 0) //如果当前没有用户，则直接返回，不进行联动 { return; } string vul = DdlCustomerID.SelectedValue; string sqlQry = @"select OrderID,CustomerID,OrderDate,EmployeeID from Orders where CustomerID='" + vul + "'"; gv_Orders.DataSource = helper.RunProcDataTable(sqlQry, "Orders"); gv_Orders.DataBind(); } /// <summary> /// GridView gv_OrderDetail的绑定 /// </summary> /// <param name="para"></param> public void gv_OrderDetailBind(SqlParameter[] para) { SqlHelper helper = CreateConn(); gv_OrderDetails.DataSource = helper.RunProcDataTable("proc_selectOrderDetail", CommandType.StoredProcedure,para, "Order Details"); gv_OrderDetails.DataBind(); } /// <summary> /// DropDownList下拉框事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void DdlCustomerID_SelectedIndexChanged(object sender, EventArgs e) { gv_OrderBind(); gv_OrderDetails.Visible = false; lbOrderDetails.Visible = false; } /// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gv_Orders_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName == "lookOrderDet") { SqlParameter[] pa = { new SqlParameter("@orderid",SqlDbType.Int) }; pa[0].Value = e.CommandArgument.ToString(); pa[0].Direction = ParameterDirection.Input; gv_OrderDetailBind(pa); lbOrderDetails.Visible = true; gv_OrderDetails.Visible = true; } } }

主要知识点：

1. DropDownList控件绑定

（1）页面文件中设置属性AutoPostBack="true" 才能进行更新

（2）通过onselectedindexchanged="DdlCustomerID_SelectedIndexChanged"事件来触发动作

（3）在后台绑定时，DropDownList的DataSource先获取数据表，然后

设置绑定列的文本域DdlCustomerID.DataTextField = "CustomerID";

设置绑定列的值域，即需要绑定的列名DdlCustomerID.DataValueField = "CustomerID";

最后DdlCustomerID.DataBind();即可。

2.GridView控件的绑定

（1）页面文件中必须DataKeyNames="OrderID" 获取表的主键值，否则会抛出无法找到主键的错误。

（2）Eval（）函数只能在模板列中使用

eclipseluo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
DropDownList+GridView三级联动效果

制作三级联动效果：顾客---》订单---》产品，效果图如下：主要操作NorthWind数据库中的三张表：Customers（顾客表）、Orders（订单表）、Order Details（订单详情表）（1）把Customers表中的CustomerID绑定到下拉框中（使用无参数的SQL语句来实现）（2）选择一个Customers显示该顾客的所
复制链接

扫一扫