جستجو و highlight کردن نتایج در GridView

ASP.Net GridView کنترل بسیار قدرتمندی است که می تواند اطلاعات را با گزینه هایی مانند مرتب سازی و صفحه بندی نمایش دهد. “جستجو” یکی دیگر از امکاناتی است که اغلب GridView زمانی که شامل حجم زیادی داده است، نیاز دارد. به عنوان مثال، اگر مدیری بخواهد از طریق GridView ای که اطلاعات کارمندان را نمایش می دهد، اطلاعات شخصی را وارد کند که سوپروایزر می باشد، اگر کادر جستجویی در ستون نام کارمند وجود داشته باشد که او بتواند همان رکورد مشخص را پیدا کند، کارش راحت تر خواهد بود. در این مقاله پیاده سازی جستجوی نامتقارن و highlight کردن نتایج در GridView براساس هر ستون را توضیح می دهیم.
highlight کردن نتایج در GridView

منظور از جستجوی نامتقارن آپدیت کردن GridView با نتایج جستجو بدون reload کردن کل صفحه می باشد. بعد از اینکه مفهوم اولیه چگونگی پیاده سازی این ویژگی را یاد گرفتید، همچنین می توانید قابلیت جستجو در چند ستون را پیاده سازی نمایید.

برای این مثال از جدول mysql ای به نام “employee” و با ساختار زیر استفاده می کنیم.

Highlight-in-GridView-1

جدولی با ساختار بالا ایجاد می کنیم. این جدول لازم است چرا که ما قصد داریم قابلیت جستجو را روی ستون “name” این جدول فعال کنیم.

تمام محتوای صفحه .aspx را پاک کرده و کد زیر را در آن می نویسیم.

 در کد HTML بالا، از عنصر style برای اضافه کردن یک سری کد CSS برای highlight کردن عبارت جستجو شده در نتایج جستجو استفاده کردیم.

یک کنترل ScriptManager و UpdatePanel برای پیاده سازی Ajax در پیاده سازی جستجو اضافه می کنیم. توجه داشته باشید که GridView درون کنترل UpdateControl قرار می گیرد تا مطمئن باشیم که هر زمان کاربر روی دکمه جستجو کلیک کرد، تنها gridView در صفحه reload شود نه کل صفحه.
در GridView

یک lable برای نمایش پیغام هشدار برای زمانی که هیچ موردی برای عبارت جستجوشده یافت نشود، وجود دارد.

یک قالب footer، که معمولا شامل یک textbox، یک دکمه برای جستجو می باشد که وقتی کلیک شود، رویداد row_command مربوط به GridView را اجرا می کند و یک دکمه Back که به کاربر کمک می کند تا به صفحه اصلی نتایج برگردد (در حالت اولیه بارگزاری صفحه پنهان است و با نمایش دادن نتایج جستجو ظاهر می شود.)

یک قالب Item، که مقدار ستون name را به عنوان lable نمایش می دهد، زمانی که مقداری در ستون name نمایش داده شود، این آیتم مقادیر را در کادر جستجو بررسی می کند تا عبارت جستجو شده را در صورت وجود Highlight کند.

در نهایت، یک کنترل UpdateProgress برای نمایش پیشرفت عملیات جستجو اضافه می کنیم.

در قسمت code-behind فضای نام های زیر را اضافه می کنیم.

 کدهای زیر را در قسمت code-behind می نویسیم:

 ترتیب اجرای کد و توضیح کدهای بالا:

ابتدا، ما GridView را با داده های آن در رویداد Page_Load بارگزاری می کنیم.

زمانی که کاربر روی دکمه جستجو در GridView کلیک می کند، رویداد row_Command مربوط به GridView اجرا می شود.

رویداد row_command نام دستور (CommandName) را که در این مثال “Search” می باشد بررسی می کند و اگر کاربر روی دکمه جستجو کلیک کرده باشد، متد SearchText() را فراخوانی می کند.

متد SearchText() درواقع وظیفه جستجو کردن را به عهدده دارد، این متد از RowFilter برای فیلتر کردن نتایج بر اساس ستون name استفاده می کند.

متد Highlight() وظیفه Highlight کردن متن را به عهده دارد. این متد با استفاده از Regular Expression مقدار درون کادر جستجو را با هر یک از رکوردهای GridView مطابقت می دهد و نتایج را با استفاده از کلاس Css که در صفحه .aspx استفاده شده، به رنگ زرد درمی آورد.

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

جستجو و highlight کردن نتایج در GridView
5 (100%) 3 رایs

(416 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

2 افکار در “جستجو و highlight کردن نتایج در GridView

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *