如何使用 asp.net 在 gridview 中突出显示搜索结果？

Posted 2023-04-12

【中文标题】如何使用 asp.net 在 gridview 中突出显示搜索结果？

【英文标题】：How to highlight search results in gridview using asp.net?

【发布时间】：2014-04-14 21:14:10

【问题描述】：

我正在使用搜索框根据搜索文本对我的网格视图进行排序。我想在输入到文本框中的 gridview 中突出显示匹配的文本。 这是我的 aspx 页面-

<table>
    <tr>
      <td>
         <asp:TextBox ID="TextBox1" runat="server" Width="167px">
         </asp:TextBox>
      </td>
    </tr>
    <tr>
       <td>
           <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                Text="Submit" Width="116px" />
       </td>
    </tr>
    <tr>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </tr>
</table>

后面的代码

public void bind()

     dt = g1.return_dt("select  * from tbl1 where id is  not null  " 
           + Session["Name"] + "  order by  compname ");
     if (dt.Rows.Count > 0)
     
         adsource = new PagedDataSource();
         adsource.DataSource = dt.DefaultView;
         adsource.PageSize = 10;
         adsource.AllowPaging = true;
         adsource.CurrentPageIndex = pos;
         btnfirst.Enabled = !adsource.IsFirstPage;
         btnprevious.Enabled = !adsource.IsFirstPage;
         btnlast.Enabled = !adsource.IsLastPage;
         btnnext.Enabled = !adsource.IsLastPage;
         GridView1.DataSource = adsource;
         GridView1.DataBind();
     
     else
     
        GridView1.DataSource = null;
        GridView1.DataBind();
     


protected void Button1_Click(object sender, EventArgs e)

    if (TextBox1.Text != "")
    
        Session["Name"] = string.Format("and  compname  like '%0%' or productcategory like '%0%' or country like '%0%'");
    
    else
    
         Session["Name"] = null;
    

请指导我如何做到这一点。

【问题讨论】：

如果您能够匹配该行，只需更改该行的背景颜色

您查看过 GridView.RowDataBound 事件msdn.microsoft.com/en-us/library/… 吗？

@Mathias 实际上我已经在gridview中显示了我的结果，我希望当我在搜索框中输入一些文本并单击按钮时，如果该特定文本出现在我的gridview中，那么它应该得到突出显示。请用我上面的代码指导我。

@Rex 你好，实际上我将这个输入到搜索框中的文本作为我的选择查询中的 where 子句传递。是的，我可以匹配文本，但是如何突出显示网格视图内的这些文本？我对此感到很困惑。请指导我。

看起来您重新绑定了 GridView 与用户输入作为查询参数。我相信当您重新绑定网格时会触发事件，您可以在那里修改行的单元格。

【参考方案1】：

您可以通过两种方式做到这一点：

修改数据表相关列中的文本。 （在每一列中找到文本，并在该文本周围添加一个带有 css 类的跨度。）这是一个示例：

foreach(DataRow dr in dt.Rows) foreach(DataColumn dc in dt.Columns) string s = Convert.ToString(dr[dc.ColumnName]); s = s.Replace("Your Search Text","<span style='color:RED'>Your Search Text</span>"); dr[dc.ColumnName] = s;

您可以使用 javascript 来做同样的事情，让浏览器完成所有的工作。 （请参阅this link 获取示例。）

希望这会有所帮助。

【讨论】：

我认为第一个建议可能会帮助我解决这个问题。楼主，你能给我举个例子吗？实际上，您提供给我的示例是使用 javascript 完成的。

先生，gridview 属性中是否有任何选项可以为匹配的文本提供高亮效果？

我添加了一个示例代码，您可以将其用于第一种方法。 Gridview 没有任何这样的属性来突出显示文本。

先生，我有一个疑问。因为，我通过会话变量将输入的搜索文本传递到文本框中，那么在这种情况下，我应该如何使用您提供给我的示例。先生，请指导我。

实际上将文本颜色更改为红色，而不是突出显示它，但这对我的需求非常有效。谢谢我+1。 :) BTW 要突出显示它，只需将样式修改为： ;)