ورود / ثبت نام
0
0

کار با کنترل Repeater در ASP.NET

752 بازدید
کنترل Repeater

کنترل Repeater

همانطور که همگی میدانیم نمایش داده در یک برنامه تحت وب به اندازه ی هر عملیات دیگری مهم است. چندین مدل کنترل داده در ASP.NET موجود است مانند GridView ، DetailsView ، FormView ، Repeater و غیره. اما در میان همه ی آنها Repeater بیشترین سرعت را داراست…

یک کنترل Repeater به منظور نمایش داده در حالت تکرار مورد استفاده است. داده میتواند از هر نوع منبع داده ای مانند دیتابیس ، xml و غیره دریافت شود.

تعدادی خصوصیت برای مشخص کردن داده های کنترل Repeater وجود دارد اما خصوصیت DataSource برای ارسال داده به Repeater استفاده میشود. قالب های متفاوتی برای نمایش داده ها ارائه میدهد. کد اتوماتیک برای صفحه بندی ، خلاصه سازی و … ارائه نمیدهد. برای دستیابی به این موارد باید به صورت دستی کدنویسی انجام دهید

ItemTemplate : برای رندر کردن هر ردیف از داده ها استفاده میشود.

AlternatingItem Template : برای رندر کردن ردیف های جایگزین استفاده میشود. میتوانید تعدادی از Styling ها را با ردیف های جایگزین تغییر دهید.

HeaderTemplate : برای رندر کردن داده های header استفاده میشود که پیش از داده های ItemTemplate می آید.

FooterTemplate : به منظور نمایش جزئیات داده هایی که در قسمت Footer می آیند ، استفاده میشود. این مورد همیشه بعد از داده های ItemTemplate می آید.

SeperatorTemplate : این مورد نیز برای جداسازی بین هر خط استفاده میشود. یعنی با استفاده از این قالب میتوانید با ابتداب خط بعدی بروید.

یک برنامه ی ASP.NET WebForms با نام RepeaterControlDemo در ویژوال استودیو ۲۰۱۵ ایجاد کنید و یک فرم جدید به آن بیافزایید.

کنترل Repeater

نام Employee.aspx را برای آن انتخاب کنید. در اینجا ما یک کنترل Repeater اضافه میکنیم و داده ها را از دیتابیس بخوانید.

کنترل Repeater

زمانی که شما یک Web Form جدید ایجاد میکنید ، قالب پیش فرض صفحه به صورت زیر خواهد بود :

کنترل Repeater

کنترل Repeater

میتوانید Repeater را از دو طریق اضافه کنید ، اولین راه drag و drop مستقیم کنترل Repeater از قسمت ToolBox است.

کنترل Repeater

یا اینکه میتوانید کد را به صورت دستی وارد کنید. من ترجیح میدم که همه ی کد ها را دستی وارد کنم.

اکنون میخواهم داده ها را از طریق دیتابیس به Repeater بفرستیم ، پس میتوانید صفحه ی Employee.aspx را همانند کد زیر تغییر دهید :

Employee.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" Inherits="RepeaterControlDemo.Employee" %>  
    <!DOCTYPE html>  
    <html xmlns="http://www.w3.org/1999/xhtml">  
  
    <head runat="server">  
        <title></title>  
    </head>  
  
    <body>  
        <form id="form1" runat="server">  
            <div>  
                <asp:Repeater ID="rptEmployee" runat="server">  
                    <HeaderTemplate>  
                        <table border="1">  
                            <tr>  
                                <th scope="col" style="width: 80px">Employee Id  
                                </th>  
                                <th scope="col" style="width: 120px">Name  
                                </th>  
                                <th scope="col" style="width: 100px">Email  
                                </th>  
                                <th scope="col" style="width: 120px">Age  
                                </th>  
                                <th scope="col" style="width: 100px">Address  
                                </th>  
                                <th scope="col" style="width: 100px">Department Name  
                                </th>  
                            </tr>  
                    </HeaderTemplate>  
                    <ItemTemplate>  
                        <tr>  
                            <td>  
                                <asp:Label ID="lblEmployeeId" runat="server" Text='<%# Eval("Id") %>' />  
                            </td>  
                            <td>  
                                <asp:Label ID="lblEmployeeName" runat="server" Text='<%# Eval("Name") %>' />  
                            </td>  
                            <td>  
                                <asp:Label ID="lblEmail" runat="server" Text='<%# Eval("Email") %>' />  
                            </td>  
                            <td>  
                                <asp:Label ID="lblAge" runat="server" Text='<%# Eval("Age") %>' />  
                            </td>  
                            <td>  
                                <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' />  
                            </td>  
                            <td>  
                                <asp:Label ID="lblDepartment" runat="server" Text='<%# Eval("DepartmentName") %>' />  
                            </td>  
                        </tr>  
                    </ItemTemplate>  
                    <FooterTemplate>  
                        </table>  
                    </FooterTemplate>  
                </asp:Repeater>  
            </div>  
        </form>  
    </body>  
  
    </html>  

Employee.aspx.cs

using System;  
using System.Collections.Generic;  
using System.Configuration;  
using System.Data;  
using System.Data.SqlClient;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
namespace RepeaterControlDemo   
{  
    public partial class Employee: System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            if (!this.IsPostBack)   
            {  
                BindEmployeeData();  
            }  
        }  
        private void BindEmployeeData()   
        {  
            string connection = ConfigurationManager.ConnectionStrings["myconnection"].ConnectionString;  
            using(SqlConnection con = new SqlConnection(connection))   
            {  
                using(SqlCommand objCommand = new SqlCommand("SELECT * FROM Employees emp INNER JOIN Department dep ON emp.Departmentid=dep.DepartmentId", con))   
                {  
                    using(SqlDataAdapter objSqlDataAdapter = new SqlDataAdapter(objCommand))  
                    {  
                        DataTable dt = new DataTable();  
                        dt.Columns.Add("Id");  
                        dt.Columns.Add("Name");  
                        dt.Columns.Add("Email");  
                        dt.Columns.Add("Age");  
                        dt.Columns.Add("Address");  
                        dt.Columns.Add("DepartmentName");  
                        objSqlDataAdapter.Fill(dt);  
                        rptEmployee.DataSource = dt;  
                        rptEmployee.DataBind();  
                    }  
                }  
            }  
        }  
    }  
}  

Web.Config

<connectionStrings>  
    <add name="myconnection" connectionString="Data Source=My-Computer;Initial Catalog=TestEmployee;Integrated Security=True; User Id=sa; Password=mukeshkumar" providerName="System.Data.SqlClient" />  
</connectionStrings

اکنون میتوانید پروژه را اجرا کنید تا نحوه ی عملکرد Repeater را مشاهده کنید.

کنترل Repeater

میتوانید AlternatingItemTemplate را اضافه کنید و ظاهری متفاوت را برای ردیف ها ارائه دهید.

<AlternatingItemTemplate>  
    <tr style="background-color:#0094ff">  
        <td>  
            <asp:Label ID="lblEmployeeId" runat="server" Text='<%# Eval("Id") %>' />  
        </td>  
        <td>  
            <asp:Label ID="lblEmployeeName" runat="server" Text='<%# Eval("Name") %>' />  
        </td>  
        <td>  
            <asp:Label ID="lblEmail" runat="server" Text='<%# Eval("Email") %>' />  
        </td>  
        <td>  
            <asp:Label ID="lblAge" runat="server" Text='<%# Eval("Age") %>' />  
        </td>  
        <td>  
            <asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' />  
        </td>  
        <td>  
            <asp:Label ID="lblDepartment" runat="server" Text='<%# Eval("DepartmentName") %>' />  
        </td>  
    </tr>  
</AlternatingItemTemplate>  

کنترل Repeater

همچنین میتوانیم HeaderTemplate و FooterTemplate را برای زیباسازی آن اضافه کنیم.

HeaderTemplate

<HeaderTemplate>  
    <table border="1">  
        <tr>  
            <th scope="col" style="width: 80px">Employee Id  
            </th>  
            <th scope="col" style="width: 120px">Name  
            </th>  
            <th scope="col" style="width: 100px">Email  
            </th>  
            <th scope="col" style="width: 120px">Age  
            </th>  
            <th scope="col" style="width: 100px">Address  
            </th>  
            <th scope="col" style="width: 100px">Department Name  
            </th>  
        </tr>  
</HeaderTemplate>  

FooterTemplate

<FooterTemplate>  
    <tr>  
        <td colspan="6">  
            This is footer section  
        </td>  
    </tr>  
    </table>  
</FooterTemplate>  

موفق باشید !

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=17643
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد کار با کنترل Repeater در ASP.NET

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.