در این مقاله می خواهیم نحوه استفاده از Repeater Control را، برای نمایش داده های بانک اطلاعاتی در ASP.Net در جدول HTML بررسی کنیم.

همانطور که از نام این کنترل مشخص است، محتوای خود را تکرار می کند. بنابراین می تواند برای نمایش داده ها در هر المان HTML استفاده شود. در این مقاله Repeater Control، داده ها را از بانک اطلاعاتی گرفته و در جدول HTML نمایش می دهد.

Repeater Control و Templates

Repeater Control از قالب های زیر استفاده می کند.

Header : محتویات این بخش تکرار نمی شود و در بالاترین موقعیت قرار خواهد گرفت.

Item : محتوای این قالب برای هر رکورد موجود در DataSource تکرار خواهد شد.

AlternatingItem : این قالب برای اضافه کردن بخش Alternate استفاده می شود. بطور کلی برای design متفاوت AlternatingItem، همراه با بخش Item استفاده می شود.

Separator : این قالب برای اضافه کردن فاصله یا جدا کردن دو بخش Repeater Control استفاده می شود. 

Footer : محتویات این بخش تکرار نخواهد شد و در پایین ترینموقعیت قرار خواهد گرفت.

HTML

کدهای HTML زیر شامل کنترل Repeater می باشد.

به مراتب برای ارائه Repeater Control در جدول HTML، نیاز دارید که یک جدول HTML طراحی کنید و سپس تگ شروع جدول و سطرHeader را درون بخش Header مربوط به Repeater قرار دهید.

سطرها، داده ها را درون بخش Item مربوط به Repeater نگه خواهند داشت و در آخر تگ پایانی جدول درون بخش Footer قرار می گیرد.

بخش Header و Footer تکرار نخواهند شد. بخش Item اطلاعاتش را برمبنای داده های بانک اطلاعاتی تکرار می کند.

<asp:Repeater ID="rptCustomers" runat="server">
    <HeaderTemplate>
        <table cellspacing="0" rules="all" border="1">
            <tr>
                <th scope="col" style="width: 80px">
                    کدمشتری
                </th>
                <th scope="col" style="width: 120px">
                    نام مشتری
                </th>
                <th scope="col" style="width: 100px">
                    کشور
                </th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("CustomerId") %>' />
            </td>
            <td>
                <asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' />
            </td>
            <td>
                <asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Country") %>' />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

فضای نام

نیاز داریم که فضای نام های زیر را در برنامه اضافه کنیم.

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

در صفحه Page Load، کنترل Repeater، با رکوردهای جدول از بانک اطلاعاتی قرار می گیرند.

protected void Page_Load(object sender, EventArgs e)

{
    if (!this.IsPostBack)
    {
        this.BindRepeater();
    }
}
 
private void BindRepeater()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 * FROM Customers", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                rptCustomers.DataSource = dt;
                rptCustomers.DataBind();
            }
        }
    }
}

تصویر خروجی