[英]How can I create a search functionality with partial view in asp.net mvc 4
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.现在,当谈到我的 Searchcontroller 时,我有点迷失了如何做到这一点。 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?
因为一个 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!任何形式的帮助都非常感谢!
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.BeginForm
so when a user searches the results will be displayed in the search-results
DIV in Index.cshtml by AJAX.您可以使用
Ajax.BeginForm
因此当用户搜索时,结果将通过 AJAX 显示在 Index.cshtml 中的search-results
DIV 中。 UpdateTargetId
specifies that we want to pass the results of the search to the search-results
DIV. UpdateTargetId
指定我们要将搜索结果传递给search-results
DIV。
@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
}
}
If your _SearchResultsPartial.cshtml is not inserted into the DOM element of given ID, you should add a script: query.unobtrusive-ajax.js如果你的 _SearchResultsPartial.cshtml 没有插入给定 ID 的 DOM 元素,你应该添加一个脚本:query.unobtrusive-ajax.js
It fixed the MattSull's solution in my case它在我的情况下修复了 MattSull 的解决方案
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.