11

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

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

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.

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?

What I have done right now is having the whole process in same 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!

4

2 回答 2

26

您可以使用以下方法：

索引.cshtml

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

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

_SearchFormPartial.cshtml

创建一个包含搜索表单的局部视图。您可以使用Ajax.BeginForm这样，当用户搜索时，结果将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>      
}

控制器

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

[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

这部分将显示结果。它是强类型的，接受一个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
    }
}
于 2013-05-19T20:38:30.067 回答
0

如果您的 _SearchResultsPartial.cshtml 没有插入到给定 ID 的 DOM 元素中，您应该添加一个脚本：query.unobtrusive-ajax.js

在我的情况下，它修复了 MattSull 的解决方案

于 2021-03-28T00:03:47.407 回答