ASP.NET MVC 5 － Adding a Search

᳓前言

本篇文章將"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時才會執行。

	using System;
	using System.Collections.Generic;
	using System.Data;
	using System.Data.Entity;
	using System.Linq;
	using System.Net;
	using System.Web;
	using System.Web.Mvc;
	using WebApplication1.Models;
	namespace WebApplication1.Controllers
	{
	public class MoviesController : Controller
	{
	private MovieDBContext db = new MovieDBContext();
	// GET: Movies/Index?Searchstring={text}
	public ActionResult Index(string searchString)
	{
	var movies = (from m in db.Movies
	select m);
	if(!String.IsNullOrEmpty(searchString))
	{
	movies = movies.Where(s => s.Title.Contains(searchString));
	}
	return View(movies);
	}
	// GET: Movies/Details/5
	public ActionResult Details(int? id)
	{
	if (id == null)
	{
	return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	}
	Movie movie = db.Movies.Find(id);
	if (movie == null)
	{
	return HttpNotFound();
	}
	return View(movie);
	}
	// GET: Movies/Create
	public ActionResult Create()
	{
	return View();
	}
	// POST: Movies/Create
	// To protect from overposting attacks, please enable the specific properties you want to bind to, for
	// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
	[HttpPost]
	[ValidateAntiForgeryToken]
	public ActionResult Create([Bind(Include = "ID,Title,ReleaseDate,Genre,Price")] Movie movie)
	{
	if (ModelState.IsValid)
	{
	db.Movies.Add(movie);
	db.SaveChanges();
	return RedirectToAction("Index");
	}
	return View(movie);
	}
	// GET: Movies/Edit/5
	public ActionResult Edit(int? id)
	{
	if (id == null)
	{
	return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	}
	Movie movie = db.Movies.Find(id);
	if (movie == null)
	{
	return HttpNotFound();
	}
	return View(movie);
	}
	// POST: Movies/Edit/5
	// To protect from overposting attacks, please enable the specific properties you want to bind to, for
	// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
	[HttpPost]
	[ValidateAntiForgeryToken]
	public ActionResult Edit([Bind(Include = "ID,Title,ReleaseDate,Genre,Price")] Movie movie)
	{
	if (ModelState.IsValid)
	{
	db.Entry(movie).State = EntityState.Modified;
	db.SaveChanges();
	return RedirectToAction("Index");
	}
	return View(movie);
	}
	// GET: Movies/Delete/5
	public ActionResult Delete(int? id)
	{
	if (id == null)
	{
	return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	}
	Movie movie = db.Movies.Find(id);
	if (movie == null)
	{
	return HttpNotFound();
	}
	return View(movie);
	}
	// POST: Movies/Delete/5
	[HttpPost, ActionName("Delete")]
	[ValidateAntiForgeryToken]
	public ActionResult DeleteConfirmed(int id)
	{
	Movie movie = db.Movies.Find(id);
	db.Movies.Remove(movie);
	db.SaveChanges();
	return RedirectToAction("Index");
	}
	protected override void Dispose(bool disposing)
	{
	if (disposing)
	{
	db.Dispose();
	}
	base.Dispose(disposing);
	}
	}
	}

view raw MoviesController.cs hosted with ❤ by GitHub

1. 在網址列輸入"http://{localhost:port}/Movies/Index?searchString={searchString}"，按下Enter重新載入頁面即會顯示影片標題內含所搜尋字串的影片。

᳓實作2. 修改Views/Movies/Index.cshtml
然而經由修改URL的方式搜尋太不直覺，因此要在Index.cshtml頁面直接加入UI，提供輸入欄位以及控制按鈕，方便使用。

	@model IEnumerable<WebApplication1.Models.Movie>
	@{
	ViewBag.Title = "Index";
	}
	<h2>Index</h2>
	<p>
	@Html.ActionLink("Create New", "Create")
	@using (Html.BeginForm())
	{
	<p>
	Title:@Html.TextBox("SearchString")<br />
	<input type="submit" value="Filter" />
	</p>
	}
	</p>
	<table class="table">
	<tr>
	<th>
	@Html.DisplayNameFor(model => model.Title)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.ReleaseDate)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.Genre)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.Price)
	</th>
	<th></th>
	</tr>
	@foreach (var item in Model) {
	<tr>
	<td>
	@Html.DisplayFor(modelItem => item.Title)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.ReleaseDate)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.Genre)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.Price)
	</td>
	<td>
	@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
	@Html.ActionLink("Details", "Details", new { id=item.ID }) |
	@Html.ActionLink("Delete", "Delete", new { id=item.ID })
	</td>
	</tr>
	}
	</table>

view raw Index.cshtml hosted with ❤ by GitHub

1. 一進入頁面就可以看到"BeginForm()"被編譯成<form>，其下含"TextBox()"被編譯成<input type="text">，以及<input type="submit">。(此時可直接利用UI進行搜尋，不需要添加與修改URL中的參數，Controller在執行時會自動取用對應id的元件值，若是將@Html.TextBox("searchString")改為@Html.TextBox("searchStrings")便會無法進行搜尋)

᳓實作3. 修改Views/Movies/Index.cshtml
光只是加入UI仍然沒有提供好的使用體驗，因為當使用者想要將搜尋結果分享給其他人的時候卻發現複製到的URL中並沒有附帶參數，不能夠直接顯示出搜尋的結果，所以要再進行一點修正，使用BeginForm("{Action Name}", "{Controller Name}", FormMethod.Get)。

	@model IEnumerable<WebApplication1.Models.Movie>
	@{
	ViewBag.Title = "Index";
	}
	<h2>Index</h2>
	<p>
	@Html.ActionLink("Create New", "Create")
	@using (Html.BeginForm("Index", "Movies", FormMethod.Get))
	{
	<p>
	標題：@Html.TextBox("searchString")<br />
	<input type="submit" value="搜尋" />
	</p>
	}
	</p>
	<table class="table">
	<tr>
	<th>
	@Html.DisplayNameFor(model => model.Title)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.ReleaseDate)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.Genre)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.Price)
	</th>
	<th></th>
	</tr>
	@foreach (var item in Model) {
	<tr>
	<td>
	@Html.DisplayFor(modelItem => item.Title)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.ReleaseDate)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.Genre)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.Price)
	</td>
	<td>
	@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
	@Html.ActionLink("Details", "Details", new { id=item.ID }) |
	@Html.ActionLink("Delete", "Delete", new { id=item.ID })
	</td>
	</tr>
	}
	</table>

view raw Index.cshtml hosted with ❤ by GitHub

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並顯示。

	using System;
	using System.Collections.Generic;
	using System.Data;
	using System.Data.Entity;
	using System.Linq;
	using System.Net;
	using System.Web;
	using System.Web.Mvc;
	using WebApplication1.Models;
	namespace WebApplication1.Controllers
	{
	public class MoviesController : Controller
	{
	private MovieDBContext db = new MovieDBContext();
	// GET: Movies/Index?searchString={text}
	public ActionResult Index(string movieGenre, string searchString)
	{
	var GenreLst = new List<string>();
	var GenreQry = (from d in db.Movies
	orderby d.Genre
	select d.Genre);
	GenreLst.AddRange(GenreQry.Distinct());
	ViewBag.movieGenre = new SelectList(GenreLst, "愛情片");
	var movies = (from m in db.Movies
	select m);
	if (!String.IsNullOrEmpty(movieGenre))
	{
	movies = movies.Where(s => s.Genre == movieGenre);
	}
	if(!String.IsNullOrEmpty(searchString))
	{
	movies = movies.Where(s => s.Title.Contains(searchString));
	}
	return View(movies);
	}
	// GET: Movies/Details/5
	public ActionResult Details(int? id)
	{
	if (id == null)
	{
	return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	}
	Movie movie = db.Movies.Find(id);
	if (movie == null)
	{
	return HttpNotFound();
	}
	return View(movie);
	}
	// GET: Movies/Create
	public ActionResult Create()
	{
	return View();
	}
	// POST: Movies/Create
	// To protect from overposting attacks, please enable the specific properties you want to bind to, for
	// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
	[HttpPost]
	[ValidateAntiForgeryToken]
	public ActionResult Create([Bind(Include = "ID,Title,ReleaseDate,Genre,Price")] Movie movie)
	{
	if (ModelState.IsValid)
	{
	db.Movies.Add(movie);
	db.SaveChanges();
	return RedirectToAction("Index");
	}
	return View(movie);
	}
	// GET: Movies/Edit/5
	public ActionResult Edit(int? id)
	{
	if (id == null)
	{
	return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	}
	Movie movie = db.Movies.Find(id);
	if (movie == null)
	{
	return HttpNotFound();
	}
	return View(movie);
	}
	// POST: Movies/Edit/5
	// To protect from overposting attacks, please enable the specific properties you want to bind to, for
	// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
	[HttpPost]
	[ValidateAntiForgeryToken]
	public ActionResult Edit([Bind(Include = "ID,Title,ReleaseDate,Genre,Price")] Movie movie)
	{
	if (ModelState.IsValid)
	{
	db.Entry(movie).State = EntityState.Modified;
	db.SaveChanges();
	return RedirectToAction("Index");
	}
	return View(movie);
	}
	// GET: Movies/Delete/5
	public ActionResult Delete(int? id)
	{
	if (id == null)
	{
	return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
	}
	Movie movie = db.Movies.Find(id);
	if (movie == null)
	{
	return HttpNotFound();
	}
	return View(movie);
	}
	// POST: Movies/Delete/5
	[HttpPost, ActionName("Delete")]
	[ValidateAntiForgeryToken]
	public ActionResult DeleteConfirmed(int id)
	{
	Movie movie = db.Movies.Find(id);
	db.Movies.Remove(movie);
	db.SaveChanges();
	return RedirectToAction("Index");
	}
	protected override void Dispose(bool disposing)
	{
	if (disposing)
	{
	db.Dispose();
	}
	base.Dispose(disposing);
	}
	}
	}

view raw MoviesController.cs hosted with ❤ by GitHub

	@model IEnumerable<WebApplication1.Models.Movie>
	@{
	ViewBag.Title = "Index";
	}
	<h2>Index</h2>
	<p>
	@Html.ActionLink("Create New", "Create")
	@using (Html.BeginForm("Index", "Movies", FormMethod.Get))
	{
	<p>
	類型：@Html.DropDownList("movieGenre", "全部")
	標題：@Html.TextBox("searchString")<br />
	<input type="submit" value="搜尋" />
	</p>
	}
	</p>
	<table class="table">
	<tr>
	<th>
	@Html.DisplayNameFor(model => model.Title)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.ReleaseDate)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.Genre)
	</th>
	<th>
	@Html.DisplayNameFor(model => model.Price)
	</th>
	<th></th>
	</tr>
	@foreach (var item in Model) {
	<tr>
	<td>
	@Html.DisplayFor(modelItem => item.Title)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.ReleaseDate)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.Genre)
	</td>
	<td>
	@Html.DisplayFor(modelItem => item.Price)
	</td>
	<td>
	@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
	@Html.ActionLink("Details", "Details", new { id=item.ID }) |
	@Html.ActionLink("Delete", "Delete", new { id=item.ID })
	</td>
	</tr>
	}
	</table>

view raw Index.cshtml hosted with ❤ by GitHub

1. 一進入頁面就可以看到"DropDownList()"被編譯成<select>，除了資料庫中的類型外還增加了"全部"的選項，且預設選取"愛情片"。