C# Repeater 巢狀綁定實作月曆頁面（一）：前端 ASPX 頁面結構與 JavaScript 互動

ASPX 前端標記

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.ASPx.cs" Inherits="Test.Web._Default" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>月曆頁面</title>
    <script src="../Javascript/PopupWindow.JS" type="text/javascript"></script>
    <script type="text/javascript">
        function img_refresh(n) {
            var date = document.getElementById("hdDate").value;
            document.location.href = "Default.ASPx?date=" + date + "&goto=" + n;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="hidden" runat="server" id="hdDay" />
        <table width="100%" height="100%" border="1" style="border:solid 1px #ccc; border-collapse:collapse; table-layout:fixed;" rules="all" cellspacing="0" cellpadding="2">
            <tr class="tdTitle0" height="35px">
                <td align="center"><a href="Javascript:img_refresh(-1);">前一月</a></td>
                <td align="center" colspan="5" style="font-weight:bold;"><asp:Label ID="lblDate" runat="server"></asp:Label></td>
                <td align="center"><a href="Javascript:img_refresh(1);">後一月</a></td>
            </tr>
            <tr style="background-color:#FFFFCC" height="25px">
                <td align="center">星期日</td><td align="center">星期一</td><td align="center">星期二</td>
                <td align="center">星期三</td><td align="center">星期四</td><td align="center">星期五</td><td align="center">星期六</td>
            </tr>
            <asp:Repeater ID="rptParent" runat="server" OnItemDataBound="rptParent_ItemDataBound">
                <ItemTemplate>
                    <tr>
                        <asp:Repeater ID="rptChild" runat="server" OnItemDataBound="rptChild_ItemDataBound">
                            <ItemTemplate>
                                <td>
                                    <table id="colorCell" runat="server" width="100%" height="100%">
                                        <tr>
                                            <td align="left" height="25px" valign="middle"><%# DataBinder.Eval(Container.DataItem, "date", "{0:dd}") %></td>
                                            <td align="right"></td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" valign="top"></td>
                                        </tr>
                                    </table>
                                </td>
                            </ItemTemplate>
                        </asp:Repeater>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </table>
        <input type="hidden" id="hdDate" runat="server" />
    </form>
</body>
</html>

雙層 Repeater：外層產生週列（tr），內層產生 7 個儲存格（td）。隱藏欄位 hdDate 保存當前月份，JavaScript img_refresh 控制換月導航。