Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Highlight Search Result in ASP.NET Using AJAX

Article:
Viewed:  2557 
Posted On:  24/07/2013 13:45:29 
How we can make highlight search keyword in search result in ASP.NET...? 

In this article I am going to show how we can make highlight search result in asp.net using AJAX. First I am showing all records in a Grid View. After searching record by name, I am highlighted search keyword in search results.

Below is the output:

Showing Records In Grid View.png

Image 1.

When we type ra and click on search button then..

Search Result Highlighted.png

Image 2.

Search result with highlighted search keyword.

My aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Highlight Search Result In ASP.NET GridView Using AJAX</title>
    <style type="text/css">
        .Makehighlight
        {
            text-decorationnone;
            font-weightbold;
           
colorblack;
            background#FF2400;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table cellpadding="4" cellspacing="4" width="50%" align="center" style="bordersolid 1px #F5F5F5;
                    background-color#98AFC7;">
                    <tr>
                        <td align="center">
                            <asp:Label ID="lblErrorMsg" runat="server" Visible="false"></asp:Label>
                            <asp:GridView ID="GridEmployee" runat="server" AutoGenerateColumns="False" ShowFooter="True"
                                OnRowCommand="GridEmployee_RowCommand" CellPadding="4" ForeColor="#333333" GridLines="None">
                                <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                                <HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                                <Columns>
                                    <asp:TemplateField HeaderText="Employee No" HeaderStyle-HorizontalAlign="Center"
                                        ItemStyle-HorizontalAlign="Center">
                                        <ItemTemplate>
                                            <asp:Label ID="lblEmployeeNo" runat="server" Text='<%# Eval("EmployeeNo").ToString() %>'>
                                            </asp:Label>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            <asp:Label ID="lblSerach" runat="server" Text="Name To Search:"></asp:Label>
                                        </FooterTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Name" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
                                        <ItemTemplate>
                                            <asp:Label ID="lblFIrstName" runat="server" Text='<%# Highlight(Eval("name").ToString()) %>'>
                                            </asp:Label>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            <asp:TextBox ID="txtSearch" runat="server" Width="100px"></asp:TextBox>
                                            <asp:Button ID="btnSearch" CommandName="Search" runat="server" Text="Search" Width="70px" />
                                            <asp:Button ID="btnBack" CommandName="Back" runat="server" Text="Back" Visible="false"
                                                Width="60px" />
                                        </FooterTemplate>
                                    </asp:TemplateField>  
                                  
<asp:BoundField DataField="EmployeeCode" HeaderText="EmployeeCode" />
                                    <asp:BoundField DataField="Country" HeaderText="Country" />
                                </Columns>
                                <EditRowStyle BackColor="#999999" />
                                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            </asp:GridView>
                        </td>

                    
</tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
 
aspx.cs is:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text.RegularExpressions;
using System.Data.Sql;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
    SqlDataAdapter da;
    DataSet ds = new DataSet();
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGrid();
        }
     } 

    private void BindGrid()
    {
        SqlConnection con = new SqlConnection(@"server=.;Initial Catalog=Test;Integrated Security=True;");
        SqlCommand cmd = new SqlCommand("SELECT  * FROM Employee", con);
         try
        {
            da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close(); 

            if (!object.Equals(ds.Tables[0], null))
            {
                if (ds.Tables[0].Rows.Count > 0)
                {
                    Session["EmpData"] = ds.Tables[0];
                    GridEmployee.DataSource = ds.Tables[0];
                    GridEmployee.DataBind();
                }
                else
                {
                    GridEmployee.DataSource = null;
                    GridEmployee.DataBind();
                }
            }
            else
            {
                GridEmployee.DataSource = null;
                GridEmployee.DataBind();
            }
        }
        catch (Exception ex)
        {
        }
    }
 
    private void SearchText(string strSearchText)
    {
        lblErrorMsg.Visible = false;
        DataTable dt = (DataTable)Session["EmpData"];
        DataView dv = new DataView(dt);
        string SearchExpression = null;
        if (!String.IsNullOrEmpty(strSearchText))
        {
            SearchExpression = string.Format("{0} '%{1}%'",
            GridEmployee.SortExpression, strSearchText);
 
        }
        dv.RowFilter = "name like" + SearchExpression;
        if (dv.Count > 0)
        {
            GridEmployee.DataSource = dv;
            GridEmployee.DataBind();
 
            Button backbutton = (Button)GridEmployee.FooterRow.FindControl("btnBack");
            backbutton.Visible = true;
        }
        else
        {
            lblErrorMsg.Visible = true;
            lblErrorMsg.Text = "There is no Result";
        }
    }
 
    protected void GridEmployee_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        if (e.CommandName == "Search")
        {
            TextBox txtGrid = (TextBox)GridEmployee.FooterRow.FindControl("txtSearch");
            SearchText(txtGrid.Text);
        }
        else if (e.CommandName == "Back")
        {
            BindGrid();
        }
    }
 
    public string Highlight(string InputTxt)
    {
        GridViewRow gvr = GridEmployee.FooterRow;
        if (gvr != null)
        {
            TextBox txtExample = (TextBox)GridEmployee.FooterRow.FindControl("txtSearch");
 
            if (txtExample.Text != null)
            {
                string strSearch = txtExample.Text;
                Regex RegExp = new Regex(strSearch.Replace(" ""|").Trim(),
                               RegexOptions.IgnoreCase);
                return RegExp.Replace(InputTxt, new MatchEvaluator(MakeHighlightKeyWords));
            }
            else
                return InputTxt;
        }
        else
        {
            return InputTxt;
        }
    }
 
    public string MakeHighlightKeyWords(Match m)
    {
        return "<span class='Makehighlight'>" + m.Value + "</span>";
    }
}

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us