In this article we are learning how to use Repeater Control.The Repeater is essentially a template-driven data-bound list.
The Repeater control allows fragments of html tags inside the templates.
For example, we may start a <table> in the Header template and end the table (</table>) in the
Footer template, if necessary.The control binds its Item collection to the its DataSource.We may
use the Item Command event to process events that are raised from the templates of the control.
We may specify the following templates for a Repeater control:
|
templates
|
Description
|
|
■ Item Template
|
Specifies the DataItem fields to be displayed, and the layout (required).
|
|
■ AlternatingItemTemplate
|
Defines the layout of the zero-based odd indexed items (optional).
|
|
■ SeparatorTemplate
|
we can specify the separator such as <hr> or <br> between repeating items (optional).
|
|
■ HeaderTemplate
|
Specifies the header of the list (optional).
|
|
■ FooterTemplate
|
Specifies the footer of the list (optional).
|
Below examples to illustrate the How to use repeater control.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ExapandList.aspx.cs" EnableEventValidation="false"
Inherits="LearnAsp.Net.ControlDemo.RepaterControl.ExapandList" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="../../Bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<style>
.fa
{
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-gg:before
{
content: "\f260";
}
.panel-body table tr td
{
padding-left: 15px;
}
.panel-body .table
{
margin-bottom: 0px;
}
.panel-heading:hover
{
background-color: yellow;
color: blue;
}
.morePadding
{
padding-bottom: 10px;
}
.accordionSpacing.panel-group .panel + .panel
{
margin-top: 25px;
}
table td
{
padding: .20rem;
}
tbody
{
padding: .50rem;
}
table
{
border: 1 !important;
}
.div
{
padding: .50rem;
}
a
{
text-decoration: none !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="my-form">
<div class="cotainer">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="col-md-12">
<div class="card" style="box-shadow: 0 5px 20px 0 rgb(51, 68, 134);">
<div class="card-header" style="background-image: linear-gradient(-90deg, #621934, yellow);
color: White; font-weight: bold">
<center>
Department List</center>
</div>
<div class="card-body" runat="server" id="mainDiv" style="background-image: linear-gradient(-240deg, yellow, white);">
<asp:Repeater ID="repeater1" runat="server">
<ItemTemplate>
<div class='panel panel-default'>
<div class='panel-heading'>
<h4 class='panel-title'>
<a data-toggle='collapse' data-parent='#accordion' href='#collapse" + <%#Eval("deptno")%> + "'>
<i class='fas fa-circle' style='font-size: 15px;'></i>
<%#Eval("dname")%>
</a>
</h4>
</div>
</ItemTemplate>
<FooterTemplate>
</div> </div>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using System.Data.OracleClient;
using System.Configuration;
namespace LearnAsp.Net.ControlDemo.RepaterControl
{
public partial class ExapandList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String query = " select dname,deptno from dept ";
OracleConnection objConn;
OracleCommand objCmd;
// Retrieve Details from the DB
string strConn = ConfigurationManager.ConnectionStrings["LearnAsp"].ToString();
objConn = new OracleConnection(strConn);
objCmd = new OracleCommand(query, objConn);
//
DataTable dtList = new DataTable();
objConn.Open();
OracleDataAdapter oda = new OracleDataAdapter(objCmd);
oda.Fill(dtList);
objConn.Close();
if (dtList.Rows.Count > 0)
{
repeater1.DataSource = dtList;
repeater1.DataBind();
}
else
{
repeater1.DataSource = null;
repeater1.DataBind();
}
}
}
}
No comments:
Post a Comment
Please do not enter any spam link in the comment box.