使用局部视图将单击搜索转换为即时搜索

本文关键字：搜索 转换 单击 用局 视图 | 更新日期: 2023-09-27 18:17:19

我有一个表单，在按钮单击将返回基于给定的搜索字符串的搜索结果的视图。

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

使用局部视图将单击搜索转换为即时搜索

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

<<h2>视图/h2>

  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');
         });
         });
         }
 }
相关文章：