我希望按月分组一些数据(存储在sql数据库中),使用可折叠的DIV,毫无疑问是使用jQuery.我并不特别想使用GridView,因为我在编写jQuery时希望远离表格.
在ASP.NET中执行此操作的最佳方法是什么,我将使用哪种控件?
请参阅以下示例,了解我要描述的内容:
解决方法
我创建了一个按月使用嵌套转发器按月显示数据的项目,它在
Google Docs上传(只需单击文件 – >保存即可下载.zip).
以下是其工作原理的简要概述:
假设您在db中有一个简单的Orders表,其中包含以下列
> OrderId
>产品
>数量
> DateOfSale
处理
>执行存储过程以获取给定年份的月份(我使用EntityFramework函数,您可以将其更改为ADO.NET,LINQ等)
>将返回的月份绑定到主中继器中的标签(这些将是您的标题)
>处理主转发器的OnItemDataBound事件,每次将项目绑定到转发器时,此事件都会运行.
> OnItemDataBound内部执行存储过程以获取特定月份和年份的所有记录,并简单地将返回的数据绑定到子转发器
>添加小jQuery来显示和隐藏div并且你已经设置好了.
码
存储过程:
CREATE PROCEDURE dbo.GetMonthsByYear @Year INT AS BEGIN SELECT disTINCT DATENAME(Month,DateOfSale) AS [Month] FROM Orders WHERE Year(DateOfSale) = @Year END CREATE PROCEDURE dbo.GetordersByMonth @Month NVARCHAR(15),@Year INT AS BEGIN SELECT * FROM Orders WHERE (Year(DateOfSale) = @Year) AND DATENAME(MONTH,DateOfSale) = @Month END
ASPX:
<head runat="server"> <script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> var showHide; $(document).ready(function () { showHide = function (control) { var parent = $(control).next(); var display = parent.css('display'); if (display == "none") { parent.fadeIn('slow'); } else { parent.fadeOut('slow'); } }; }); </script> <style type="text/css"> .detail { height:300px; display:none; width: 100%; border: 1px solid black; } .header { vertical-align: top; padding: 3px; height: 30px; background: black; color: White; font-weight: bold; } </style> <title>nested Repeater</title> </head> <body> <form id="form1" runat="server"> <div> Select year: <asp:TextBox ID="txtYear" runat="server" /><br /> <asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="Search" /><br /> <asp:Repeater ID="masterRepeater" runat="server" OnItemDataBound="ItemDataBound"> <ItemTemplate> <div id='<%# Container.DataItem %>' class="header" onclick="showHide(this);"> <asp:Label ID="lblMonth" runat="server" Text='<%# Container.DataItem %>' /> </div> <div class="detail"> <asp:Repeater ID="detailRepeater" runat="server"> <HeaderTemplate> <span style="text-decoration: underline">Product</span><br /> </HeaderTemplate> <ItemTemplate> <asp:Label ID="lblName" runat="server" Text='<%# Bind("Product") %>' /> <asp:Label ID="lblQuantity" runat="server" Text='<%# Bind("Quantity") %>' /> <asp:Label ID="lblDateOfSale" runat="server" Text='<%# Bind("DateOfSale") %>' /><br /> </ItemTemplate> </asp:Repeater> </div> </ItemTemplate> </asp:Repeater> </div> </form> </body>
代码背后:
protected void Search(object sender,EventArgs e) { int year = 0; if (Int32.TryParse(txtYear.Text,out year)) { orderEntities orders = new orderEntities(); List<string> months = orders.GetMonthByYear(year).ToList(); masterRepeater.DataSource = months; masterRepeater.DataBind(); } } protected void ItemDataBound(object sender,RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { int year = 0; if (Int32.TryParse(txtYear.Text,out year)) { Label lblMonth = e.Item.FindControl("lblMonth") as Label; if (lblMonth != null) { string month = lblMonth.Text; Repeater detailRepeater = e.Item.FindControl("detailRepeater") as Repeater; if (detailRepeater != null) { orderEntities orders = new orderEntities(); var ordersByMonth = orders.GetordersByMonth(month,year).ToList(); detailRepeater.DataSource = ordersByMonth; detailRepeater.DataBind(); } } } } }
结果: