如果搜索框位于_SiteLayout页(在页眉 DIV 中)，如何将搜索结果返回给用户

本文关键字：给用户 返回 搜索结果 DIV 搜索 SiteLayout 如果 | 更新日期: 2023-09-27 18:33:48

我正在构建一个基于WebMatrix的网站，但我忽略了一些东西。我只是没有想到的事情。

我的网站是这样组成的，因此每个页面都引用页眉和页脚的 _SiteLayout.cshtml 页面。例如：

_SiteLayout.cshtml：

<html>
<head>
</head>
<body>
     <div id="Container">
          <div id="heading">
               <input type="text" name="search" value="search" id="searchbox" />
          </div>
          @RenderBody() <!-- display Default.cshtml content -->
         <div id="footer"><p>stuff here</p></div>
     </div>
</body>
</html>

Default.cshtml：

@{
     Layout = "~/_SiteLayout.cshtml";
}
<p>
 I want to display search results in the Default.cshtml (homepage) page, but I don't know how to if the search form is inside the SiteLayout page. How to do this?
</p>

所以，我的问题是我想在 Default.cshtml（主页）页面中显示搜索结果，但我不知道搜索表单是否在 SiteLayout 页面内。

我该怎么做？

如果搜索框位于_SiteLayout页(在页眉 DIV 中)，如何将搜索结果返回给用户

您需要将该搜索输入中的信息发布到服务器。 获取数据后，您可以使用它来定位您知道将在子视图中的 HTML 元素。

jQuery文档中的这篇文章帮助了我。 我的数据来自 JSON 响应，但该示例显示了如何使用 jQuery 获取结果响应并将其添加到特定元素（在本例中为 <body> ，但您也可以轻松创建一个 id 为 "search-results" 的div 并使用 #search-results 定位它）：

$.getJSON('ajax/test.json', function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');  // Here, you could append your items to #search-results
});

然后，所有视图都包含具有搜索结果ID的部分，但如果它不存在，那么数据就不会显示在任何地方。 该脚本应位于单独的文件中，并在主网站布局中引用。

相关文章：