ASP.NET MVC页面搜索功能实现(普通方法和使用Ajax)

普通方法：

1. 创建一个搜索表单，包含一个文本输入框和一个提交按钮。

2. 创建一个控制器，用于处理搜索请求。可以在控制器的 Index 方法中处理搜索逻辑。

3. 在 Index 视图中，显示搜索表单和搜索结果。搜索结果可以使用 ViewBag 或 ViewData 传递到视图中。

4. 在控制器中通过查询字符串获取搜索参数，并使用 LINQ 查询数据库或其他数据源。

5. 将查询结果传递到视图中，并在视图中显示结果。

使用 Ajax：

1. 创建一个搜索表单，包含一个文本输入框和一个按钮。

2. 在 JavaScript 中，使用 jQuery 或其他库监听表单提交事件。

3. 在表单提交事件中，使用 Ajax 发送搜索请求。

4. 在控制器中，使用 JsonResult 返回搜索结果。

5. 在 JavaScript 中，接收 JsonResult 并将结果显示在页面上。

6. 可以使用 jQuery 的 append、html 等方法将搜索结果插入到页面中。

示例代码：

普通方法：

控制器：

public class HomeController : Controller
{
    private readonly ApplicationDbContext _context;

    public HomeController(ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult Index(string searchString)
    {
        var movies = from m in _context.Movie
                     select m;

        if (!string.IsNullOrEmpty(searchString))
        {
            movies = movies.Where(s => s.Title.Contains(searchString));
        }

        return View(movies.ToList());
    }
}

Index 视图：

@model IEnumerable<Movie>

<form asp-controller="Home" asp-action="Index" method="get">
    <p>
        <input type="text" name="searchString" placeholder="Search...">
        <input type="submit" value="Search">
    </p>
</form>

<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Release Date</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Title</td>
                <td>@item.ReleaseDate.ToShortDateString()</td>
                <td>@item.Genre</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</table>

使用 Ajax：

Index 视图：

<form id="searchForm" method="get">
    <p>
        <input type="text" id="searchString" placeholder="Search...">
        <input type="submit" value="Search">
    </p>
</form>

<div id="searchResult"></div>

@section Scripts {
    <script>
        $(function () {
            $('#searchForm').submit(function (e) {
                e.preventDefault();

                var searchString = $('#searchString').val();

                $.ajax({
                    url: '/Home/Search',
                    type: 'get',
                    dataType: 'json',
                    data: { searchString: searchString },
                    success: function (data) {
                        $('#searchResult').html('');

                        $.each(data, function (index, item) {
                            $('#searchResult').append('<p>' + item.title + '</p>');
                        });
                    }
                });
            });
        });
    </script>
}

控制器：

public class HomeController : Controller
{
    private readonly ApplicationDbContext _context;

    public HomeController(ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult Index()
    {
        return View();
    }

    public JsonResult Search(string searchString)
    {
        var movies = from m in _context.Movie
                     select new { title = m.Title };

        if (!string.IsNullOrEmpty(searchString))
        {
            movies = movies.Where(s => s.title.Contains(searchString));
        }

        return Json(movies);
    }
}