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

Question

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

 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);
             }
     }

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

    $(document).ready(function () {

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

Answer 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");

Answer 2

如果 javascript 文件中没有发生这种情况，我认为您可以采取其他方式，创建一个隐藏字段并填充 ViewBag

中的值

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

对于视图数据

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

然后 javascript 读取这样的值

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

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

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

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

highlight search word using jquery in MVC

javascript

asp.net-mvc

search

jquery

highlight