按月分组的ASP.NET组数据

时间:2013-01-20 18:46:14

标签: asp.net

我希望按月分组一些数据(存储在SQL数据库中),使用可折叠的DIV,毫无疑问是使用jQuery。我并不特别想使用GridView,因为我想在编写jQuery时远离表格。

在ASP.NET中执行此操作的最佳方法是什么,我将使用哪种控件?

请参阅以下示例,了解我想要描述的内容:

Grouping Example

1 个答案:

答案 0 :(得分:2)

我创建了一个按月使用嵌套转发器显示数据的项目,它已上传到Google Docs(只需点击文件 - >保存即可下载.zip)。

以下是其工作原理的简要概述:

假设数据库中有一个简单的Orders表,其中包含以下列

  1. 的OrderId
  2. 产品
  3. 数量
  4. DateOfSale
  5. 过程

    1. 执行存储过程以获取给定年份的月份(我使用EntityFramework函数,您可以将其更改为ADO.NET,LINQ等)
    2. 将返回的月份绑定到主中继器中的标签(这些将是您的标题)
    3. 处理主转发器的OnItemDataBound事件,每次将项目绑定到转发器时都会运行此事件
    4. OnItemDataBound内执行存储过程以获取特定月份和年份的所有记录,并简单地将返回的数据绑定到子转发器
    5. 添加小jQuery来显示和隐藏div,然后设置。
    6. 代码

      存储过程:

      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:&nbsp;<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();
                      }
                  }
              }
          }
      }
      

      <强>结果:

      enter image description here