4

間違いなくjQueryを使用して、折りたたみ可能なDIVを使用して、(SQLデータベースに保存された)月ごとにいくつかのデータをグループ化したいと考えています。jQuery を作成するときに簡単にするためにテーブルから離れたいので、特に GridView を使用したくありません。

ASP.NET でこれを行うには、どのコントロールを使用すればよいですか?

私が説明しようとしていることのアイデアについては、次の例を参照してください。

グループ化の例

4

1 に答える 1

2

ネストされたリピーターを使用して月ごとにデータを表示するプロジェクトを作成しました。これはGoogle Docsにアップロードされています([ファイル] -> [保存] をクリックして .zip をダウンロードするだけです)。

これがどのように機能するかの簡単な概要は次のとおりです。

データベースに次の列を持つ単純な Orders テーブルがあると仮定します

  1. オーダーID
  2. 製品
  3. 量
  4. 販売日

プロセス

  1. ストアド プロシージャを実行して、特定の年の月を取得します (EntityFramework 関数を使用しました。これを ADO.NET、LINQ などに変更できます)。
  2. 返された月をマスター リピーターのラベルにバインドします (これらは見出しになります)
  3. OnItemDataBoundマスター リピーターのイベントを処理します。このイベントは、アイテムがリピーターにバインドされるたびに実行されます。
  4. 内部OnItemDataBoundでストアドプロシージャを実行して、特定の月と年のすべてのレコードを取得し、返されたデータを子リピーターにバインドするだけです
  5. 小さな 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:&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();
                }
            }
        }
    }
}

結果：

ここに画像の説明を入力

于 2013-01-26T17:52:40.100 に答える