[예제]DataList컨트롤을 이용하여 주소데이터와 이미지 데이터를 화면에 출력하기
DataList Control은 Repeater 컨트롤과 비슷하게 반복적으로 DB의 데이터 등을 화면에 출력할 수 있게해주는 컨트롤 입니다. 물론 Repeater 보단 기능이 많습니다. 리피터는 단순히 출력만 했지만 이 DataList는 편집이 가능한 컨트롤 이며 템플릿등을 디자인 화면에서 할 수 있습니다. (Repeater 컨트롤에서 템플릿을 만들기 위해서는 HTML 부분에 일일이 입력을 했습니다.)
[작업 방법]
AddrBook이라는 주소록 테이블의 구조는 다음과 같습니다.
name varchar(20)
tel varchar(20)
image <-- 이미지 파일의 경로룰 보관(예:"image/1.gif")
1. ASP.NET을 위한 프로젝트(C#, 웹응용프로그램) 만듭니다.
2. DataList컨트롤을 화면에 올립니다.
3. SqlDataAdapter 컨트롤을 선택하여 sqlDataAdapter를 작업을 위한 DB용으로 하나 만듭니다. (주소록 테이블과 매핑 합니다.) sqlConnection1을 선택 후 ConnectionString 속성의 맨 뒤에 ;password=**** 라고하여 비밀번호를 입력 합니다.
4. sqlDataAdapter Control의 속성 창 아래의 "데이터 집합 만들기"를 클릭하여 DataSet을 만듭니다...(dsAddrBook)
5. sqlDataAdapter의 DataSource 속성에 위에서 만든 "dsAddrBook"을 선택 합니다.
6. DataList 컨트롤에서 마우스 오른쪽 버튼을 누르신 후 "템플릿 편집" --> 항목템플릿(ItemTemplate)을 선택 후 ItemTemplate을 편집합니다.
그런다음 좌측의 툴박스에서 이미지컨트롤 1개, 라벨2개를 선택해서 DataList 컨트롤로 드래그 합니다.
7. 먼저 Image 컨트롤의 속성중 DataBiding을 선택하여 확장 버튼(쩜쩜쩜)을 클릭합니다. 새로운 창이 나타나면 Container --> DataItem --> image 를 선택 합니다. 그런다은 확인...
8. 다음으로 Label을 하나 섵개하여 7번 작업을 반복 합니다.(name)
마지막 남은 Label도 같이 작업 합니다.(tel)
9. Page_Load 이벤트를 작성 합니다.
if (!Page.IsPostBack)
{
sqlDataAdapter1.Fill(dsAddrBook1);
DataList1.DataBind();
}
9. 실행 후 확인...
===============================================================
전체 소스
1. HTML
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataListTest.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="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="굴림">
<asp:DataList id=DataList1 style="Z-INDEX: 101; LEFT: 81px; POSITION: absolute; TOP: 46px" runat="server" Width="363px" Height="131px" DataSource="<%# dsAddrBook1 %>" BorderColor="#999999" BorderStyle="Solid" CellSpacing="2" ForeColor="Black" BackColor="#CCCCCC" CellPadding="4" GridLines="Both" BorderWidth="3px" RepeatColumns="3">
<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#000099"></SelectedItemStyle>
<HeaderTemplate>
Address Book List
</HeaderTemplate>
<FooterTemplate>
The End~~~
</FooterTemplate>
<ItemStyle BackColor="White"></ItemStyle>
<ItemTemplate>
<P>
<asp:Image id=Image2 runat="server" ImageUrl='<%# DataBinder.Eval(Container, "DataItem.image") %>'>
</asp:Image></P>
<P>
<asp:Label id=Label4 runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.name") %>'>
</asp:Label></P>
<P>
<asp:Label id=Label3 runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.tel") %>'>
</asp:Label></P>
</ItemTemplate>
<FooterStyle BackColor="#CCCCCC"></FooterStyle>
<HeaderStyle Font-Bold="True" ForeColor="White" BackColor="Black"></HeaderStyle>
</asp:DataList></FONT>
</form>
</body>
</HTML>
=========================
2. Behind code
=========================
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 DataListTest
{
/// <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 System.Web.UI.WebControls.DataList DataList1;
protected DataListTest.dsAddrBook dsAddrBook1;
private void InitializeComponent()
{
}
private void Page_Load(object sender, System.EventArgs e)
// 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
if (!Page.IsPostBack)
{
sqlDataAdapter1.Fill(dsAddrBook1);
DataList1.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.sqlInsertCommand1 = new System.Data.SqlClient.SqlCommand();
this.sqlConnection1 = new System.Data.SqlClient.SqlConnection();
this.sqlSelectCommand1 = new System.Data.SqlClient.SqlCommand();
this.dsAddrBook1 = new DataListTest.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")})});
//
// 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";
//
// sqlSelectCommand1
//
this.sqlSelectCommand1.CommandText = "SELECT name, tel, image FROM addrbook";
this.sqlSelectCommand1.Connection = this.sqlConnection1;
//
// 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
}
}
댓글 없음:
댓글 쓰기