همانطور که همگی میدانیم نمایش داده در یک برنامه تحت وب به اندازه ی هر عملیات دیگری مهم است. چندین مدل کنترل داده در 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 در ویژوال استودیو ۲۰۱۵ ایجاد کنید و یک فرم جدید به آن بیافزایید.
نام Employee.aspx را برای آن انتخاب کنید. در اینجا ما یک کنترل Repeater اضافه میکنیم و داده ها را از دیتابیس بخوانید.
زمانی که شما یک Web Form جدید ایجاد میکنید ، قالب پیش فرض صفحه به صورت زیر خواهد بود :
کنترل Repeater
میتوانید Repeater را از دو طریق اضافه کنید ، اولین راه drag و drop مستقیم کنترل Repeater از قسمت ToolBox است.
یا اینکه میتوانید کد را به صورت دستی وارد کنید. من ترجیح میدم که همه ی کد ها را دستی وارد کنم.
اکنون میخواهم داده ها را از طریق دیتابیس به 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 را مشاهده کنید.
میتوانید 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>
همچنین میتوانیم 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>
موفق باشید !
هیچ دیدگاهی نوشته نشده است.