ASP.NET MVC页面搜索功能实现(普通方法和使用Ajax)

Posted 2020-10-13 Drajun

使用以下方法可以对数据进行过滤再在页面中显示

1. 假设当前数据库、控制器和视图都已创建
2. 模型名为Movies
3. 控制名为MoviesController
4. 显示页面的视图名为Index
5. 数据库上下文为MovieDBContext 

 

一、     在显示页面添加搜索功能(普通)

1、         在显示页面的视图中(即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>

}

 

//表单为一个下拉菜单，一个输入框；当有值输入并点击Filter时，会使用上面Html.BeginForm()中写定的控制器和方法，一般是当前视图的控制器方法；

2、         在对应的控制器方法中，加入两个表单的参数

 

private MovieDBContext db = new MovieDBContext();
public ActionResult Index(String movieGenre, String searchString)
{
/*获取Movie表中的’电影类型’数据，并将其封装在ViewBag中，给视图中的下拉列表使用*/
            var genreList = new List<String>();
            var genreQry = from d in db.Movies
                           orderby d.Genre
                           select d.Genre;
            genreList.AddRange(genreQry.Distinct());
            ViewBag.movieGenre = new SelectList(genreList);

//获取Movie表中全部数据
            var movies = from m in db.Movies
                        select m;

//判断参数是否有值，第一次请求参数是空的，所以就显示全部数据；当执行搜索后，表单会把两个参数传过来，就可以对数据过滤了；
            if (!String.IsNullOrEmpty(searchString)){
                movies = movies.Where(s => s.Title.Contains(searchString));
            }

            if (!String.IsNullOrEmpty(movieGenre))
            {
                movies = movies.Where(x => x.Genre == movieGenre);
            }

//将封装好的数据传给视图
            return View(movies);
        }

 

二、     在显示页面添加搜索功能(使用Ajax)

1、                  首先在 工具->Nuget包管理器->管理解决方案的Nuget程序包->浏览，安装”Microsoft.jquery.Unobtrusive.Ajax”包；

2、                  在项目资源->App_Start-> BundleConfig.cs, RegisterBundles(BundleCollection bundles)方法中，新添加一个bundles(可以把多个脚本文件绑定在一起)

public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/moviesScripts").Include
                "~/Scripts/jquery-{version}.js",
                "~/Scripts/jquery.validate*",
                "~/Scripts/modernizr-*",
                "~/Scripts/jquery.unobtrusive*"
                ));
//其中"~/bundles/moviesScripts"为这些脚本的别名，以后只需要在布局页或者视图中引用这个别名，就相当于引用了这些脚本

 

3、                  在显示页面的视图布局页中引用bundles，布局页默认为 Views->Shared->_Layout.cshtml，在布局页面的下方编写@Scripts.Render("~/bundles/moviesScripts")

 

4、                  在显示页面的视图中加入Ajax搜索表单

@using (Ajax.BeginForm(new AjaxOptions
{
    HttpMethod = "get",                    //使用get方法请求
    InsertionMode = InsertionMode.Replace, //将过滤的数据覆盖原数据
    UpdateTargetId = "moviesList"          //覆盖的地方(值为标签ID)
 }))
{
   <input type="search" name="searchString" />
   <input type="submit" name="Filter" />
}

@Html.Partial("_Movies", Model)               /*引用分部视图，第一个值
                                              为分部视图名，第二个值是
                                              把model传过去*/

 

5、                  新建一个view，新建时勾选”创建为分部视图”，而后将显示页面的视图中所有显示数据的标签和代码剪切到新建的分部视图中，注意要把model引用进来，注意要把显示数据的标签和代码包含在覆盖指定ID下

 

@model IEnumerable<MyFristASP.Models.Movie>

 

<div id="moviesList">             //执行搜索时该ID包含的区域会被覆盖

    <table class="table">

        <tr>

            <th>

                @Html.DisplayNameFor(model => model.Title)

······
</div>

//之所以要使用分部视图，是因为若是不使用，执行搜索后回返回整个页面，然后这整个页面又会覆盖在指定的标签内

 

6、                  同样，使用Ajax搜索，在控制器对应的方法中也要同上添加搜索参数，还要在方法内加以判断是否为Ajax请求，若是则返回过滤后的数据和部分页面，若不是则显示全部

 //如果是Ajax请求就返回部分网页
 if (Request.IsAjaxRequest())
 {
     //第一个值为分部视图名，第二个值为封装好的数据
     return PartialView("_Movies",movies);
 }
 //如果不是Ajax则显示完整页面
 return View(movies);