᳓前言
本篇文章將"Adding a Search Method and Search View"整理而成。᳓重點整理
- 可直接在URL輸入參數便可作為字串進行標題的搜尋。
- 在View加入TextBox,可輸入文字並進行標題的搜尋。
- 在View加入DropDownList,可選擇類型並進行類型的搜尋。
᳓實作1. 修改Controllers/MoviesController.cs
在Index Action新增searchString參數(當然也可以修改為直接利用URL Route的方式搜尋,請參考"ASP.NET MVC 5 - Adding a Controller"),並加入LINQ query程式碼。值得注意的是,LINQ query在初被定義時還沒執行,要等到Index Action回傳結果至View時才會執行。
1. 在網址列輸入"http://{localhost:port}/Movies/Index?searchString={searchString}",按下Enter重新載入頁面即會顯示影片標題內含所搜尋字串的影片。 |
᳓實作2. 修改Views/Movies/Index.cshtml
然而經由修改URL的方式搜尋太不直覺,因此要在Index.cshtml頁面直接加入UI,提供輸入欄位以及控制按鈕,方便使用。
᳓實作3. 修改Views/Movies/Index.cshtml
光只是加入UI仍然沒有提供好的使用體驗,因為當使用者想要將搜尋結果分享給其他人的時候卻發現複製到的URL中並沒有附帶參數,不能夠直接顯示出搜尋的結果,所以要再進行一點修正,使用BeginForm("{Action Name}", "{Controller Name}", FormMethod.Get)。
1. 按下搜尋按鈕後,URL會自動添加"?searchString={searchString}",因此該網址可直接複製至新頁面使用。 |
᳓實作4. 修改Controllers/MoviesController.cs、Views/Movies/Index.cshtml
接著練習加入下拉式選單至頁面中。利用LINQ query搜尋資料表中所有的類型,接著以Distinct()將重複的選項剔除後加入至List,最後將List的資料用ViewBag.SelectList({Collection.IEnumerable items}, "{Selected Value}")代入至View並顯示。
1. 一進入頁面就可以看到"DropDownList()"被編譯成<select>,除了資料庫中的類型外還增加了"全部"的選項,且預設選取"愛情片"。 |