bomb23
چهارشنبه 02 مرداد 1392, 16:10 عصر
برای شروع کار ابتدا یک GridView در صفحه aspx قرار داده و آن را Bind نمایید ، وقتی صفحه را در مرورگر مشاهده کنید باید تمامی سطر ها وستون های جدول شما در کنترل GridView نمایش داده شود .
معمولا اولین چیزی که مورد نیاز است ، کم و زیاد کردن ستون های GridView و تغییر نام آن ها است ، این کار بسیار ساده است کافیست روی مثلث کوچک فوقانی کنترل GridView کلیک کرده و گزینه Edit Columns را انتخاب کنید (یا وارد Properties این کنترل شده و سپس بخش Columns را انتخاب نمایید) :
http://ciba.netau.net/up/d9766a69b764.jpg
پنجره ای مشابه پنجره فوق برای شما گشوده خواهد شد ، قبل از هرچیز گزینه Auto-Geneate Fields را بدون علامت کنید (این کار باعث می شود همه ستون ها به صورت خودکار نمایش داده نشوند) ، سپس گزینه BoundField را از جعبه بالا سمت چپ (Available Fields) انتخاب کرده و دکمه Add را بفشارید تا یک BoundField به بخش Selected Fields اضافه گردد (در مورد Template Field هم به وفور بحث خواهیم کرد ، سایر فیلد ها کاربرد زیادی ندارند) ، اکنون BoundField اضافه شده در Selected Fields را انتخاب کرده تا Property ها در سمت راست ظاهر شوند .
برای تنظیم نام ستون خاصیت Header text را وارد نمایید (در این بخش هر نام دلخواهی میتوانید وارد کنید) ، برای اتصال این فیلد به ستون مورد نظر در بانک اطلاعاتی خاصیت DataField را تنظیم کنید ، دقت نمایید که نامی که در این بخش وارد می کنید باید با نام فیلد شما در جدول بانک اطلاعاتی یکسان باشد ، سپس به همین صورت سایر ستون های مورد نظر را نیز اضافه نموده و دکمه OK را کلیک نمایید ، اکنون GridView فقط ستون های مورد نظر شما را نمایش خواهد داد .
کنترل GridView تنظیمات زیادی برای تغییر ظاهر دارد ، میتوانید این تنظیم را در Properties و سپس Styles تغییر دهید ، همچنین میتوانید از فرمت های آماده نیز استفاده کنید برای اینکار روی مثلث کنار GridView کلیک کرده و گزینه Auto Format را انتخاب کرده و از بین فرمت های آماده یکی را برگزینید .
هنگامی که هیچ رکوردی در جدول بانک اطلاعاتی شما وجود نداشته باشد GridView نمایش داده نخواهد شد ، میتوانیم متنی جهت اطلاعات کاربر از وجود نداشتن اطلاعات نمایش دهیم ، برای اینکار روی GridView کلیک راست کرده گزینه Edit Template و سپس EmptyData Template را انتخاب کنید
ا این عمل GridView تغییر حالت داده و یک فضا در اختیار شما قرار داده می شود ، شما میتوانید در این فضا متن مورد نظر یا هر عنصر دیگری را قرار دهید :
http://ciba.netau.net/up/01e5bacd6657.jpg
سپس دوباره روی GridView در همین حالت کلیک راست کرده و گزینه End Template Editing را انتخاب کنید تا GridView به حالت اولیه خود بازگردد ، از این پس در صورت خالی بودن GridView متن فوق نمایش داده خواهد شد .
همانطور که تا کنون متوجه شده اید GridView اطلاعات را به صورت سطری و ستونی همانند یک جدول نمایش می دهد ، ولی آیا میتوان نحوه نمایش را به صورت دیگری نیز تغییر داد ؟
جواب مثبت است ، این کنترل قابلیت های زیادی داشته و میتوان از آن برای نمایش اطلاعات به اشکال گوناگون استفاده کرد ، برای روشن شدن مطلب به چند مثال زیر توجه کنید :
1- در صفحه اول همین سایت برای نمایش آخرین مقالات (سمت چپ صفحه) از کنترل GridView استفاده شده ، همانطور که میبینید نحوه نمایش به صورت جدولی (سطری و ستونی ) نمی باشد
2- وبلاگ ها : برای نمایش مطالب درج شده در وبلاگ ها که به صورت زیر هم نمایش داده می شوند هم میتوان از GridView استفاده کرد
3- فروم ها : برای نمایش مطالب درج شده در تاپیک های تالار های گفتگو نیز میتوانید از Gridview استفاده کنید .
و...
اکنون سوال اینجاست که به چه صورت GridView به این شکل تبدیل شده اند ؟
این کار به وسیله Template Fields انجام می شود ، یعنی به جای Bound Field (که در ابتدای مقاله با آن آشنا شدیم) از Template Field استفاده می کنیم .
برای این منظور یک GridView جدید به صفحه اضافه کنید و آنرا Bind نمایید ، سپس وارد Edit Columns شده و این بار از بخش Available Fields یک Template Field اضافه نموده سپس Header Text آن را تنظیم نمایید ، همانطور که ملاحظه می کنید Template Field خاصیتی به نام DataField ندارد ( ستون از طریق کلیدواژه Eval که در زیر با آن آشنا خواهیم شد به فیلد منتاظر در جدول بانک اطلاعاتی متصل خواهد شد )
سپس دکمه OK را کلیک نمایید ، اکنون باید Template خود را ایجاد کنید ، برای همین روی GridView کلیک راست کرده و گزینه Edit Template و سپس فیلد مربوطه را انتخاب کنید
با انتخاب این گزینه GridView تغییر حالت داده و 5 فضا به شما داده می شود که فعلا فقط Item Template را بررسی خواهیم کرد ، نکته جالب اینجاست که شما میتوانید هر عنصر دلخواهی داخل این فضا (که به آن Template می گوییم) قرار دهید مثلا یک جدول ، Label ، یک DropDownList و ....
قصد دارم چیزی شبیه صفحه اول همین سایت را شبیه سازی کنم ، برای این منظور ابتدا یک Table با عرض 100% داخل این فضا ایجاد می کنم با 1 ستون و دو سطر ، سپس در سطر اول یک Label و در سطر دوم هم یک Label دیگر قرار می دهم ، روی مثلث Label بالایی کلیک کرده و گزینه Edit Data Bindings را انتخاب نمایید ، سپس در پنجره بازشده از سمت چپ خاصیت Text را انتخاب کرده و در سمت راست در قسمت Code Expression کد زیر را وارد کرده و دکمه OK را بفشارید (به این عمل بایند کردن یک کنترل در GridView می گوییم) :
Eval("YourFieldName")
البته دقت کنید به جای YourFieldName باید نام فیلد مورد نظر در جدول بانک اطلاعاتی خودتان را بنویسید ، ما توسط این روش به GridView می گوییم که مقادیر موجود در فیلد مورد نظر در بانک اطلاعاتی را در خاصیت Text کنترل Label قرار دهد
http://ciba.netau.net/up/efb80f630cce.jpg
این عمل را برای Label پایینی هم انجام دهید و آنرا نیز به یکی دیگر از فیلدهای بانک اطلاعاتی بایند کنید ، سپس روی Gridview کلیک راست کرده و گزینه End Template Editing را کلیک نمایید
اگر مایل هستید که متن Header نمایش داده نشود روی GridView کلیک راست نموده گزینه Properties را انتخاب کرده و سپس گزینه ShowHeader در قسمت Appearance را False نمایید ، همچنین برای از بین بردن خط دور هر رکورد گزینه BorderWidth را 0 وارد نمایید .
همچنین برای اینکه بین هر رکورد فاصله داشته باشیم هم به سراغ CellSpacing و CellPading در قسمت Layout همین پنجره (properties) بروید ، با افزایش مقادیر نام برده شاهده افزایش فاصله رکورد ها خواهید بود ، اگر بخواهید GridView کل فضا را پوشش دهد یعنی 100% صفحه باشد میتوانید خاصیت Width آن را برابر 100% قرار دهید.
همانطور که ملاحظه می کنید نحوه نمایش GridView کامل تغییر کرد ، شما میتوانید با همین روش به شکل دلخواه اطلاعات را نمایش دهید .
معمولا اولین چیزی که مورد نیاز است ، کم و زیاد کردن ستون های GridView و تغییر نام آن ها است ، این کار بسیار ساده است کافیست روی مثلث کوچک فوقانی کنترل GridView کلیک کرده و گزینه Edit Columns را انتخاب کنید (یا وارد Properties این کنترل شده و سپس بخش Columns را انتخاب نمایید) :
http://ciba.netau.net/up/d9766a69b764.jpg
پنجره ای مشابه پنجره فوق برای شما گشوده خواهد شد ، قبل از هرچیز گزینه Auto-Geneate Fields را بدون علامت کنید (این کار باعث می شود همه ستون ها به صورت خودکار نمایش داده نشوند) ، سپس گزینه BoundField را از جعبه بالا سمت چپ (Available Fields) انتخاب کرده و دکمه Add را بفشارید تا یک BoundField به بخش Selected Fields اضافه گردد (در مورد Template Field هم به وفور بحث خواهیم کرد ، سایر فیلد ها کاربرد زیادی ندارند) ، اکنون BoundField اضافه شده در Selected Fields را انتخاب کرده تا Property ها در سمت راست ظاهر شوند .
برای تنظیم نام ستون خاصیت Header text را وارد نمایید (در این بخش هر نام دلخواهی میتوانید وارد کنید) ، برای اتصال این فیلد به ستون مورد نظر در بانک اطلاعاتی خاصیت DataField را تنظیم کنید ، دقت نمایید که نامی که در این بخش وارد می کنید باید با نام فیلد شما در جدول بانک اطلاعاتی یکسان باشد ، سپس به همین صورت سایر ستون های مورد نظر را نیز اضافه نموده و دکمه OK را کلیک نمایید ، اکنون GridView فقط ستون های مورد نظر شما را نمایش خواهد داد .
کنترل GridView تنظیمات زیادی برای تغییر ظاهر دارد ، میتوانید این تنظیم را در Properties و سپس Styles تغییر دهید ، همچنین میتوانید از فرمت های آماده نیز استفاده کنید برای اینکار روی مثلث کنار GridView کلیک کرده و گزینه Auto Format را انتخاب کرده و از بین فرمت های آماده یکی را برگزینید .
هنگامی که هیچ رکوردی در جدول بانک اطلاعاتی شما وجود نداشته باشد GridView نمایش داده نخواهد شد ، میتوانیم متنی جهت اطلاعات کاربر از وجود نداشتن اطلاعات نمایش دهیم ، برای اینکار روی GridView کلیک راست کرده گزینه Edit Template و سپس EmptyData Template را انتخاب کنید
ا این عمل GridView تغییر حالت داده و یک فضا در اختیار شما قرار داده می شود ، شما میتوانید در این فضا متن مورد نظر یا هر عنصر دیگری را قرار دهید :
http://ciba.netau.net/up/01e5bacd6657.jpg
سپس دوباره روی GridView در همین حالت کلیک راست کرده و گزینه End Template Editing را انتخاب کنید تا GridView به حالت اولیه خود بازگردد ، از این پس در صورت خالی بودن GridView متن فوق نمایش داده خواهد شد .
همانطور که تا کنون متوجه شده اید GridView اطلاعات را به صورت سطری و ستونی همانند یک جدول نمایش می دهد ، ولی آیا میتوان نحوه نمایش را به صورت دیگری نیز تغییر داد ؟
جواب مثبت است ، این کنترل قابلیت های زیادی داشته و میتوان از آن برای نمایش اطلاعات به اشکال گوناگون استفاده کرد ، برای روشن شدن مطلب به چند مثال زیر توجه کنید :
1- در صفحه اول همین سایت برای نمایش آخرین مقالات (سمت چپ صفحه) از کنترل GridView استفاده شده ، همانطور که میبینید نحوه نمایش به صورت جدولی (سطری و ستونی ) نمی باشد
2- وبلاگ ها : برای نمایش مطالب درج شده در وبلاگ ها که به صورت زیر هم نمایش داده می شوند هم میتوان از GridView استفاده کرد
3- فروم ها : برای نمایش مطالب درج شده در تاپیک های تالار های گفتگو نیز میتوانید از Gridview استفاده کنید .
و...
اکنون سوال اینجاست که به چه صورت GridView به این شکل تبدیل شده اند ؟
این کار به وسیله Template Fields انجام می شود ، یعنی به جای Bound Field (که در ابتدای مقاله با آن آشنا شدیم) از Template Field استفاده می کنیم .
برای این منظور یک GridView جدید به صفحه اضافه کنید و آنرا Bind نمایید ، سپس وارد Edit Columns شده و این بار از بخش Available Fields یک Template Field اضافه نموده سپس Header Text آن را تنظیم نمایید ، همانطور که ملاحظه می کنید Template Field خاصیتی به نام DataField ندارد ( ستون از طریق کلیدواژه Eval که در زیر با آن آشنا خواهیم شد به فیلد منتاظر در جدول بانک اطلاعاتی متصل خواهد شد )
سپس دکمه OK را کلیک نمایید ، اکنون باید Template خود را ایجاد کنید ، برای همین روی GridView کلیک راست کرده و گزینه Edit Template و سپس فیلد مربوطه را انتخاب کنید
با انتخاب این گزینه GridView تغییر حالت داده و 5 فضا به شما داده می شود که فعلا فقط Item Template را بررسی خواهیم کرد ، نکته جالب اینجاست که شما میتوانید هر عنصر دلخواهی داخل این فضا (که به آن Template می گوییم) قرار دهید مثلا یک جدول ، Label ، یک DropDownList و ....
قصد دارم چیزی شبیه صفحه اول همین سایت را شبیه سازی کنم ، برای این منظور ابتدا یک Table با عرض 100% داخل این فضا ایجاد می کنم با 1 ستون و دو سطر ، سپس در سطر اول یک Label و در سطر دوم هم یک Label دیگر قرار می دهم ، روی مثلث Label بالایی کلیک کرده و گزینه Edit Data Bindings را انتخاب نمایید ، سپس در پنجره بازشده از سمت چپ خاصیت Text را انتخاب کرده و در سمت راست در قسمت Code Expression کد زیر را وارد کرده و دکمه OK را بفشارید (به این عمل بایند کردن یک کنترل در GridView می گوییم) :
Eval("YourFieldName")
البته دقت کنید به جای YourFieldName باید نام فیلد مورد نظر در جدول بانک اطلاعاتی خودتان را بنویسید ، ما توسط این روش به GridView می گوییم که مقادیر موجود در فیلد مورد نظر در بانک اطلاعاتی را در خاصیت Text کنترل Label قرار دهد
http://ciba.netau.net/up/efb80f630cce.jpg
این عمل را برای Label پایینی هم انجام دهید و آنرا نیز به یکی دیگر از فیلدهای بانک اطلاعاتی بایند کنید ، سپس روی Gridview کلیک راست کرده و گزینه End Template Editing را کلیک نمایید
اگر مایل هستید که متن Header نمایش داده نشود روی GridView کلیک راست نموده گزینه Properties را انتخاب کرده و سپس گزینه ShowHeader در قسمت Appearance را False نمایید ، همچنین برای از بین بردن خط دور هر رکورد گزینه BorderWidth را 0 وارد نمایید .
همچنین برای اینکه بین هر رکورد فاصله داشته باشیم هم به سراغ CellSpacing و CellPading در قسمت Layout همین پنجره (properties) بروید ، با افزایش مقادیر نام برده شاهده افزایش فاصله رکورد ها خواهید بود ، اگر بخواهید GridView کل فضا را پوشش دهد یعنی 100% صفحه باشد میتوانید خاصیت Width آن را برابر 100% قرار دهید.
همانطور که ملاحظه می کنید نحوه نمایش GridView کامل تغییر کرد ، شما میتوانید با همین روش به شکل دلخواه اطلاعات را نمایش دهید .