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获取结果并填充强类型模型列表＆＃34; SearchView＆＃34;

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加载而不是表单提交来加载部分视图。

视图

创建部分视图容器以保存局部视图结果。

在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');

         });
         });
         }
 }

使用“部分视图”将点击搜索转为即时搜索

1 个答案:

视图