使用部分视图将点击搜索变为即时搜索

Question

我有一个表单，点击按钮会根据给定的 searchString 返回搜索结果视图。

@using (Html.BeginForm("Index", "Search"))
{
    <div id="search" class="input-group">
        @Html.TextBox("searchString", null, new { @id = "searchBox", @class = "form-control", @placeholder = "Search" })
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
}

这会调用 Search 控制器上的 Index 操作，该操作根据 searchString 获取结果并填充强类型模型“SearchView”的列表

public ViewResult Index(string searchString = "", int startIndex = 0, int pageSize = 5)
{
    List<SearchView> searchResults = 
        (from p in db.Products
         where p.code.Contains(searchString)
         select new { ID = p.ID, Table = "Product", Name = p.code, Controller = "Product" })
             .ToList()
             .Select(x => new SearchView { ID = x.ID, Table = x.Table, Name = x.Name, Controller = x.Controller }).ToList();

    searchResults.AddRange(
        (from p in db.Multimedias
         where p.name.Contains(searchString)
         where p.isActive == true
         select new { ID = p.ID, Table = "Image", Name = p.name, Controller = "Multimedia" })
             .ToList()
             .Select(x => new SearchView { ID = x.ID, Table = x.Table, Name = x.Name, Controller = x.Controller }).ToList()); 

    ViewBag.startIndex = startIndex;
    ViewBag.pageSize = pageSize;
    ViewBag.loadMore = searchResults.Count > startIndex + pageSize;

    return View(searchResults.Skip(startIndex).Take(pageSize));
}

然后视图被调用，它只是一个结果列表

<table class="table">
@foreach (var item in Model) 
{
    <tr>
        <td>
            <b>@Html.DisplayFor(modelItem => item.Table)</b><br />
            @Html.ActionLink(item.Name, "Details", item.Controller, new { @ID = item.ID }, null)
        </td>
    </tr>
}
@if (ViewBag.LoadMore)
{ 
    <tr>
        <td>
            <b> @Html.ActionLink("See more results...", "Index", "Search", new { @startIndex = ViewBag.startIndex + ViewBag.pageSize }, null)</b>
        </td>
    </tr>
}
</table>

我的问题是，如何将视图转换为局部视图并更改表单，以便在文本框中的每次按键时显示局部视图？

编辑：接受的答案可以工作，但要求我返回部分视图并在 javascript 上使用 keyup 而不是 keypress 以及删除空格来创建有效的 URL。

return PartialView("_Search", searchResults.Skip(startIndex).Take(pageSize));

$("#searchBox").keyup(function () {      
    $("#myPartialViewContainer").load('@Url.Action("IndexLive","Search")' + '?searchString=' + $('#searchBox').val() + '&startIndex=0' + '&pageSize=5');
});

Answer 1

使用 ajax 加载而不是表单提交来加载您的局部视图。

查看

1. 创建局部视图容器来保存局部视图结果。

2. 在 jquery 文本框按键事件中，只需调用局部视图并加载到局部视图容器中。

   @using (Html.BeginForm("Index", "Search"))
   {
        <div id="search" class="input-group">
          @Html.TextBox("searchString", null, new { @id = "searchBox", @class = "form-control", @placeholder = "Search" })
          <div class="input-group-btn">
           <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
         </div>
         </div>
   
       <!--Hold partial view content-->
           <div id="myPartialViewContainer">        
           </div>
   
       <!--Include jquery-->
       <!--Scripts to help load partial view content in partial view container-->
           @section Scripts
            {
            $( document ).ready(function() {
               // On each key press this will execute
               $('#searchBox').keyup(function(e) { 
               // Following will load partial view in partial view container
               $("#myPartialViewContainer").load('@Url.Action("Search","Index")' + '?searchString =' + $('#searchBox').val()+ '&startIndex =0' + '&pageSize =5');
   
            });
            });
            }
    }