Repeat Control은 반복적으로 DB의 데이터 등을 화면에 출력할 수 있게해주는 컨트롤 입니다. 물론 읽기 전용 이구요...
[작업 방법]
AddrBook이라는 주소록 테이블의 구조는 다음과 같습니다.
name varchar(20)
tel varchar(20)
image <-- 이미지 파일의 경로룰 보관(예:"image/1.gif")
1. ASP.NET을 위한 프로젝트(C#, 웹응용프로그램) 만듭니다.
2. Repeater 컨트롤을 화면에 올립니다.
3. SqlDataAdapter 컨트롤을 선택하여 sqlDataAdapter를 작업을 위한 DB용으로 하나 만듭니다. (주소록 테이블과 매핑 합니다.) sqlConnection1을 선택 후 ConnectionString 속성의 맨 뒤에 ;password=**** 라고하여 비밀번호를 입력 합니다.
4. sqlDataAdapter Control의 속성 창 아래의 "데이터 집합 만들기"를 클릭하여 DataSet을 만듭니다...(dsAddrBook)
5. sqlDataAdapter의 DataSource 속성에 위에서 만든 "dsAddrBook"을 선택 합니다.
6. 디자인 화면 아래의 HTML을 클릭 하여 아래처럼 Template을 만듭니다. 아래는 HTML의 전체 소스 입니다. Reapeater Control에서 디자인 화면에서는 작성이 불가능 하니 아래의 템플릿 내용을 입력 합니다.
HeaderTemplate : 데이터를 반복하여 출력시 그 Header가 됨(<table>)
FooterTemplate : 데이터를 반복하여 출력시 그 Footer가 됨(</table>)
ItemTemplate : 반복적으로 표시될 데이터의 디자인 부분(<tr> ~ </tr>)
===================================
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="RepeatTest.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="FlowLayout">
<form id="Form1" method="post" runat="server">
<FONT face="굴림">
<asp:Label id="Label1" runat="server" Width="154px" Height="41px" Font-Bold="True" Font-Size="XX-Large">주소록</asp:Label>
<br>
<asp:Repeater id="Repeater1" runat="server" DataSource="<%# dsAddrBook1 %>">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Image ID="image1" Runat="server" ImageUrl='<%#
DataBinder.Eval(Container.DataItem,"image")%>'>
</asp:Image>
<font size="2">이름 :<%# DataBinder.Eval(Container.DataItem,"name")%><br>
전화번호:<%# DataBinder.Eval(Container.DataItem,"tel")%><br>
</font>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater></FONT>
</form>
</body>
</HTML>
=======================================================
7. Page_Load 함수를 작성 합니다.(비하인드 코드)
아래는 비하인드 코드 전체의 내용 입니다.
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace RepeatTest
{
/// <summary>
/// WebForm1에 대한 요약 설명입니다.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Data.SqlClient.SqlDataAdapter sqlDataAdapter1;
protected System.Data.SqlClient.SqlCommand sqlSelectCommand1;
protected System.Data.SqlClient.SqlCommand sqlInsertCommand1;
protected System.Data.SqlClient.SqlConnection sqlConnection1;
protected RepeatTest.dsAddrBook dsAddrBook1;
protected System.Web.UI.WebControls.Label Label1;
protected System.Web.UI.WebControls.Repeater Repeater1;
private void Page_Load(object sender, System.EventArgs e)
{
// 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
if(!Page.IsPostBack)
{
sqlDataAdapter1.Fill(dsAddrBook1);
Repeater1.DataBind();
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 이 호출은 ASP.NET Web Form 디자이너에 필요합니다.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 디자이너 지원에 필요한 메서드입니다.
/// 이 메서드의 내용을 코드 편집기로 수정하지 마십시오.
/// </summary>
private void InitializeComponent()
{
this.sqlDataAdapter1 = new System.Data.SqlClient.SqlDataAdapter();
this.sqlSelectCommand1 = new System.Data.SqlClient.SqlCommand();
this.sqlInsertCommand1 = new System.Data.SqlClient.SqlCommand();
this.sqlConnection1 = new System.Data.SqlClient.SqlConnection();
this.dsAddrBook1 = new RepeatTest.dsAddrBook();
((System.ComponentModel.ISupportInitialize)(this.dsAddrBook1)).BeginInit();
//
// sqlDataAdapter1
//
this.sqlDataAdapter1.InsertCommand = this.sqlInsertCommand1;
this.sqlDataAdapter1.SelectCommand = this.sqlSelectCommand1;
this.sqlDataAdapter1.TableMappings.AddRange(new System.Data.Common.DataTableMapping[] {
new System.Data.Common.DataTableMapping("Table", "addrbook", new System.Data.Common.DataColumnMapping[] {
new System.Data.Common.DataColumnMapping("name", "name"),
new System.Data.Common.DataColumnMapping("tel", "tel"),
new System.Data.Common.DataColumnMapping("image", "image")})});
//
// sqlSelectCommand1
//
this.sqlSelectCommand1.CommandText = "SELECT name, tel, image FROM addrbook";
this.sqlSelectCommand1.Connection = this.sqlConnection1;
//
// sqlInsertCommand1
//
this.sqlInsertCommand1.CommandText = "INSERT INTO addrbook(name, tel, image) VALUES (@name, @tel, @image); SELECT name," +
" tel, image FROM addrbook";
this.sqlInsertCommand1.Connection = this.sqlConnection1;
this.sqlInsertCommand1.Parameters.Add(new System.Data.SqlClient.SqlParameter("@name", System.Data.SqlDbType.VarChar, 50, "name"));
this.sqlInsertCommand1.Parameters.Add(new System.Data.SqlClient.SqlParameter("@tel", System.Data.SqlDbType.VarChar, 50, "tel"));
this.sqlInsertCommand1.Parameters.Add(new System.Data.SqlClient.SqlParameter("@image", System.Data.SqlDbType.VarChar, 100, "image"));
//
// sqlConnection1
//
this.sqlConnection1.ConnectionString = "data source=localhost;initial catalog=pubs;persist security info=False;user id=sa" +
";workstation id=5C-T;packet size=4096;password=pass";
//
// dsAddrBook1
//
this.dsAddrBook1.DataSetName = "dsAddrBook";
this.dsAddrBook1.Locale = new System.Globalization.CultureInfo("ko-KR");
this.dsAddrBook1.Namespace = "http://www.tempuri.org/dsAddrBook.xsd";
this.Load += new System.EventHandler(this.Page_Load);
((System.ComponentModel.ISupportInitialize)(this.dsAddrBook1)).EndInit();
}
#endregion
}
}
8. 프로젝트 폴더 아래에 image 폴더를 만들고 적절히 이미지를 위치 시킵니다.
9. 실행합니다.
댓글 없음:
댓글 쓰기