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

i using asp.net mvc 4 entity framework model first.

in "masterpage.cshtml" want have partial view contains textbox , button.

the search looking items title, if text contains items title should display items.

when text submitted @renderbody() should show view items.

my question how can in way? whats , easy approach?

so far have done this:

created method in repository search function:

public list<news> search(string query)         {              var queryz =  db.news.where(x => x.title.contains(query));             return queryz.tolist();         } 

now when comes searchcontroller im kinda lost how this. beacuse 1 actionresult need partialview has string query parameter , other 1 contains view display items?

what have done right having 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 appreciated alot!

you use following approach:

index.cshtml

have 1 div calls search controller action, , that'll display results.

<div id="search-form">     @html.action("search", "home");  // action in controller displays form </div> <div id="search-results"> </div> 

_searchformpartial.cshtml

create partial view that'll contain search form. can use ajax.beginform when user searches results displayed in search-results div in index.cshtml ajax. updatetargetid specifies want pass results of search 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>       } 

in controller you'll need 1 action display form (partial view above) , process search query , retun partial view that'll display 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

this partial display results. it's typed taking in itemviewmodel.

@model namespace.viewmodels.itemviewmodel @if (model.searchresults.count == 0) {     <h3 class="text-error">no items matched search query!</h3> } else {     foreach (var result in model.newslist)     {         // display search results     } }