如何在 Layout.cshtml 中设计 MVC5 全局搜索功能

Question

我正在尝试在我们应用程序的所有视图中实现“全局搜索”功能，该功能位于主菜单上方。它看起来像这样：

“全局搜索”是一个 jQuery 自动完成输入字段。它驻留在我们的 _Layout.cshtml 中，这是一个共享视图，并被其他视图多次加载。本质上，它将显示搜索关键字的自动建议列表。我们的关键字建议列表大约有 6000 项。

我们的 HomeController 如下所示：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Home()
    {
        ViewBag.Message = " Home Page.";

        GlobalSearchController controller = new GlobalSearchController();
        //_Layout.cshtml uses this for the auto-complete jQuery list
        var suggestions = controller.GetGlobalSearchSuggestions(); 
        return View(suggestions);
    }

    public ActionResult SearchResults()
    {
        ViewBag.Message = "Search Results page.";

        GlobalSearchController controller = new GlobalSearchController();
        var searchKeyword = "technology";
        //SearchResults.html uses this for the search results data
        var results = controller.GetGlobalSearchResults(searchKeyword); 
        ViewBag.SearchKeyword = searchKeyword;
        return View(results);
    }
}

_Layout.cshtml 使用这个模型：

@model MyApplication.Models.GlobalSearchSuggestions

SearchResults.cshtml 使用此模型：

@model IQueryable<MyApplication.Models.GlobalSearchResult>  

当我在 _Layout.cshtml 中使用 @model 声明时，我的问题就开始了。

我收到这样的错误：

Message = "传入字典的模型项是类型 'System.Web.Mvc.HandleErrorInfo'，但是这个字典需要一个模型 'MyApplication.Models.GlobalSearchSuggestions' 类型的项目。"

如果我删除 _Layout.cshtml 的模型声明，并通过另一种方式（如 AJAX）检索“建议”，它将允许 SearchResults.cshtml 工作。不会产生错误。但我更愿意使用模型而不是 AJAX。因此，如果我将模型声明性保留在 _Layout.cshtml 中，则会出现异常。

我也无法从除主页以外的任何视图加载“建议”。这是为什么？如果我转到应用程序中的另一个视图，并尝试从我们的 _Layout.cshtml 小部件执行“全局搜索”，我不会在 jQuery 自动完成中获得任何“建议”或数据。为什么它只适用于 Home 视图和 Home 控制器？

如何避免此异常并同时使用 @model 声明？以及如何让 _Layout.cshtml 始终在自动完成字段中显示建议（而不仅仅是来自主页？）？

感谢任何帮助。谢谢！

Answer 1

这听起来像是 Child Actions 的一个很好的用例。

这是一个使用 AJAX 的基本示例，因此用户无需重新加载页面即可看到结果。

_Layout.cshtml

<div class="header">
    @Html.Action("SearchWidget", "GlobalSearch")
</div>

@RenderBody()

<script src="jquery.js" />
<script>
    $(".global-search-form").on("click", "button", function(e)
    {
        $.ajax({
            url: "/GlobalSearch/Search",
            method: "GET",
            data: { item: $("input[name='item']").val() }
        })
        .then(function(result)
        {
            $(".global-search-result").html(result);
        });
    });
</script>

_Search.cshtml

<div class="global-search-widget">
    <div class="globa-search-form">
        <label for="item">Search For:</label>
        <input type="text" name="item" value="" />
        <button type="button">Search</button>
    </div>
    <div class="global-search-results"></div>
</div>

_SearchResults.cshtml

@model MyNamespace.SearchResults

<div>Results</div>
<ul>
@foreach(var item in Model.Suggestions)
{
    <li>@item</li>
}
</ul>

搜索结果

public class SearchResults
{
    public List<string> Suggestions { get; set; }
}

全球搜索控制器

[HttpGet]
[ChildActionOnly]
public ActionResult SearchWidget()
{
    return PartialView("_Search");
}

[HttpGet]
public ActionResult Search(string item)
{
    SearchResults results = searchService.Find(item);
    return PartialView("_SearchResults", results);
}

我们将@model 声明保留在布局页面之外，并将其移至子操作的局部视图。此示例将搜索小部件加载到布局中，但您可以在任何您想要的视图上使用它。

为了简单起见，AJAX 由按钮触发，但您可以修改它以触发延迟的文本更改。结果也可以是 JSON 而不是部分视图——一些客户端 Type-Ahead 插件可能会将结果作为 JSON 处理。

如果您想导航到结果页面

您可以删除所有脚本并将您的小部件转换为适当的形式。

@model MyNamespace.SearchForm

@using(Html.BeginForm("Search", "GlobalSearch", FormMethod.Get, new { item = ViewBag.GlobalSearchKey })
{
    @Html.TextBoxFor(m => m.Item)
    <button type="submit">Search</button>
}

搜索模型

public class SearchForm
{
    public string Item { get; set; }
}

调整您的布局以将参数传递回搜索小部件。这将在结果页面中保留搜索键。

@Html.Action("SearchWidget", "GlobalSearch", new { item = ViewBag.GlobalSearchKey })

SearchWidget 操作现在传递一个参数来填充表单（如果提供）。

[HttpGet]
[ChildActionOnly]
public ActionResult SearchWidget(string item)
{
    var model = new SearchForm
    {
        Item = item ?? ""
    };
    return PartialView("_Search", model);
}

[HttpGet]
public ActionResult Search(SearchForm model)
{
    var results = searchService.Find(model.Item);
    ViewBag.GlobalSearchKey = model.Item;  // keep the same value for the form

    return View("SearchResults", results);  // full view with layout
}

我们使用ViewBag 作为搜索键，因此使用布局的任何操作都不必定义通用模型。