在 MVC 中使用 jquery 突出显示搜索词答案

【问题标题】：highlight search word using jquery in MVC在 MVC 中使用 jquery 突出显示搜索词
【发布时间】：2015-05-04 03:13:19
【问题描述】：

我有一个 MVC 控制器，它返回一个包含搜索字符串的列表。

 public ActionResult GetList(string searchString)
    {
        ViewData["searchString"] = searchString; 
        if (String.IsNullOrEmpty(searchString))
          {
            var persons = db.Persons.ToList(); 
            return View(persons);
          } 
        else{
            var persons = db.Persons.Where(p=> p.Title.Contains(searchString)).ToList(); 
            return View(persons);
             }
     }

在视图中，列表显示在表格中。我想突出显示 searchString（或最多包含 searchString 的 td）。以下是我试图实现这一目标的 jquery。我尝试将这段代码放在单独的 .js 脚本或视图本身中，我还尝试以多种方式更改代码，但它不起作用。即使我的 ViewData 的内容发生了变化，看起来 searchString 仍然为空。

    $(document).ready(function () {

     var textToHighligt = @ViewData["searchString"];
     $("#simpleSearchButton").click(function () {
     $("td:contains(textToHighligt)").css("background-color", "yellow"); 
       });
       });

【问题讨论】：

你如何调用GetList方法是AJAX调用还是简单的post？
我没用过AJAX。 @Devesh

标签： javascript jquery asp.net-mvc search highlight

【解决方案1】：

我认为是这样的：

var textToHighligt = @ViewData["searchString"];
$("td:contains(textToHighligt)").css("background-color", "yellow");

应该串联：

var textToHighligt = '@ViewData["searchString"]'; //<---put in quotes
$("td:contains("+textToHighligt+")").css("background-color", "yellow");

【讨论】：

一个问题是，当我添加声明 var myText= @ViewData["searchString"] 时，即使对于像 alert("abc") 这样的基本命令，jquery 也会停止运行。我已经尝试在脚本标记中定义它，但在 (document).ready 上面定义它也不起作用
@Tibuka04 - 你的 JS 在视图中还是独立文件中？
@Tommy 正如我所说，我尝试了两种方式。现在，我在一个名为 highlighter.js 的独立文件中使用它，当然我在视图中有脚本标签。
@Tibuka04 - 您不能在独立文件中使用 razor 语法。您必须找到一种方法将 razor 中的数据传递到您的 javascript 函数中（作为参数或在您的视图中设置全局 JS 变量）
@Tommy 在这种情况下，当我在视图中有 JS 时它应该可以工作。我看到的一个问题（通过使用警报功能）是 js 在单击后立即执行，然后新列表被接收并显示在视图中。因此，它不会在显示带有搜索字符串的结果的页面上执行。

【解决方案2】：

如果 javascript 文件中没有发生这种情况，我认为您可以这样做，创建一个隐藏字段并从 ViewBag 填充值

       @Html.Hidden("hiddensearchString", (string)ViewBag.searchString)

对于视图数据

      @Html.Hidden("FirstName", ViewData["searchString"])

然后javascript读取这样的值

       var searchString = $("#hiddensearchString").val();

在您的代码中，您也可以尝试使用单引号。

        var textToHighligt = '@ViewData["searchString"]';

【讨论】：

谢谢。当我将 viewBag 保存在 Hidden 字段中时，它起作用了。