ASP.NET MVC頁面搜索功能實現(普通方法和使用Ajax)

使用以下方法可以對數據進行過濾再在頁面中顯示

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);