ASP. NET MVC page Search feature implementation (common method and use Ajax)

You can filter the data and display it in the page using the following methods

1. Assume that the current database, controller, and view are created
2. The model is named movies
3. Control is named Moviescontroller
4. The view that displays the page is named index
5. The database context is Moviedbcontext

First, the display page to add search function (normal)

1. Add a search form in the view of the display page (that is, index.cshtml)

@using (Html.BeginForm ("Index", "Movies", Formmethod.get))    {        <p>            Genre: @Html. DropDownList (" Moviegenre "," All ")            Title: @Html. TextBox (" searchstring ")            &nbsp;&nbsp;            <input type= "Submit" value= "Filter"/>        </p>} 

The form is a drop-down menu, an input box, and when a value is entered and clicked, the Controller and method written in the above Html.BeginForm () is used, usually the controller method of the current view;

2, in the corresponding controller method, add two form parameters

PrivateMoviedbcontext db =NewMoviedbcontext (); Publicactionresult Index (String moviegenre, String searchstring) {/*get the ' movie type ' data in the movie table and encapsulate it in ViewBag, using the drop-down list in the view*/            varGenrelist =NewList<string>(); varGenreqry = fromDinchdb. Movies byd.genreSelectd.genre;            Genrelist.addrange (Genreqry.distinct ()); Viewbag.moviegenre=Newselectlist (genrelist);//get all the data in the movie table            varMovies = fromMinchdb. MoviesSelectm;//determine whether the parameter has a value, the first request parameter is empty, so the entire data is displayed; When the search is performed, the form will pass two parameters, it can filter the data;            if(!String.IsNullOrEmpty (searchstring)) {Movies= movies. Where (s = =s.title.contains (searchstring)); }            if(!String.IsNullOrEmpty (moviegenre)) {Movies= movies. Where (x = x.genre = =moviegenre); }//Pass the encapsulated data to the view            returnView (Movies); }

Second, add search function on display page (using AJAX)

1, first in the tool->nuget Package Manager, management Solution NuGet Package, browse, install the "Microsoft.jquery.Unobtrusive.Ajax" package;

2, in the project resources->app_start-> BundleConfig.cs, registerbundles (bundlecollection bundles) method, add a new bundles (you can Bind multiple script files together)

 Public Static voidregisterbundles (bundlecollection bundles) {bundles. ADD (NewScriptbundle ("~/bundles/moviesscripts"). Include"~/scripts/jquery-{version}.js",                "~/scripts/jquery.validate*",                "~/scripts/modernizr-*",                "~/scripts/jquery.unobtrusive*"                ));//where "~/bundles/moviesscripts" is the alias for these scripts, which will only need to be referenced in the layout page or view, which is equivalent to referencing the scripts

3. Bundles is referenced in the View layout page of the display page, the layout page defaults to views->shared->_layout.cshtml, and @scripts.render is written below the layout page ("~/bundles/ Moviesscripts ")

4. Add an Ajax search form to the view of the display page

@using (Ajax.beginform (Newajaxoptions{HttpMethod="Get",//using the Get method to requestInsertionmode = Insertionmode.replace,//overwrite the filtered data with the original dataUpdatetargetid ="movieslist"          //where to overwrite (value is tag ID) })){   <input type="Search"Name="searchstring"/> <input type="Submit"Name="Filter"/>} @Html. Partial ("_movies", Model)/*refers to a partial view, the first value is the partial view name, and the second value is the MO Del Pass through .*/

5, create a new view, check the new view, "created as partial view", and then the display page of all the data displayed in the views of the label and code cut to the new partial view, note to the model reference, note that the display of the data label and code to overwrite the specified ID

@model IEnumerable<myfristasp. Models.movie> <DivID= "Movieslist">//The area that the ID contains will be overwritten when the search is performed<Tableclass= "Table">        <TR>            <th>@Html. displaynamefor (model = model. Title) ...</Div>//The partial view is used because, if not used, the search returns the entire page and then the entire page is overwritten with the specified label.

6, similarly, the use of Ajax search, in the controller corresponding to the same method to add the search parameters, but also in the method to determine whether the AJAX request, if it is to return the filtered data and some pages, if not show all

// return some pages if it is an AJAX request if (Request.isajaxrequest ()) {     // The first value is a partial view name, the second value is the encapsulated data     return Partialview ("_movies"// if not Ajax, displays the full page  return View (Movies);

ASP. NET MVC page Search feature implementation (common method and use Ajax)