ASP.NET MVC页面搜索功能实现(普通方法和使用Ajax)
时间: 2023-07-14 15:12:03 浏览: 53
普通方法:
1. 创建一个搜索表单
```html
<form action="/Home/Search" method="get">
<input type="text" name="query" placeholder="输入关键词进行搜索" />
<button type="submit">搜索</button>
</form>
```
2. 在控制器中创建一个Search方法,该方法将接收查询参数并返回符合条件的结果。
```csharp
public ActionResult Search(string query)
{
var results = db.Products.Where(p => p.Name.Contains(query)).ToList();
return View(results);
}
```
3. 创建一个Search视图,用于显示搜索结果。
```html
@model IEnumerable<Product>
@foreach (var item in Model)
{
<div>
<h2>@item.Name</h2>
<p>@item.Description</p>
<p>@item.Price</p>
</div>
}
```
使用Ajax:
1. 创建一个搜索表单
```html
<form id="search-form">
<input type="text" name="query" placeholder="输入关键词进行搜索" />
<button type="submit">搜索</button>
</form>
```
2. 编写一个JavaScript函数,该函数将使用Ajax向服务器发送搜索请求,并在收到响应后更新页面内容。
```javascript
$(function () {
$('#search-form').submit(function (event) {
event.preventDefault();
var query = $('input[name="query"]').val();
$.ajax({
url: '/Home/Search',
data: { query: query },
success: function (result) {
$('#search-results').html(result);
}
});
});
});
```
3. 创建一个Search方法,该方法将接收查询参数并返回符合条件的结果。
```csharp
public ActionResult Search(string query)
{
var results = db.Products.Where(p => p.Name.Contains(query)).ToList();
return PartialView("_SearchResults", results);
}
```
4. 创建一个_SearchResults视图,用于显示搜索结果。
```html
@model IEnumerable<Product>
@foreach (var item in Model)
{
<div>
<h2>@item.Name</h2>
<p>@item.Description</p>
<p>@item.Price</p>
</div>
}
```
注意:使用Ajax时,Search方法应返回一个局部视图(PartialView),该视图将仅包含搜索结果的HTML代码。此外,在客户端使用JavaScript更新页面时,应将结果插入到指定的HTML元素中(例如,使用id属性指定的元素)而不是完全替换整个页面。