ASP.Net GridView کنترل بسیار قدرتمندی است که می تواند اطلاعات را با گزینه هایی مانند مرتب سازی و صفحه بندی نمایش دهد. “جستجو” یکی دیگر از امکاناتی است که اغلب GridView زمانی که شامل حجم زیادی داده است، نیاز دارد. به عنوان مثال، اگر مدیری بخواهد از طریق GridView ای که اطلاعات کارمندان را نمایش می دهد، اطلاعات شخصی را وارد کند که سوپروایزر می باشد، اگر کادر جستجویی در ستون نام کارمند وجود داشته باشد که او بتواند همان رکورد مشخص را پیدا کند، کارش راحت تر خواهد بود. در این مقاله پیاده سازی جستجوی نامتقارن و highlight کردن نتایج در GridView براساس هر ستون را توضیح می دهیم.
highlight کردن نتایج در GridView
منظور از جستجوی نامتقارن آپدیت کردن GridView با نتایج جستجو بدون reload کردن کل صفحه می باشد. بعد از اینکه مفهوم اولیه چگونگی پیاده سازی این ویژگی را یاد گرفتید، همچنین می توانید قابلیت جستجو در چند ستون را پیاده سازی نمایید.
برای این مثال از جدول mysql ای به نام “employee” و با ساختار زیر استفاده می کنیم.
جدولی با ساختار بالا ایجاد می کنیم. این جدول لازم است چرا که ما قصد داریم قابلیت جستجو را روی ستون “name” این جدول فعال کنیم.
تمام محتوای صفحه .aspx را پاک کرده و کد زیر را در آن می نویسیم.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX Search & Highlight in GridView</title>
<style type="text/css">
.highlight
{
text-decoration:none;
font-weight:bold;
color:black;
background:yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>AJAX Search & Highlight in GridView</h1>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="lblAlert" runat="server" Visible="false" Text="There are no results matching your search input. Please try again with different input"></asp:Label>
<asp:GridView ID="grdToSearch" runat="server"
BackColor="white" BorderColor="Aqua"
AutoGenerateColumns="false" ShowFooter="true"
OnRowCommand="grdToSearch_RowCommand">
<FooterStyle BackColor="DarkOrange"
ForeColor="AntiqueWhite" />
<PagerStyle BackColor="#99CCCC"
ForeColor="#003399" HorizontalAlign="Left" />
<HeaderStyle BackColor="DarkOrange"
Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="id"
HeaderText="ID" />
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblFIrstName" runat="server" Text='<%# Highlight(Eval("name").ToString()) %>'>
</asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="txtSearch" runat="server"
Width="70px"></asp:TextBox>
<asp:Button ID="btnSearch"
CommandName="Search"
runat="server" Text="Search"
Width="60px" />
<asp:Button ID="btnBack"
CommandName="Back"
runat="server" Text="Back" Visible="false"
Width="60px" />
</FooterTemplate>
</asp:TemplateField>
<asp:BoundField DataField="designation"
HeaderText="Designation" />
<asp:BoundField DataField="salary"
HeaderText="Salary" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<img src="Images/ajax-loading.gif" alt="Searching.. Please wait!"/>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
در کد 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 فضای نام های زیر را اضافه می کنیم.
Using System.Data; Using System.Text.RegularExpressions;
کدهای زیر را در قسمت code-behind می نویسیم:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Load gridview with data on page load
BindGrid();
}
}
private DataTable GetRecords()
{
try
{
//Fetch data from mysql database
MySqlConnection conn = new MySqlConnection("server=localhost;uid=root;password=priya123;database=test; pooling=false;");
conn.Open();
string cmd = "select * from employee";
MySqlDataAdapter dAdapter = new MySqlDataAdapter(cmd,conn);
DataSet objDs = new DataSet();
dAdapter.Fill(objDs);
return objDs.Tables[0];
}
catch (MySqlException ex)
{
System.Console.Error.Write(ex.Message);
return null;
}
}
private void BindGrid()
{
//Fetch data from mysql database
DataTable dt = GetRecords();
//Bind the fetched data to gridview
grdToSearch.DataSource = dt;
grdToSearch.DataBind();
}
private void SearchText(string strSearchText)
{
lblAlert.Visible = false;
DataTable dt = GetRecords();
DataView dv = new DataView(dt);
string SearchExpression = null;
if (!String.IsNullOrEmpty(strSearchText))
{
SearchExpression = string.Format("{0} '%{1}%'",
grdToSearch.SortExpression, strSearchText);
}
dv.RowFilter = "name like" + SearchExpression;
if (dv.Count > 0)
{
grdToSearch.DataSource = dv;
grdToSearch.DataBind();
// Enable button that allow users to get back to the main gridview
Button backbutton = (Button)grdToSearch.FooterRow.FindControl("btnBack");
backbutton.Visible = true;
}
else
{
//Display alert message when there are no matching search results
lblAlert.Visible = true;
}
}
protected void grdToSearch_RowCommand(object sender, GridViewCommandEventArgs e)
{
System.Threading.Thread.Sleep(2000);
if (e.CommandName == "Search")
{
TextBox txtGrid = (TextBox)grdToSearch.FooterRow.FindControl("txtSearch");
SearchText(txtGrid.Text);
}
else if (e.CommandName == "Back")
{
BindGrid();
}
}
public string Highlight(string InputTxt)
{
GridViewRow gvr = grdToSearch.FooterRow;
if (gvr != null)
{
TextBox txtExample = (TextBox)grdToSearch.FooterRow.FindControl("txtSearch");
if (txtExample.Text != null)
{
string strSearch = txtExample.Text;
// Setup the regular expression
Regex RegExp = new Regex(strSearch.Replace(" ", "|").Trim(),
RegexOptions.IgnoreCase);
//Highlight keywords by calling the delegate
//each time a keyword is found.
return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords));
}
else
return InputTxt;
}
else
{
return InputTxt;
}
}
public string ReplaceKeyWords(Match m)
{
return "<span class="highlight">" + m.Value + "</span>";
}
}
ترتیب اجرای کد و توضیح کدهای بالا:
ابتدا، ما GridView را با داده های آن در رویداد Page_Load بارگزاری می کنیم.
زمانی که کاربر روی دکمه جستجو در GridView کلیک می کند، رویداد row_Command مربوط به GridView اجرا می شود.
رویداد row_command نام دستور (CommandName) را که در این مثال “Search” می باشد بررسی می کند و اگر کاربر روی دکمه جستجو کلیک کرده باشد، متد SearchText() را فراخوانی می کند.
متد SearchText() درواقع وظیفه جستجو کردن را به عهدده دارد، این متد از RowFilter برای فیلتر کردن نتایج بر اساس ستون name استفاده می کند.
متد Highlight() وظیفه Highlight کردن متن را به عهده دارد. این متد با استفاده از Regular Expression مقدار درون کادر جستجو را با هر یک از رکوردهای GridView مطابقت می دهد و نتایج را با استفاده از کلاس Css که در صفحه .aspx استفاده شده، به رنگ زرد درمی آورد.
به این ترتیب جستجو در GridView پیاده سازی می شود و می توانیم برنامه را ا جرا کنیم.
موفق باشید !
دیدگاه‌ها