ฝันกลางวัน ตื่นกลางคืน

แก้ theme แล้วรู้สึกปลื้ม สีสดๆมันทำให้สดชื่นหัวแล่นปื๊ดๆจริงๆนั่นแหละ
ขอบคุณสำหรับ comment ตอนที่ 1 และ entry อื่นๆนะคะ ได้รู้ว่ามีคนอ่านก็ชื่นใจ อ่ะ ต่อๆ

Upload และแก้ไขรูป จาก GridView - ตอนที่ 2 เอารูปจาก Database มาโชว์กันหน่อย

ความรู้พื้นฐานที่ควรมีก่อนอ่าน: ASP.Net, SQL Server, VS2005

ตอนที่ 1 เอารูปเข้า db ได้แล้ว ตอนนี้ลองเอาออกมาดูกันมั่ง
ปกติเวลาโชว์รูปเราจะใช้ tag img แล้วก็ใส่ url ของรูปเข้าไปแบบนี้ <img src="http://www.-.com/a.jpg">
ทีนี้รูปมันอยู่ใน db ก็เลยต้องสร้างหน้าพิเศษขึ้นมาหน้านึงให้อ่านข้อมูลจาก db แล้วทำตัวเหมือนเป็นไฟล์รูปค่ะ ให้ชื่อหน้านี้ว่า FilePage.aspx ละกัน

ส่วนจะอ่านรูปไหนก็ใช้การส่งผ่าน ID ของรูปผ่าน url ให้ชื่อตัวแปรว่า id เวลาเรียกใช้จะได้ url หน้าตาแบบนี้ http://www.-.com?id=xyz 

ขั้นที่ 1 สร้าง FilePage.aspx แล้วเริ่มทำงาน

1.1 ไปที่ FilePage.aspx แล้วลบ code ในกรอบออก เพราะไม่จำเป็นต้องใช้ฟอร์ม และเป็นการป้องกันไม่ให้ code นี้ติดไปเป็นขยะท้ายไฟล์รูปด้วย

1.2 Select แล้ว Write
ใส่ codeใน FilePage.aspx.vb คำอธิบายอยู่ใน code แล้วค่ะ

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load

'Get ID from URL

Dim iID As Integer

Try

iID = CInt(Request("id")) Catch ex As Exception

'Handle Error Here

End Try

Dim bs As Byte()

Dim strSQL As String

Dim conn As SqlConnection

Dim cmd As SqlCommand

Dim rd As SqlDataReader

Try

'Select Query

strSQL = "SELECT [ImageFile] FROM TB_Image WHERE ID = " & iID

'Create Connection

conn = New SqlConnection( _ WebConfigurationManager.ConnectionStrings("ImageConnectionString").ConnectionString)

'Create Command

cmd = New SqlCommand(strSQL, conn)

'Select - We select only one file here so I use DataReader instead of DataSet

conn.Open()

rd = cmd.ExecuteReader()

If rd.Read() Then

If Not IsDBNull(rd("ImageFile")) Then

bs = rd("ImageFile")

End If

End If

Catch ex As Exception

'Handle Error Here

Finally

If Not conn Is Nothing Then

conn.Close()

conn = Nothing

End If

End Try

'Write Data to Output Stream

Try

If Not bs Is Nothing Then

'Tell Browser What kind of File is this

Response.ContentType = "image/jpeg"

'WRITE!!!

Response.BinaryWrite(bs)

Response.Flush()

'If you don't delete html form you must close stream here

'Response.Close()

End If

Catch ex As Exception

'Handle Error Here

End Try

End Sub

ขั้นที่ 2 จัดการกับ GridView
2.1 ลาก GridView มาวางในหน้า default.aspx ต่อจากของเดิม จะมีหน้าต่างให้ config. โผล่ขึ้นมา เราจะเริ่มตรงนี้

2.2 Config. 

 เลือก Specify ....

ใส่ Select Query เป็น

SELECT [ID], [Description] FROM TB_Image

ตอนนี้เราจะเอารูปออกมาโชว์เฉยๆ เพราะฉะนั้นใส่แต่ Query Select ก็พอ ไม่จำเป็นต้องใส่ Query อย่างอื่น กด Next ไปจนถึง Finish

จะได้ออกมาหน้าตาแบบนี้

2.3 เพิ่ม Field สำหรับโชว์ Image ใน GridView

เลือก Add New Column... แล้วกรอกค่าตามหน้าจอ

Property ที่จะใช้มี 2 อัน ให้ set ค่าตามนี้
Data field (DataImageUrlField) ==> ID
Url format String (DataImageUrlFormatString) ==> ./FilePage.aspx?id={0}

DataImageUrlField = Field ที่จะใช้โยงไปยัง Image ใน project นี้ก็คือ ID
DataImageUrlFormatString = Format ของ URL ที่โยงไปยัง Image, {0} หมายถึง ค่า ID จะถูกนำมาแทนค่าตรงนี้

กด OK เป็นอันเสร็จเรียบร้อย

*ถ้ารูปใหญ่ไป สามารถไปใส่ Width ใน ControlStyle ของ Image Field ได้ค่ะ

 

ขั้นที่ 3 แก้ Code เดิม
ตอนนี้เวลาใส่รูปเข้าไปเพิ่มจะไม่เห็นในหน้าจอทันที เพราะ GridView ไม่อัพเดต
ให้กลับไปใส่ code นี้ ท้าย code ที่ insert รูป

Me.GridView1.DataBind()

 

 

เสร็จแล้ว\(^o^)/

โหลด code ได้ตรงนี้ค่ะ

 

พบกันใหม่ตอน 3 เอ หรือจะอัพนิยายดี

ใครผ่านไปผ่านมาฝากต้นไม้ด้วยนะคะ