Question

我正在尝试实施全球搜索＆＃34;功能，在我们的主菜单上方，在我们的应用程序中的所有视图中。它看起来像这样：

＆＃34;全球搜索＆＃34;是一个jQuery自动完成输入字段。它驻留在我们的_Layout.cshtml中，这是一个共享的View，并且被其他视图多次加载。基本上它会显示搜索关键字的自动建议列表。我们的关键字建议列表大约有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 =＆＃34;传递到字典中的模型项是类型＆＃39; System.Web.Mvc.HandleErrorInfo＆＃39;，但此词典需要一个模型类型＆＃39; MyApplication.Models.GlobalSearchSuggestions＆＃39;。＆＃34;

如果我删除_Layout.cshtml的模型声明，并检索＆＃34;建议＆＃34;通过另一种方式（如AJAX），它将允许SearchResults.cshtml工作。没有错误产生。但我更愿意使用模型而不是AJAX。所以，如果我将模型声明留在_Layout.cshtml中，我会得到异常。

我也无法加载＆＃34;建议＆＃34;从除Home之外的任何视图。这是为什么？如果我在我们的应用程序中转到另一个视图，并且我尝试执行全局搜索＆＃34;从我们的_Layout.cshtml小部件，我没有得到任何＆＃34;建议＆＃34;或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>

<强> SearchResult所

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

<强> GlobalSearchController

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

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

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

为了简单起见，AJAX由按钮触发，但您可以修改它以触发延迟的文本更改。结果也可能是JSON而不是parital视图 - 一些客户端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作为搜索键，因此使用布局的任何操作都不必定义通用模型。

如何在Layout.cshtml

1 个答案:

如果您想导航到结果页面