IT실전교육,탑크리에듀교육센터: [예제]DataList 컨트롤을 이용하여 주소데이터와 이미지 데이터를 화면에 출력하기[재직자무료교육/프로그래머교육/구로디지털IT교육,오라클/자바/닷넷/C#/iOS/안드로이드/아이폰교육]

2013년 12월 26일 목요일

[예제]DataList 컨트롤을 이용하여 주소데이터와 이미지 데이터를 화면에 출력하기[재직자무료교육/프로그래머교육/구로디지털IT교육,오라클/자바/닷넷/C#/iOS/안드로이드/아이폰교육]

[예제]DataList 컨트롤을 이용하여 주소데이터와 이미지 데이터를 화면에 출력하기[재직자무료교육/프로그래머교육/구로디지털IT교육,오라클/자바/닷넷/C#/iOS/안드로이드/아이폰교육]

[예제]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
}
}

=======================================================================================

[오프라인 개강예정강좌, 오프라인교육장에 오시면 보다 자세히 배울 수 있습니다.]

오라클자바커뮤니티에서 운영하는 개발자 전문교육 ,개인80%환급(www.onjprogramming.co.kr)

[주간]
  [01/06][기업100%환급]Spring ,MyBatis,Hibernate실무과정
  [01/06][기업100%환급]SQL기초에서 Schema Object까지
  [01/06]C#,ASP.NET마스터
  [01/13]iPhone 하이브리드 앱 개발 실무과정
  [01/13][기업100%환급]PL/SQL,ORACLE HINT,TUNING
  [01/13][기업100%환급]자바기초에서 JDBC, Servlet/JSP까지
  [01/13][기업100%환급]HTML5,JavaScript,Ajax,jQUERY,JSON
  [01/16][채용확정]오라클자바실무개발자신입과정

[평일야간]
  [01/07]자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지
  [01/07]안드로이드개발자과정
  [01/08]C#,ASP.NET마스터
  [01/09]iPhone하이브리드앱개발실무과정
  [01/09]웹퍼블리싱 마스터
  [01/09]Spring3.X, MyBatis, Hibernate실무과정
  [01/24]SQL초보에서실전전문가까지

[주말]
  [01/04]닷넷실무자를위한WPF개발자과정
  [01/04]Spring3.X,MyBatis,Hibernate실무과정
  [01/11]C#,ASP.NET마스터
  [01/11]JAVA&WEB프레임워크실무과정
  [01/11]안드로이드개발자과정
  [01/11]SQL초보에서전문가까지
  [01/18]웹퍼블리싱 마스터

홈페이지 바로가기 : http://www.oraclejavanew.kr/

2013년 12월 26일 목요일

[예제]DataList 컨트롤을 이용하여 주소데이터와 이미지 데이터를 화면에 출력하기[재직자무료교육/프로그래머교육/구로디지털IT교육,오라클/자바/닷넷/C#/iOS/안드로이드/아이폰교육]

댓글 없음:

댓글 쓰기