C# 如何在 asp.net mvc 4 中创建带有部分视图的搜索功能

How can I create a search functionality with partial view in asp.net mvc 4

提问by Obsivus

I am using ASP.NET MVC 4 with entity framework model first.

我首先将 ASP.NET MVC 4 与实体框架模型一起使用。

In my "Masterpage.cshtml" I want to have a partial view which contains a textbox and a button.

在我的“Masterpage.cshtml”中，我想要一个包含文本框和按钮的局部视图。

The search is looking for the items title, if the text contains a items title it should display those items.

搜索正在查找项目标题，如果文本包含项目标题，则应显示这些项目。

When a text is submitted the @renderbody()should show a view with the items.

提交文本时，@renderbody()应显示包含项目的视图。

My question is how can I do this in a good way? whats a good and easy approach?

我的问题是我怎样才能以一种好的方式做到这一点？什么是好的和简单的方法？

So far I have done this:

到目前为止，我已经这样做了：

Created a method in my repository that does the search function:

在我的存储库中创建了一个执行搜索功能的方法：

public List<News> Search(string query)
        {

            var queryz =  db.News.Where(x => x.Title.Contains(query));
            return queryz.ToList();
        }

Now when it comes to my Searchcontroller im kinda lost how to do this. Beacuse one actionresult need to be the partialview that has a string query parameter and other one that contains a view that will display the items?

现在，当谈到我的 Searchcontroller 时，我有点迷失了如何做到这一点。因为一个 actionresult 需要是具有字符串查询参数的部分视图，而另一个需要包含将显示项目的视图？

What I have done right now is having the whole process in same actionresult:

我现在所做的是将整个过程放在同一个 actionresult 中：

 Repository rep = new Repository();
        [HttpPost]
        public ActionResult Search(string query)
        {
            var searchlist = rep.Search(query);

            var model = new ItemViewModel()
            {
                NewsList = new List<NewsViewModel>()
            };

            foreach (var NewsItems in searchlist)
            {
                FillProductToModel(model, NewsItems);
            }

            return View(model);
        }

        private void FillProductToModel(ItemViewModel model, News news)
        {
            var productViewModel = new NewsViewModel
            {

                Description = news.Description,
                NewsId = news.Id,
                Title = news.Title,
                link = news.Link,
                Imageurl = news.Image,
                PubDate = news.Date,
            };
            model.NewsList.Add(productViewModel);
        }

any kind of help is appreciated alot!

任何形式的帮助都非常感谢！

采纳答案by MattSull

You could use the following approach:

您可以使用以下方法：

Index.cshtml

索引.cshtml

Have one DIV that calls the search controller action, and another that'll display the results.

有一个调用搜索控制器操作的 DIV，另一个将显示结果。

<div id="search-form">
    @Html.Action("Search", "Home");  // GET action in controller that displays form
</div>
<div id="search-results">
</div>

_SearchFormPartial.cshtml

_SearchFormPartial.cshtml

Create a partial view that'll contain the search form. You can use Ajax.BeginFormso when a user searches the results will be displayed in the search-resultsDIV in Index.cshtml by AJAX. UpdateTargetIdspecifies that we want to pass the results of the search to the search-resultsDIV.

创建一个包含搜索表单的局部视图。您可以使用Ajax.BeginFormso 当用户搜索结果将search-results通过 AJAX显示在 Index.cshtml的DIV 中。UpdateTargetId指定我们要将搜索结果传递给search-resultsDIV。

@using (Ajax.BeginForm("Search", "Home", FormMethod.Post,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            UpdateTargetId = "search-results"
         }))
{
<div>
    @Html.TextBox("query")
    <input type="submit" value="Search" />
</div>      
}

Controller

控制器

In your controller you'll need one action to display the form (partial view above) and another to process the search query and retun another partial view that'll display the results:

在您的控制器中，您需要一个操作来显示表单（上面的部分视图），另一个操作来处​​理搜索查询并返回另一个将显示结果的部分视图：

[HttpGet]
public ActionResult Search()
{
    return PartialView("_SearchFormPartial");
}

[HttpPost]
public ActionResult Search(string query)
{
    if(query != null)
    {
        try
        {
            var searchlist = rep.Search(query);

            var model = new ItemViewModel()
            {
                NewsList = new List<NewsViewModel>()
            };

            return PartialView("_SearchResultsPartial", model);
        }
        catch (Exception e)
        {
            // handle exception
        }
    }
    return PartialView("Error");
}

_SearchResultsPartial.cshtml

_SearchResultsPartial.cshtml

This partial will display the results. It's strongly typed taking in an ItemViewModel.

该部分将显示结果。它是强类型的，接受ItemViewModel.

@model Namespace.ViewModels.ItemViewModel
@if (Model.SearchResults.Count == 0)
{
    <h3 class="text-error">No items matched your search query!</h3>
}
else
{
    foreach (var result in Model.NewsList)
    {
        // display search results
    }
}