ایجاد گالری تصویر با DataList

[caspiansea]

سلام.من یک مجموعه تصویر دارم که توی بانک ذخیره شدن و میخوام توی یه DataList نشون داده بشن که بعد با کلیک بر روی هر تصویر یک صفحه جدید باز بشه.
خیلی روش کار کردم ولی نتونستم انجام بدم.ممنونم میشم کمک کنید

[mazoolagh]

سلام و روز خوش

پیش از هر چیز پیشنهاد میکنم با توجه به این که تصاویر به صورت باینری در دیتابیس ذخیره شدن،
از کمپوننت های مناسب این کار استفاده کنین چون مستقیما اجازه bind کردن به دیتا باینری رو به شما میدن؛
نمونه زیر رو ببینین:

DevExpress Image Slider - Binding to Binary Data

در دیتالیست شما باید یک کنترل img در تمپلیت بسازین و این کنترل هم فقط میتونین آدرس تصویر رو بهش بدین و به دیتا باینری بایند نمیشه (تا اونجا که میدونم).
گذشته از این دیتالیست خیلی خام هست، و برای کارکرد مناسب و شکل ظاهری زیبا باید زمان زیادی صرف کدنویسی (هر دو سمت سرور و کلاینت) و طراحی استایل کنین.

با این وجود، اگر هدف آموزش و یادگیری هست روش کار رو در پست های بعدی توضیح میدم (دست کم یکی از روشهای ممکن).

[mazoolagh]

بهتره مسئله رو به بخش های کوچکتر تقسیم و یکی یکی اونها رو حل کنیم.

اول باید یک روتین بنویسیم که تصویر رو از دیتابیس بخونه و اون رو به شکل یک url در بیاره تا بتونیم source در کنترل image ازش استفاده کنیم.

مشابه این روتین رو قبلا در تاپیک زیر آوردم (پست شماره 8):

create captcha text and save in session, captcha image as stream in C sharp

در این روش یک page میسازیم که content اون رو از نوع image تعریف میکنیم و محتوای تصویر رو بصورت یک استریم در اون مینویسیم.

روش همین هست با این تفاوت که اونجا تصویر بصورت رندوم در حافظه ساخته میشد، و اینجا نیاز هست یک تصویر معین بر اساس یک ID از دیتابیس خونده بشه.

فرض میکنیم تصاویر در یک جدول (Pictures) با فیلدهای ID, Description, PictureData ذخیره شدن.
این ID رو در querystring به صفحه میفرستیم و در page load کد زیر رو مینویسیم:

response.contenttype= "image/png"



DIM id AS LONG= request.querystring("ID")

USING conn AS SQLCONNECTION= new SQLCONNECTION(your connection string)

    conn.open()

    USING comm AS NEW SQLCOMMAND("SELECT PictureData FROM Pictures WHERE ID=@ID" , conn)

        comm.parameters.add("@ID" , sqldbtype.int).value= id

        USING rdr AS SQLDATAREADER= comm.executereader

            rdr.read

            DIM image AS BYTE()= rdr("PictureData")

            response.outputstream.write(image , 0 , image.length)

        END USING

    END USING

END USING

حالا اگر این صفحه رو فرضا به اسم GetImage.aspx ذخیره کرده باشیم، برای گرفتن تصویر با ID به شماره 123 کافی هست آدرس زیر رو وارد کنیم:

GetImage.aspx?ID=123

[mazoolagh]

در itemtemplate دیتالیست یک htmlcontrol از نوع img اضافه میکنیم.
حالا کافی هست آدرسی رو که برای گرفتن تصویر داریم به عنوان src این کنترل معرفی کنیم.

چون دیتالیست به یک sqldatasource بایند شده، به ID دسترسی داریم: Eval("ID")
پس کنترل img رو به شکل زیر مینویسیم:

<img src='<%# "GetImage.aspx?ID=" & Eval("ID") %>' />

[mazoolagh]

البته میتونیم به جای html control از کنترل سمت سرور هم استفاده کنیم:

<asp:image id="image" runat="server" imageurl='<%# "~/GetImage.aspx?ID=" & Eval("ID") %>'  />

اما تا زمانی که واقعا نیازی به رخدادها یا پراپرتی های سمت سرور نداشته باشیم توجیهی نداره.

[mazoolagh]

بخش آخر این بود که با کلیک روی عکس یک صفحه جدید باز بشه.
فرض کنیم یک صفه دیگه داریم به اسم ProductDetails.aspx که با گرفتن ID در querystring مشخصات محصولی که روی عکسش کلیک شده رو نمایش میده.

اول یک script مینویسیم که با گرفتن ID این صفحه رو باز کنه:

<script>

    function ShowDetails(ID) {

        window.open('ProductDetails.aspx?ID=' + ID);

    }

</script>

و شکل نهایی کنترل img به صورت زیر خواهد بود:

<img src='<%# "GetImage.aspx?ID=" & Eval("ID") %>' onclick='ShowDetails(<%#Eval("ID") %>)' />

همین!

[caspiansea]

سلام.بسیار هم عالی
مشکل حل شد