ASP.NET แสดงรูปภาพ Image บน Crystal Report แบบ Step by Step (VB.NET / C#) |
|
|
|
ASP.NET แสดงรูปภาพ Image บน Crystal Report แบบ Step by Step (VB.NET / C#) อีกหนึ่งบทความที่น่าสนใจเกี่ยวกับการนำรูปภาพ Image แสดงบน Crystal Report ช่วงนี้ห่างหายจากการเขียนบทความ Crystal Report ไปนานพอสมควร มัวแต่ไปสนุกกับบทความ Smart Phone วันนี้มีโอกาศว่างซะ 4-5 ชม. ประกอบกับมีกระทู้ถามเกี่ยวกับการแทรกรูปภาพ Image เพื่อแสดงผลบน Crystal Report หลายบทความ ก็เลยตั้งใจจะเขียนบทความเกี่ยวกับ Crystal Report อีกซะ 1-2 บทความ ไว้ให้สมาชิกได้มีตัวอย่างไว้ศึกษาและทำตาม โดยในความนี้ได้ออกแบบเขียนหัวข้อไว้นานแล้วประมาณ 3-4 เดือย แต่ยังไม่ได้ทำต่อให้เสร็จซะที ส่วนรายละเอียดการทำนั้นมาดูรายละเอียดง่าย ๆ กันได้เลย
Crystal Report กับการแสดงรูปภาพ (Image)
ในการแสดงรูปภาพบน Crystal Report นั้นวิธีที่ง่ายที่สุดที่จะแนะนำคือ การสร้างกลุ่มของ DataSet ที่จะแสดงรูปภาพโดยกำหนด Type เป็น Byte[] จากนั้นเราจะให้ Crystal Report ทำการเรียก DataSet หรือ DataTable นั้น ๆ พร้อม ๆ กับ .NET ทำการแปลงรูปภาพให้อยู่ในรูปแบบของ Binary และส่งค่า SetDataSource ให้กับ Crystal Report ก็จะสามารถแสดงรูปภาพได้แบบง่าย ๆ
Dim fiStream As New FileStream(Server.MapPath("Images/thaicreate.jpg"), FileMode.Open)
Dim binReader As New BinaryReader(fiStream)
Dim pic() As Byte = {}
pic = binReader.ReadBytes(fiStream.Length)
// Used pic
fiStream.Close()
binReader.Close()
ตัวอย่างการแปลงรูปภาพที่อยู่ในโฟเดอร์เป็น Binary ที่จะสร้างเป็น DataSource ให้กับ Crystal Report
สำหรับตัวอย่างนี้จะใช้ได้ทั้งที่เป็น ASP.NET และ Windows App (VB.NET, C#)
ในตัวอย่างนี้จะสมมุติข้อมูลสมาชิก ถูกจัดเก็บไว้ในฐานข้อมูล SQL Server โดยมี Column ที่ชื่อว่า Picture ซึ่งจัดเก็บ Path ของรูปภาพดังรูป

โครงสร้างของตารางและข้อมูล
USE [mydatabase]
GO
/****** Object: Table [dbo].[customer] Script Date: 03/13/2012 13:42:18 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[customer](
[CustomerID] [varchar](4) NOT NULL,
[Name] [varchar](50) NULL,
[Email] [varchar](50) NULL,
[CountryCode] [varchar](2) NULL,
[Budget] [float] NULL,
[Used] [float] NULL,
CONSTRAINT [PK_customer] PRIMARY KEY CLUSTERED
(
[CustomerID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
INSERT INTO customer VALUES ('C001', 'Win Weerachai', '[email protected]', 'TH', 1000000, 600000);
INSERT INTO customer VALUES ('C002', 'John Smith', '[email protected]', 'EN', 2000000, 800000);
INSERT INTO customer VALUES ('C003', 'Jame Born', '[email protected]', 'US', 3000000, 600000);
INSERT INTO customer VALUES ('C004', 'Chalee Angel', '[email protected]', 'US', 4000000, 100000);
GO
SET ANSI_PADDING OFF
นำ Query นี้ไปรันเพื่อสร้าง Table และ Data

เป็นรูปภาพที่ถูกจัดเก็บอยู่ในโฟเดอร์
ขั้นตอนและวิธีการ
ขั้นที่ 1. ออกแบบ DataSet สำหรับรอรับข้อมูลจาก DataSource ของ .NET
ขั้นที่ 2. สร้าง Crystal Report โดยอ้างอิงขอบเขตของข้อมูลจาก DataSet ทีได้สร้างไว้
ขั้นที่ 3. สร้าง DataSet และ DataTable บน .NET โดย Query ข้อมูลจาก SQL Server และ Loop อ่านค่า Path ของรูปภาพให้อยู่ในรูปแบบ Binary
เริ่มต้นด้วยการสร้าง Project บน Visual Studio

สร้างเป็น ASP.NET Web Site หรือ ASP.NET Web Application หรือ Application อื่น ๆ ก็ได้เช่นเดียวกัน

คลิกขวาที่ Project เลือก Add New Item

ขั้นตอนนี้จะเป็นการสร้าง DataSet โดยกำหนดชื่อเป็น myDataSet.xsd

ในกรณีที่โปรแกรมต้องการให้จัดเก็บลงในโฟเดอร์ App_Code

ไฟล์ myDataSet.xsd ที่ได้

ทำการสร้าง DataTable ขึ้นมาใหม่

โดยกำหนดชื่อเป็น myMember

ทำการสร้าง Column ดังรูป

สร้าง Column ชื่อ MemberID และกำหนด DataType ดังรูป โดยกำหนดเป็น System.Int32

สร้าง Column ชื่อ Name และ Email โดยกำหนด DataType เป็น System.String

สร้าง Column ชื่อ Picture_Steam โดยกำหนด DataType เป็น System.Byte[]

จะได้ DataTable ชื่อ myMember และประกอบด้วย Column ต่าง ๆ ดังรูป
หลังจากได้ DataSet และ DataTable แล้วก็เสร็จสิ้นขั้นตอนการสร้าง DataSet ขั้นตอนถัดไปคือการสร้าง Crystal Report ที่อ้างอิงขอบเขตข้อมูลจาก DataSet

คลิกขวาที่ Project เลือก Add New Item

เลือก Crystal Report และกำหนดชื่อเป็น myCrystalReport.rpt

คลิก OK

เลือก DataSet และ DataTable ที่ได้สร้างไว้

เลือก Column ทั้งหมด

ทำตามขั้นตอนเรื่อย ๆ จนเสร็จสิ้นขั้นตอน

จะได้หน้าตา Crystal Report ดังรูป เราสามารถปรับแต่งหรือจัดตำแหน่งต่าง ๆ ได้ตามความต้องการ

จะสังเกตุว่า Column ที่ชื่อว่า Picture_Steam จะยังไม่มี ให้เราทำการลากมาใส่ในตำแหน่งดังภาพ และปรับแต่งตำแหน่งอื่น ๆ ตามความต้องการ
หลังจากได้ Crystal Report แล้วขั้นตอนถัดไปจะทำการแสดง Crystal Report บนหน้า Webpage ของ ASP.NET

จาก Control ที่มีชื่อว่า CrystalReportViewer มาวางไว้ในหน้า WebPage ดังรูป โดยขั้นตอนนี้ไม่ต้องทำอะไรเพิ่มเติม เพราะเราจะสร้าง DataSet สำหรับ Map ด้วย Code ของ .NET
โดยตัวอย่างนี้มีทั้งของ VB.NET และ C#
VB.NET
Imports CrystalDecisions.CrystalReports.Engine
Imports System.Data
Imports System.Data.SqlClient
Imports System.IO
Imports System.Text
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim objConn As New SqlConnection
Dim objCmd As New SqlCommand
Dim dtAdapter As New SqlDataAdapter
Dim ds As New DataSet
Dim dt As DataTable
Dim strConnString, strSQL As String
strConnString = "Server=localhost;UID=sa;PASSWORD=;database=mydatabase;Max Pool Size=400;Connect Timeout=600;"
strSQL = "SELECT * FROM member ORDER BY MemberID ASC "
objConn.ConnectionString = strConnString
With objCmd
.Connection = objConn
.CommandText = strSQL
.CommandType = CommandType.Text
End With
dtAdapter.SelectCommand = objCmd
dtAdapter.Fill(ds)
dt = ds.Tables(0)
dtAdapter = Nothing
objConn.Close()
objConn = Nothing
Dim dtMap As New DataTable("myMember") '*** DataTable Map DataSet.xsd ***'
Dim dr As DataRow
dtMap.Columns.Add(New DataColumn("MemberID", GetType(String)))
dtMap.Columns.Add(New DataColumn("Name", GetType(String)))
dtMap.Columns.Add(New DataColumn("Email", GetType(String)))
dtMap.Columns.Add(New DataColumn("Picture_Steam", GetType(System.Byte())))
Dim i As Integer = 0
For i = 0 To dt.Rows.Count - 1
Dim fiStream As New FileStream(Server.MapPath(dt.Rows(i)("Picture")), FileMode.Open)
Dim binReader As New BinaryReader(fiStream)
Dim pic() As Byte = {}
pic = binReader.ReadBytes(fiStream.Length)
dr = dtMap.NewRow
dr("MemberID") = dt.Rows(i)("MemberID")
dr("Name") = dt.Rows(i)("Name")
dr("Email") = dt.Rows(i)("Email")
dr("Picture_Steam") = pic
dtMap.Rows.Add(dr)
fiStream.Close()
binReader.Close()
Next
Dim rpt As New ReportDocument()
rpt.Load(Server.MapPath("myCrystalReport.rpt"))
rpt.SetDataSource(dtMap)
Me.CrystalReportViewer1.ReportSource = rpt
End Sub
End Class
C#
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.Data.SqlClient;
using System.IO;
using CrystalDecisions.CrystalReports.Engine;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection objConn = new SqlConnection();
SqlCommand objCmd = new SqlCommand();
SqlDataAdapter dtAdapter = new SqlDataAdapter();
DataSet ds = new DataSet();
DataTable dt = null;
string strConnString = null;
string strSQL = null;
strConnString = "Server=localhost;UID=sa;PASSWORD=;database=mydatabase;Max Pool Size=400;Connect Timeout=600;";
strSQL = "SELECT * FROM member ORDER BY MemberID ASC ";
objConn.ConnectionString = strConnString;
var _with1 = objCmd;
_with1.Connection = objConn;
_with1.CommandText = strSQL;
_with1.CommandType = CommandType.Text;
dtAdapter.SelectCommand = objCmd;
dtAdapter.Fill(ds);
dt = ds.Tables[0];
dtAdapter = null;
objConn.Close();
objConn = null;
DataTable dtMap = new DataTable("myMember"); //*** DataTable Map DataSet.xsd ***//
DataRow dr = null;
dtMap.Columns.Add(new DataColumn("MemberID", typeof(string)));
dtMap.Columns.Add(new DataColumn("Name", typeof(string)));
dtMap.Columns.Add(new DataColumn("Email", typeof(string)));
dtMap.Columns.Add(new DataColumn("Picture_Steam", typeof(System.Byte[])));
int i = 0;
for (i = 0; i <= dt.Rows.Count - 1; i++)
{
FileStream fiStream = new FileStream(Server.MapPath(dt.Rows[i]["Picture"].ToString()), FileMode.Open);
BinaryReader binReader = new BinaryReader(fiStream);
byte[] pic = { };
pic = binReader.ReadBytes((int)fiStream.Length);
dr = dtMap.NewRow();
dr["MemberID"] = dt.Rows[i]["MemberID"];
dr["Name"] = dt.Rows[i]["Name"];
dr["Email"] = dt.Rows[i]["Email"];
dr["Picture_Steam"] = pic;
dtMap.Rows.Add(dr);
fiStream.Close();
binReader.Close();
}
ReportDocument rpt = new ReportDocument();
rpt.Load(Server.MapPath("myCrystalReport.rpt"));
rpt.SetDataSource(dtMap);
this.CrystalReportViewer1.ReportSource = rpt;
}
}
Screenshot
แสดง Image หรือรูปภาพบน Crystal Report ด้วยวิธีการทำง่าย ๆ
สามารถดาวน์โหลด Code ทั้งหมดได้ที่นี่ Download
Go to : สร้าง Crystal Report บน Visual Studio (VB.NET , C#) Step by Step
Go to : สร้าง Parameter และ Formula Fields บน Crystal Reports (VB.NET,C#)
Go to : การสร้าง Crystal Report กับ DataSet หรือ DataTable (VB.NET,C#)
Go to : สร้าง Parameter และ Formula Fields บน Crystal Reports (VB.NET,C#)
Go to : ASP.NET ReportViewer - rsweb:ReportViewer
Go to : ASP.NET and CrystalReportViewer
Go to : การสร้าง Sub Report (Subreport) บน Crystal Report แบบ Step by Step (VB.NET /C#)
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
By : |
TC Admin
|
|
Score Rating : |
- |
|
Create Date : |
2012-10-11 08:14:23 |
|
Download : |
No files |
|
|
|
|
|
|
|