نشان دادن تصاویر در DataGrid بر اساس داده‌های پایگاه داده

idevcenter

کنترل DataGrid پیچیده‌ترین کنترلی است که در ASP.NET وجود دارد. با استفاده از DataGrid امکان فرمت دهی و نمایش٬ مرتب سازی و صفحه بندی رکوردهای جداول بانک اطلاعاتی فراهم می شود. در اینجا میخواهیم با استفاده از قابلیتهای این کنترل روشی را برای نشان دادن تصاویر در آن بررسی کنیم. هر کدام از این تصاویر قرار است در رکورد مربوط به خود در کنترل DataGrid نمایش داده شوند. هر رکورد داده های دیگری را نیز شامل می شود که همه آنها در جدول products واقع در پایگاه داده products.mdb قرار دارند. هر رکورد شامل ستونی به نام ImageName (از نوع داده Text) میباشد که نام تصویر مربوط به رکورد را شامل میشود.

تعریف ستون برای کنترل DataGrid
وقتی که یک منبع داده مانند یک DataSet را به کنترل DataGrid مقید میکنیم٬ خود کنترل همه کارها را انجام میدهد و همه رکوردها را به طور اتوماتیک نمایش میدهد. ولی اگر بخواهیم ستونهای کنترل DataGrid را تحت کنترل خود درآورده و فقط ستونهای دلخواه را نمایش دهیم باید خودمان برای کنترل DataGrid ستون تعریف کنیم. قبل از اینکه بتوانیم ستونی را برای DataGrid تعریف کنیم٬ لازم است که خصوصیت AutoGenerateColumns آنرا برابر False قرار دهیم. پس از انجام این کار میتوانیم شروع به تعریف ستون برای کنترل DataGrid نماییم. کنترل DataGrid پنج نوع ستون را می شناسد که عبارتند از:
BoundColumn: نوع پیش فرض ستونها که رکوردها را نمایش میدهد.
HyperLinkColumn: که رکوردها را به صورت یک Hyperlink نمایش میدهد.
TemplateColumn: که رکوردها را با استفاده از یک الگوی مشخص نمایش میدهد.
ButtonColumn: که کنترلهایی از نوع Button را نمایش میدهد.
EditCommandButton: که فرامین ویرایش همانند Edit ،Update و Cancel را نمایش میدهد.
در نمونه کدی که همراه مقاله میتوانید آنرا دریافت کنید٬ کنترل DataGrid را به صورت زیر تعریف کرده‌ایم:

BorderColor="Black"Font-Size="10" Font-Name="Arial" BackColor="#C6C3FF"
Headerstyle-Font-Size="12" Headerstyle-Font-Bold="True"
Headerstyle-Font-Name="Arial" Headerstyle-Forecolor="#0F0F0F"
Headerstyle-BackColor="#8482C6" cellspacing="0" cellpadding="0">

DataField="ProdName" HeaderText="ProdName" />

Images

در کدهای مربوط به کنترل DataGrid سه ستون برای آن تعریف شده است. ستون اول از نوع BoundColumn، ستون دوم از نوع TemplateColumn و ستون سوم هم دوباره از نوع BoundColumn تعریف شده‌اند. در ستونهایی که از نوع BoundColumn می باشند٬ انتساب نام فیلد جدول بانک اطلاعاتی به خصوصیت DataField ستون٬ برای نمایش دادن داده‌های آن فیلد در ستون DataGrid کافی میباشد.

تعریف ستون TemplateColumn برای کنترل DataGrid
وقتی که میخواهیم اختیارات بیشتری را در تعیین فرمت یک ستون داشته باشیم از الگوی TemplateColumn استفاده میکنیم. ستونی که از نوع TemplateColumn برای کنترل DataGrid تعریف میشود٬ میتواند الگوهای زیر را داشته باشد:

HeaderTemplate: تعیین کننده فرمت متنی است که در بالای ستون نمایش داده میشود.
ItemTemplate: تعیین کننده فرمت آیتم‌های اصلی ستون میباشد.
EditItemTemplate: تعیین کننده فرمت آیتمی است که به قصد ویرایش انتخاب شده است.
FooterTemplate: تعیین کننده فرمت آیتمی است که پایین ستون نمایش داده میشود.
در کد مربوط به تعریف کنترل DataGrid از دو الگوی HeaderTemplate و ItemTemplate استفاده شده است. در داخل HeaderTemplate کلمه Images نوشته شده است که موقع اجرا در بالای ستون نمایش داده میشود. کار اصلی برای نمایش تصاویر در داخل الگوی ItemTemplate انجام شده است. در اینجا با کدهای HTMLی که در زیر دوباره آنها را مشاهده میکنید توانسته‌ایم تصاویر مربوط به رکوردها را نمایش دهیم.

در اینجا با استفاده از تگ تصاویر را از داخل پوشه prodimages نمایش داده ایم. نام تصاویر با استفاده از عبارت <%# Container.DataItem("ImageName") %> تعیین شده است که مقدار ستون ImageName برای هر رکورد را بازمیگرداند.

تمام کد مربوط به صفحه و همچنین پایگاه داده products.mdb را می توانید همراه مقاله دریافت نمایید.

نمره دهید

	1	2	3	4	5

ميانگين امتیاز 3.6 از 5


1	2	3	4	5

30 نفر نمره داده اند

خــانه

کاریابی

جویای کار

متخصصین

نیازمندیها

مشاغل

تالارهای علمی

سورس کد

اخبار

اعضا

نشان دادن تصاویر در DataGrid بر اساس داده‌های پایگاه داده