时间戳

首页 > 解决方案 > 如何在 c# mvc 代码中进行实时搜索后使用值更新无序列表？

c# - 如何在 c# mvc 代码中进行实时搜索后使用值更新无序列表？

问题描述

我想在文本框中输入内容时进行实时搜索以过滤结果。页面加载时从模型中填充了一个 html 无序列表，这些是我在搜索时要过滤的项目。问题是如何使用搜索值更新 ul？

cshtml页面：

<div>
  <input id="search" type="text" placeholder="Search Sections">
  <ul id="menuList" style="max-height: 800px; overflow:scroll;">
      @foreach (var item in Model)
        {
         <li>
           <div style="display:inline-block; min-width:15%">@item.Index</div>
           <div style="display:inline; min-width:80%">@item.Title</div>
         </li>
        }
   </ul>
</div>

ajax 调用：

$(function () {
            $("#search").keyup(function (e) {
                var s = $("#search").val();
                $.get("/Document/GetSearchItem?searchString=" + s, function (r) {
                    //how do I update ui with results here?
                    

                });
            });
        });

查询数据库的控制器方法并返回我用来更新模型的列表，这很好用。

public async Task<IActionResult> GetSearchItem(string searchString)
        {
            var lst = await _sectionService.GetSearchString(searchString);
            var documentModel = new List<DocumentViewModel>();
            foreach (var item in lst)
            {
                documentModel.Add(new DocumentViewModel
                {
                    Id = item.Id.ToString(),
                    Title = item.Title,
                    Index = item.IndexNumber                    
                });
            }
            return View(documentModel);
        }

标签： c#jqueryasp.net-mvcrazor

解决方案

我在我的一个 asp.net 项目中具有类似的功能，并以这种方式处理 ajax 调用。检查它是否有帮助。

function SearchText() {
        $("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "samplepage.aspx/samplemethod",
                    data: "{'searchValue':'" + document.getElementById('#search').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response(data.d);
                    },
                    error: function (result) {
                        alert("No Match");
                    }
                });
            }
        });
    }

推荐阅读